Where to add Javascript code changes in Pipeline

1

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.

2

Open the Code Editor

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

3

Open the correct Javascript file

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. 

OPTION 1 - Pipeline 4 and higher

If you're theme version is Pipeline 4 or higher, use this option. 

On the right side, click on the  Assets folder. Next, open theme.js:

Proceed to Step 4 after opening theme.js 

OR

OPTION 2 - Earlier versions of Pipeline

If your theme version is Pipeline 3.1 or earlier, this this option

On the right side, click on the  Assets folder. Next, open shop.js.liquid:

4

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. 

Example:

Save the file after adding your 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:

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.

Still need help? Contact Us Contact Us