Advanced customizations

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 customizations

Understanding theme structure

• Easily extendable: We've built our themes 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: Our themes 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

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.

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.

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.

Making code changes to your Shopify theme

Duplicate your theme before making code changes. This will ensure you have a backup to revert to if needed.

Development toolkits

For more advanced customizations we recommend using the a theme toolkit. Our toolkits 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.

Paper toolkit

Space toolkit

Keystone toolkit

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

Add Custom liquid section

• Click Add section.

• Click Custom liquid to add the section.

If you want to install a code snippet across your entire site then you can move your section to the Footer group.

2

Add your code

• Paste in your code.

• Remove the section padding and borders.

• This section renders liquid so if you plan to add JavaScript or CSS you'll need to include that within a <script> or a style tag.

3

Save your changes

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 our development toolkits. Using Custom CSS through the theme editor will maintain your themes original code - this means you'll still be able to update the theme easily.

Popular CSS customizations

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.

Change the background color for a section

1. Navigate to the section you want to edit.

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

3. Alternatively, if you want to apply this change across your entire store front navigate to Theme settings > Custom CSS

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

section { background-color: #000000; }

Change the color of section section headings

1. Navigate to the section you want to edit.

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

3. Alternatively, if you want to apply this change across your entire store front navigate to Theme settings > Custom CSS

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; }

Change the color of a button

1. Navigate to the section you want to edit.

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

2. Alternatively, if you want to apply this change across your entire store front navigate to Theme settings > Custom CSS

3. 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; }

Adjust the size of a button

1. Navigate to the section you want to edit.

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

2. Alternatively, if you want to apply this change across your entire store front navigate to Theme settings > Custom CSS

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

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

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 our development toolkits.

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 . For example if you want to call cart.updateCart() you could do the following.

app.updateCart(true);