Where to add CSS code changes in Pipeline

1

Open the Code Editor

Choose Edit code from the Theme actions button when using the Theme Editor:

2

Open Pipeline's CSS stylesheet

On the right side, click on the Assets folder. Next, open theme.scss.liquid or theme.css (for Pipeline 5.0):

Note: If you are running an older version of Pipeline, open style.scss.liquid instead.

3

Add your CSS code to the very bottom of the 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. 

Pro tip: Make a duplicate (backup) of your theme first

Always make a duplicate of your theme before performing code changes. This small step will help you if your run into any trouble and avoid downtime for your shop:

Example - Live published theme:

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

Choose duplicate.

Note:
Modify the code at your own risk. Groupthought does 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.