Product Locator Install Guidance - BigCommerce

In order to install our Product Locator on a BigCommerce site, you must have the ability to edit theme files. If you have a stock theme or a theme that you installed directly into your BigCommerce account, you will need to make a copy of that theme before editing.

More information from BigCommerce support on copying themes in order to edit theme files

Make a Staging Copy (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 begin, first copy your current theme file before making edits so you can always revert back to a clean copy. 
  • Navigate to Storefront Design > My Themes > Current Theme > Advanced > Make a Copy. 
  • Give your theme a Theme Name. Click Save.

Locally Big Commerce Installation - Make a Staging Copy - Watch Video

Apply the new theme. Find your copied theme below your current theme and select the three dots to open the menu. Click Apply.

Install the Embed Code
Click the Customize button. This will open the Page Builder. Click Theme Styles in the left hand navigation. Select Edit Theme Files. 

Locally Big Commerce Installation - Edit Theme Files - Watch Video

The next part can be tricky because theme files are named differently. 

First of all, there is one parameter in the embed code that you need to change before pasting in. In our example below we changed the highlighted parameter. 

This utilizes the UPC that you have supplied in your BigCommerce product catalog. This snippet ensures that if you have a product UPC set for this product, BigCommerce will render the Locally Product Locator and inject the UPC into the Locally embed code. As long as your UPC matches the Locally Style Number that we have in our own product catalog, the Product Locator will work as expected.

  <!-- 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",

        "upc": "{{ product.upc }}",

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

In my theme example, I went to product-view.html. I hit CTRL+F to find the “Add to Cart” section. Paste the embed code beneath there. Click Save & Apply file.

BigCommerce - Place the Embed Code on PDP - Watch Video



Navigate to a product page and you should now see the Locally Product Locator widget below the Add to Cart option (or wherever you chose to place it)


The product locator can now be styled with CSS.

Did you find it helpful? Yes No

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