Eight Themes Support Documentation

Un-minified CSS & Javascript

We're modernizing our themes' technology stack and putting speed optimizations front and center by default.

You'll notice that the default versions of CSS and Javascript are bundled together and minified - if you've ever tried to edit a minified file you'll know how challenging that can be.

We love that people use our themes as a base for larger customization jobs for clients, or sometimes you just want to make a couple of small tweaks to the theme in the Shopify code editor. We want to ensure that you're able to do both of these things.

 
Warning: This guide follows a code customization process, and therefore does not fall under the scope of our support team. As a prerequisite before continuing, you should be confident in Javascript and SASS/CSS, the theme makes heavy use of these. 

Method 1: Making simple CSS edits via custom.css

 

This method can be used when you want to make a simple change an aspect your store which is not controlled by any other setting and have found it can be achieved with CSS. Alternatively, you may have been provided some custom CSS by the support team and want to include it in your theme.

 

1. Open the code editor and find custom.css inside the Assets folder.

2. Write the CSS code into that file and press 'Save' when you're finished.

3. When you're happy with your changes and have tested thoroughly, you can publish your theme by going to Online store > Themes > Actions > Publish.

 
 
Note: Keep in mind that as per the rules of CSS, any override to default theme styles will need to have selectors that are at least as specific as current selectors in order for the override to take priority. This can be confirmed using your browser's 'Inspect element' developer tools.

Method 2: Enable the unminified versions of the theme's CSS and Javascript

 

This method can be used when you'd like to make edits to the theme's javascript or CSS from the Shopify code editor.

1. Edit layout/theme.liquid and find the following:

 
<script type="module" src="{{ 'theme.min.js' | asset_url }}"></script>

2. Replace it with:

 
<script type="module" src="{{ 'theme.js' | asset_url }}"></script>

3. Find:

 
{{ 'theme.min.css' | asset_url | stylesheet_tag }}

4. Replace it with:

 
{{ 'theme.css' | asset_url | stylesheet_tag }}

5. Save the file.

You're now able to make edits to the unminified versions of the files, and you should see those changes reflected in the theme.

Was this article helpful?