Skip to main content
All CollectionsTechnical guides
Getting started with theme customization
Getting started with theme customization
Thomas K avatar
Written by Thomas K
Updated over a week ago

πŸ’‘

We do not provide support for code customizations

If you are not comfortable making code changes, we highly recommend hiring an expert developer.

Getting started with theme customization


Understanding theme structure

  • Easily extendable: We've built Paper with a modular approach, so it's super simple to extend and customize. We use Tailwind to give you an easy approach to styling, and Alpine to add interactivity without weighing you down.

  • Meets all standards for theme store: Paper meets all the requirements for the Shopify theme store.

Generate Figma file from your Shopify theme

Figma can be a valuable tool for creating custom designs for your Shopify theme. While we don't have an official Figma template for our themes, you can still achieve great results using the html.to.design Figma plugin.

  1. Step 1: Install the html.to.design Figma Plugin

    1. To get started, you'll need to install the html.to.design Figma plugin. This plugin will allow you to import your entire demo theme into Figma for customization.

  2. Step 2: Import Your Demo Theme

    1. Once the plugin is installed, use it to import your demo theme into Figma. This will serve as your starting point for customization.

  3. Step 3: Make Design Tweaks

    1. Now that you have your theme in Figma, you can start making design tweaks. Adjust elements, colors, and layouts to match your client's requirements.

Using the theme toolkits

For more advanced customizations we recommend using the a theme toolkit. A toolkit will give you full control over source code. You can compile new CSS and edit the themes core JavaScript. Please refer to the GitHub repos for more information.

Making code changes to your Shopify theme


πŸ’‘ Tip: Duplicate your theme before making code changes. This will ensure you have a backup to revert to if needed.

Adding Custom liquid

The Custom liquid section can be used to add any code snippet to a template. This is a great way to add app install scripts if an app requires manual installation. This is a great approach to take - your theme code remains un-edited and you still have access to easily update the theme.

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. Click "Add section" - if you want to install a code snippet across your entire site then you can move your section to the Footer group.

  3. Click "Custom liquid" to add the section.

  4. Paste in your code.

  5. Remove the section padding and borders.

  6. Click save.

Adding Custom CSS

Custom CSS can be applied to your Shopify theme by using the built-in custom CSS feature in your theme editor. For advanced users who have more experience with development, you can use a toolkit. Using Custom CSS through the theme editor will maintain your theme original code - this means you'll still be able to update the theme easily.

Custom CSS can be used in a variety of ways and is the perfect option for minor customizations. Here are a few guides for commonly requested customizations.

Applying a custom background color to a section

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. Navigate to the section you want to edit and select it.

  3. In the settings panel scroll to the bottom and open the Custom CSS option.

  4. Paste the following code in the input field and update the color value to any hex color code.

section { background-color: #000000; }

Applying a custom heading color to a section

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. Navigate to the section you want to edit and select it.

  3. In the settings panel scroll to the bottom and open the Custom CSS option.

  4. Paste the following code in the input field and update the color value to any hex color code. E.g. #000000 could be changed to #ffffff.

h3 { color: #000000; }

Adjusting button size

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. Navigate to the section you want to edit and select it.

  3. In the settings panel scroll to the bottom and open the Custom CSS option.

  4. Paste in the following code. Adjust any of the values to change the button as needed

.btn { font-size: 24px; padding: 10px 30px; }


​Applying a custom button color to a section

  1. Open the theme editor by clicking Customize next to the relevant theme.

  2. Navigate to the section you want to edit and select it.

  3. In the settings panel scroll to the bottom and open the Custom CSS option.

  4. Paste the following code in the input field and update the color value to any hex color code.

    • In the below example, #000000 can be replaced to change the background of the button, #ffffff can be replaced to change the text color of the bottom

.btn { background: #000000; border: #000000; color: #ffffff; }


Adding custom JavaScript

Since our themes are built using Alpine it's often best to consider adding functionality through Alpine first. We can use Alpine to add functionality by writing code directly inside the liquid markup.

For more advanced customizations we recommend using a theme toolkit.

Access theme functions and data

If you are integrating your Shopify theme with a third-party app you may want to access some of the globally available functions. Since our themes utilize Alpine.js this is done a bit differently than normal.

The first step is to access the app object. This object contains all the exposed functions and is stored in the _x_dataStack array of the html element. Here is how to access it:
​

var app = document.querySelectorAll('html')[0]._x_dataStack[0];


From here you can call any of the functions available in the Paper toolkit. For example if you want to call cart.updateCart() you could do the following.

app.updateCart(true);

Did this answer your question?