Top

Product Comparison Liquid Install Instructions

Step 1 - Add Snippet Files

When the Product Comparison app is first installed to your store, 3 files are automatically added to the Snippets folder of the theme.

In the Snippets folder of the theme, check to see if these 3 files exist..

  • bold-compare-init.liquid
  • bold-compare-trigger.liquid
  • bold-compare-specs.liquid

If these files are there, perfect!  Continue to step 2.

If these files are missing, you will see errors on the store website after the install. In that case, click on the appropriate tab above for instructions on how to create a particular snippet.

bold-compare-init

Create a snippet called bold-compare-init.liquid. Copy and paste this code into the snippet file.

bold-compare-trigger

Create a snippet called bold-compare-trigger.liquid. Copy and paste this code into the snippet file.

bold-compare-specs

Create a snippet called bold-compare-specs.liquid. Copy and paste this code into the snippet file.

Step 2 - Add init script to theme

In the theme.liquid find the closing head tag, </head>. Above this tag, copy and paste this code.

Save the changes and continue to step 3.

Step 3 - Add checkboxes on collection page

As themes vary on how they are designed, this step may change code in the collection.liquid or the code change will be in a snippet, most commonly named
product-loop.liquid or product-grid-item.liquid.

Find the block of code that contains the product. For many themes this will be contained within </div> tags, that has code that references an image, product title, price. The compare at price or vendor may also appear.

Before the closing tag, such as </div>, copy and paste this code.

Need help? Click on the Example tab to see where this code needs to go.

Save the changes and continue to step 4.

Example

Click image to enlarge.

Step 4 - Add compare button to product page

In the product.liquid template, copy and paste the code below to add the Compare button.

You can choose where on the page to have it display. Our suggestion is to add it below the add to cart button.

Example

Click image to enlarge.

Step 5 - Add specs table to product page

Staying in the product.liquid template, copy and paste the code below to show the specs table.

You can choose where on the page to have it display. Our suggestion is to add it after the product description.

Example

Changed themes?

The code added in the steps above is tied to the theme. When the theme is changed, the code will need to be added all over again from the start.

From time to time, theme developers may release an update to their themes. Unlike typical software updates that knows what was there, what is changed and fills in the missing pieces, a Shopify theme update is a fresh copy of the theme, removing any code or other customizations added.

When the theme is changed or updated, there are 3 additional files that need to be added. Click on the tabs and follow the steps.

Page Template

Under the Templates folder of the theme, click Add a new template. In the window that appears, create a new template for page called bold-product-compare.
Click Create template.

Copy and paste the code below into the newly created page template file. Save the file once done.

bold-compare.css

Under the Assets folder of the theme, click Add a new asset. In the window that appears, click on the Create a blank file tab.

Create a blank file called bold-compare and select .css from the dropdown.
Click Add asset.

Copy and paste the code below into the newly created css asset file. Save the file once done.

bold-compare.js

Under the Assets folder of the theme, click Add a new asset. In the window that appears, click on the Create a blank file tab.

Create a blank file called bold-compare and select .js from the dropdown.
Click Add asset.

Copy and paste the code below into the newly created js asset file. Save the file once done.

Have more questions? Submit a request