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.
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.
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.
We're modernizing our themes' technology stack and putting speed optimizations front and center by default.