💡
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.
Step 1: Install the html.to.design Figma Plugin
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.
Step 2: Import Your Demo Theme
Once the plugin is installed, use it to import your demo theme into Figma. This will serve as your starting point for customization.
Step 3: Make Design Tweaks
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.
Open the theme editor by clicking Customize next to the relevant theme.
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.
Click "Custom liquid" to add the section.
Paste in your code.
Remove the section padding and borders.
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.
*A temporary fix for adjusting color swatch sizing
Navigate to your theme editor >Theme settings > Custom css
Within your custom css block paste the following code:
For color swatches/custom swatches (adjust the REM within height and width in increments of .1 for the best results) :.btn.btn--plain {
height: 2.2rem;
width: 2.2rem;
}
Applying a custom background color to a section
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the section you want to edit and select it.
In the settings panel scroll to the bottom and open the Custom CSS option.
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
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the section you want to edit and select it.
In the settings panel scroll to the bottom and open the Custom CSS option.
Paste the following code in the input field and update the color value to any hex color code. E.g.
#000000could be changed to#ffffff.
h3 { color: #000000; }
Adjusting button size
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the section you want to edit and select it.
In the settings panel scroll to the bottom and open the Custom CSS option.
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
Open the theme editor by clicking Customize next to the relevant theme.
Navigate to the section you want to edit and select it.
In the settings panel scroll to the bottom and open the Custom CSS option.
Paste the following code in the input field and update the color value to any hex color code.
In the below example,
#000000can be replaced to change the background of the button,#ffffffcan 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);