Product Locator Install Guidance - Shopify

Load UPCs in Shopify

The first step is to 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. Select 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.

Place the Embed Code

Follow these steps 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.

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 %}",

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.

Special Note with Categories

With Categories, you can choose to show only tagged dealers for a particular PDP using the category parameter as described in step 7 of this support article.

"category": "REI",

In Shopify, since you can only edit the product template page or create a custom template, there isn’t an easy way to accomplish this. However, once your Product Locator embed code is placed, you should be able to edit the product.liquid file and build in some conditional logic to add this parameter to specific UPCs as needed.

Example of code provided from the Shopify community post here.

{% if product.handle == 'some-handle' %}

  Show something just for the product with the handle of some-handle

{% endif %}

Did you find it helpful? Yes No

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