Verify which version of Pipeline your shop is running
This is an important step. Depending on which version of Pipeline you'll be adding code to a certain file. Older versions of Pipeline will use a different file for the CSS than newer versions of Pipeline.
Check your version of Pipeline before starting:
Which version of Pipeline am I using?
Once you know which version of Pipeline your shop is running, then continue to Step 2.
Open the Code Editor - Two methods
1. Draft themes - If you're setting a non-published 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 a live published theme, use this method:
Pipeline 4 or higher follow this step
Skip to Step 3b if your theme is before Pipeline 4.
In Step 1 we checked which version of Pipeline your shop is running. Be sure you know the version as this is key for where to add your code.
On the right side, click on the Assets folder. Next, open theme.js:
Proceed to Step 4 after opening theme.scss.liquid
Pipeline 3.1 or earlier follow this step
Skip if you're using Pipeline 4 or higher.
Earlier versions of Pipeline - If your theme is Pipeline 3.1 or earlier, on the right side, click on the Assets folder. Next, open shop.js.liquid:
All versions - Add your 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.
Save the file after adding your code.
Modifying the theme code will make it difficult to update your theme. 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.
Pro tip: Always make a duplicate of your theme before performing code changes. Example (live published theme):