Top

Product Comparison Install Instructions

Warning!

This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Email our Support Wizards for help.

Before you begin, review Notes Before Installing Apps. This article will help get you prepared and answers many common questions.

Select each step below to view the instructions.

  1. Duplicate themes, to create a backup copy.
  2. From "Shopify Admin", select Apps.
  3. Select Visit Shopify App Store.
  4. Enter Product Comparison in the "Search Bar".
  5. Select Product Comparison.
  6. Select Get.
  7. Select Install app.
  8. Select Approve Charge.
  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

  4. Under "Snippets", find these three files:
    • bold-compare-init.liquid.
    • bold-compare-trigger.liquid.
    • bold-compare-specs.liquid.

    find snippets 

  5. For any that don't exist:
    1. Select Add a new snippet.

      add a new snippet 

    2. Enter the correct Snippet name.

      enter 

    3. Select Create snippet.

      select create snippet 

    4. Copy and paste the code found in each of these links into their respective files:

      copy and paste code  

    5. Select Save.

      select save 

    6. Repeat steps 6a – d for each missing snippet file.
  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

  4. Under "Layout", select theme.liquid.

    select theme.liquid 

  5. Copy and paste this code directly above the </head> tag:
    <!-- BEGIN BOLD PRODUCT COMPARE -->
    {% include "bold-compare-init" with product %}
    <!-- END BOLD PRODUCT COMPARE -->

    copy and paste this code 

  6. Select Save.

    select save 

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

  4. Under "Templates", select collection.liquid.

    Note: If your template contains sections, you will need to select the collection-template.liquid section instead. It may also exist is a "Snippet" called product-loop.liquid or product-grid-item.liquid.

    select collection.liquid 

  5. Find a block of code containing the product.

    Note: It may be contained within <div> tags, and may reference an image, product title, price. The compare at price or vendor may also appear.

    find blpock of code 

  6. Copy and paste this code before the </div> tag.
    <!-- BEGIN BOLD PRODUCT COMPARE -->
    {% include "bold-compare-trigger", display: "checkbox", bold_product: product %}
    <!-- END BOLD PRODUCT COMPARE -->

    copy and paste this code 

  7. Select Save.

    select save 

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

  4. Under "Templates", select product.liquid.

    Note: If your template contains sections, you will need to select the product-template.liquid section instead.

    select product.liquid 

  5. Paste this code where you would like it to appear:

    Note: We recommend you add this below the add to cart button.

    <!-- BEGIN BOLD PRODUCT COMPARE -->
    {% include "bold-compare-trigger", display: "button", bold_product: product %}
    <!-- END BOLD PRODUCT COMPARE -->

    paste this code 

  6. Paste this code where you would like it to appear:

    Note: We recommend you add this after the product description.

    <!-- BEGIN BOLD PRODUCT COMPARE -->
    {% include "bold-compare-specs" with product %}
    <!-- END BOLD PRODUCT COMPARE -->

    ]aste this code 

  7. Select Save.

    select save 

That's it!

Have more questions? Submit a request