You can make most changes in the theme editor, we have built our themes to be extremely customisable, but we understand sometimes it might be needed to edit the theme CSS.
Whether it’s for larger client projects or small tweaks in the Shopify code editor, this guide will help you make those changes effectively.
Method 1: Making Simple CSS Edits via custom.css
This method can be used when you want to make a simple change to an aspect of 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.
Steps:
Check for
custom.cssfile:Open the code editor and navigate to the
Assetsfolder.Look for the
custom.cssfile.If the
custom.cssfile is not present, create a new file:Click on "Add a new asset".
Name the new file
custom.cssand save it.
Add Your CSS:
Write the CSS code into the
custom.cssfile and press 'Save' when you're finished.
Test and Publish:
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: Enabling Unminified Versions of the Theme's CSS
This method can be used when you'd like to make edits to the theme's CSS from the Shopify code editor. Note that some theme versions may not include the unminified theme.min.css file.
Steps:
Edit
layout/theme.liquid:Open the code editor and find
layout/theme.liquid.Look for the following line:
<link rel="stylesheet" href="##{{ 'theme.min.css' | asset_url }}" />
Replace with Unminified CSS:
Replace the line with:
<link rel="stylesheet" href="##{{ 'theme.css' | asset_url }}" />
Save the File:
Save the changes to the
theme.liquidfile.
Note:
If your theme version does not include the theme.css file, you may need to manually unminify the CSS or reach out to the theme's support team for assistance.
By following these steps, you can make edits to the unminified version of the theme's CSS and see those changes reflected in the theme.