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.
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.
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 UPC 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 UPC 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}}IMPORTANT NOTE
Please note, while our team provides the code and can provide guidance we are unable to write any scripts or touch your CMS.
In this 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.
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).
