Follow These Steps:
Load UPCs in Shopify
- Log in to your Shopify admin panel.
- Go to "Products" and select "All Products."
- Choose a product and click on the "Edit" button next to each variant.
- In the variant editor, find the "Barcode" field and enter the UPC value for each variant.
- Save each variant with a UPC value in the Barcode field. Make sure all variants have UPCs entered.
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:
In Shopify, go to "Online Store" and select "Themes."
- Click on the "Actions" dropdown and choose "Duplicate."
- You will now see a duplicated theme named "Copy of ThemeName."
- Click on the "Actions" dropdown for the duplicated theme and select "Rename."
- Rename the theme to "Staging" or any other name you prefer to have a working copy.
Place the Embed Code
Follow these steps in Shopify:
Go to "Online Store" and select "Themes."
- Scroll down to the "Staging" theme and click on "Customize."
- In the top left-hand corner, click on the three dots and choose "Edit Code."
- Find the section to edit. The location may vary depending on your theme, but ideally, you want 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 the position below the shopping cart or below the Buy buttons.
- Paste the embed code in this section.
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
It is recommended to reach out to your Implementation Manager before pushing the staging theme to production. They can review and provide any necessary recommendations to 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 %}
