Story theme: Where to add CSS code changes

When making style changes to your theme, we recommend that you add CSS override code to the bottom of the main theme.scss.liquid file. This preserves the original source code of the theme when makes troubleshooting much easier as well as updating your theme to a newer version. 

Here's how to find theme.scss.liquid for Story Theme:

1

Open the Code Editor

This will depend based on which theme you are working out of: A draft unpublished theme or your main live published theme. 

1. Draft themes - If you're setting an unpublished draft theme, then use this method:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code

Example draft theme (draft themes are unpublished themes):

2. Live theme - If you're editing you main live published theme, use this method:

2

Open theme.scss.liquid

On the right side, click on the  Assets folder and then theme.scss.liquid. Tip: Search for "css" without quotes to filter the files:

3

Add your code to the very bottom of the file

Add any of your override code or new CSS to the very bottom of the file on a new line after all other code. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.

Note:
Modify the theme code at your own risk. Invalid CSS or SCSS can cause your site to not load correctly. Always make a duplicate/backup of your theme before making code changes. Groupthought does not provide any warranty or support for code changes. Please work with a private developer or Shopify Expert to ensure proper customization.

Still need help? Contact Us Contact Us