BigCommerce Product Locator Installation Notes

If you have a BigCommerce site, the best way to install the Product Locator is to add it directly to one of your "theme files". Before you can do that, you must have the ability to edit theme files. Theme files can only be edited in custom themes. If you have a stock theme (a theme purchased or installed directly into your BigCommerce account) then you must copy this theme to your own custom theme first. More information from BigCommerce support on copying themes in order to edit theme files.

If you are able to edit theme files, please navigate to Storefront Design > My Themes > Current Theme > Advanced > Edit Theme Files. The "Stencil File Editor" will open. Use the file/folder tree on the left to navigate to Templates > Components > Products > product-view.html. This file name may be different depending on your theme. You want to look for the file which contains the "Add to Cart" button because we want you to install the Product Locator after that button. Of course, please install the Product Locator wherever you wish! This is just a suggestion.

Once you are in the theme file editor, please install the Product Locator like so:


{{#if product.sku}}
    <!-- LOCALLY.COM WIDGET EMBED CODE -->
    <div id="lcly-button-0">
      <a id="lcly-link-0" href="https://brands.locally.com" target="_blank"></a>
    </div>
    <script id="lcly-script-0" async></script>
    <script id="lcly-config-0">
      var lcly_config_0 = {
        "company_name": "ACME Widgets",
        "button_text": "Buy it Locally",
        "button_id": "HTML",
        "company_id": "99999",
        "css": "3",
        "color_0": "#C50001",
        "style": "{{ product.sku }}",
        "n_related_styles": "3",
        "show_location_switcher": "1",
        "show_location_prompt": "1",
        "n_dealers": "3",
        "no_link": "1",
        "id": "0"
      };
      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://haba.locally.com/stores/map.js?' + lcly_query_0;
      document.getElementById('lcly-script-0').src = lcly_endpoint_0;
    </script>
{{/if}}

Your settings many vary! But, notice {{ product.sku }} in the middle. That is the most important part. This utilizes the SKU that you have set in your BigCommerce product catalog. This snippet ensure that if you have a product SKU set for this product, BigCommerce will render the Locally Product Locator and injects the SKU into the Locally embed code. As long as your SKU matches the Locally Style Number that we have in our own product catalog, the Product Locator will work 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.