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.

1

Open the Code Editor

From the theme editor (customize theme) click "Theme actions" and then "Edit code" to get to the theme editor.

2

Open the Story CSS file

On the left side, from the Assets folder, open theme.scss.liquid:

3

Add your code to the very bottom of the file

On the right code area, scroll to the very bottom of the file (it's a very long file), add the code snippet 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:

Keyboard shortcuts: Mac use Command-DownArrow to reach the bottom of the file quickly or on Windows use the End key.

Save the file:

It's very important to add the code to the bottom of the file rather than modifying the original source code. This will help when you update your theme to a newer version and most importantly preserves the original code in case the code you add does not work or you need to remove it in the future. Always add the code on a new line and do not mix with any other code. 

Make a duplicate (backup) of your theme first

Pro tip: Always make a duplicate of your theme before performing code changes. 

Example - Live published theme:

OR

For draft unpublished themes, use the actions link for that theme:

Note:
Modify the code at your own risk. Groupthought will not provide any warranty or support for code changes. Please work with a developer or Shopify Expert to ensure proper customization. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.