Shopify Product Locator Installation Notes

First, make sure UPCs are loaded in Shopify.

The PL will not work without UPCs. 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 the brand does not have any variants for their products, they will need to add a single variant to each product. If there are already multiple variants for each product, great.

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 PL can be installed.

Next, locate the code containing the “Add to Cart” button.

Shopify is an ecommerce platform so all themes will have an “add to cart” somewhere. Depending on how the theme was designed, it could be located in a template, section, or snippet. Go to “Sales Channels > Themes > Your Theme > Edit Code”. Browse the various files until you find the correct code page to edit.

Install the PL.

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 PDP 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.


 

Example of code from product-form.liquid snippets sectio


<div class="lcly-container">
  <!-- LOCALLY.COM WIDGET EMBED CODE -->
  <div id="lcly-button-0">
    <a id="lcly-link-0" href="http://brands.locally.com" target="_blank">
      Product Locator by Locally
    </a>
  </div>
  <script id="lcly-script-0" async></script>
  <script id="lcly-config-0">
    var lcly_config_0 = {
      "company_name": "xxx",
      "button_text": ":heart:",
      "button_id": "HTML",
      "company_id": "xx",
      "css": "6",
      "color_0": "#CBA155",
      "upc": "{{ variant.barcode }}",
      "always_hide_button": "1",
      "n_related_styles": "3",
      "show_dealers": "1",
      "n_dealers": "3",
      "show_only_stocking_dealers": "1",
      "no_link": "1",
      "hide_all_when_no_stock": "1"
    };
    var lcly_query_0 = Object.keys(lcly_config_0)
    .reduce(function(a,k){a.push(encodeURIComponent(k) + '='
    + encodeURIComponent(lcly_config_0[k]));return a},[]).join('&');
    var lcly_endpoint_0 = 'https://masseys.locally.com/stores/map.js?' + lcly_query_0;
    document.getElementById('lcly-script-0').src = lcly_endpoint_0;
  </script>
</div>


Did you find it helpful? Yes No

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