Product Locator Install Guidance - Shopify

Load UPCs in Shopify

First, make sure UPC/EANs are loaded in Shopify. The Product Locator will not work without the UPCs entered. 

In the Shopify admin tool, go to “Products > All Products”. Then choose a product. In the product editor there is a section called “Variants”. If your products have variants, you need to be sure they are entered here.

Click the ‘Edit’ button on each variant. There is a field called “Barcode”. The variant UPC value should be entered (or present) in this field. Save each variant with a UPC value in each Barcode field. Once all of the variants have UPCs, the Product Locator can be installed.

Duplicate & Create Staging Theme (Best Practice Recommendation)

Before installing the embed code, it is recommended that you create a duplicate of your site for staging purposes so that you are not editing your live environment.
To do this, in Shopify:

  • Select Online Store > Themes.
  • On this screen, click Actions > Duplicate.
  • You should now see a Duplicate theme “Copy of ThemeName”. 
  • Click Actions > Rename this theme “Staging” so you have a working copy.

Duplicating Your Theme - Watch Video

Placing the Embed Code

In Shopify:

  • Go to Online Store > Themes.
  • Scroll down to your “Staging” theme and click “Customize”.
  • In the top left hand corner, select the three dots and click Edit Code.
  • Find the section to edit. 
    • NOTE: All Shopify themes work a little differently, but ideally, you are going to locate the code containing the “Add to Cart” button. In the default Shopify theme, “Dawn”, this is in the “main-product.liquid” file.
      Locate below the shopping cart or in our example case, below the Buy buttons. 
  • Paste the embed code here.

Placing the Product Locator Code - Shopify - Watch Video

Once you have identified where you need to insert the PL, you need to determine how your theme handles variant switching. Unfortunately there is no ‘one size fits all’ solution for Shopify. Every Shopify theme has a different way of handling PDPs and variant rendering. Some themes will reload the page when a new variant is selected. Others will load the variant via Javascript.

  • If your theme reloads the PDP when a new variant is chosen, insert this parameter into the embed code:
    "upc": "{ variant.barcode }”,
  • If your theme does not reload the PDP when new variants are chosen, use this version of the embed code:
    "upc": "{% for variant in product.variants %}{{ variant.barcode }},{% endfor %}”,

Variant Reload Parameter - Shopify - Watch Video

Note with the latter option if you want the PL modal to load with the specific variant chosen, some additional custom javascript will need to be written for the Shopify theme

  • Sometimes you can simply add UPCs separated by commas to cover all variants.
    "upc": "UPC1, UPC2, UPC3”

Once you have code in place, click Preview to ensure it is showing up as expected or make changes as needed. Once in place, save the theme and if all looks good, push your “Staging” them to live.

Best Practice Recommendation

Before pushing your staging theme to production, contact your Implementation Manager and provide access to review. They will be happy to make any recommendations and ensure the product locator is working as expected.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.