Integrating with your Shopify website

This guide explains how to integrate the NearSt Product Locator widget into your Shopify product pages.

Prerequisites

• Using the same barcodes for your products between NearSt and Shopify
• A Shopify store with admin access
• A NearSt account with Product Locator license key
• Basic knowledge of Shopify theme editing and/or HTML

Installation steps

1. Access the Shopify theme editor
   Log in to your Shopify admin panel and navigate to Online Store → Themes.
   Click Edit code on your active theme.

2. Locate the product template
   In the theme editor, find your product template file. This is typically located at sections/product-template.liquid or templates/product.liquid.

3. Add the widget
   Locate the section where you want the widget to appear (recommended: just above the "Add to Cart" button).
   Add the following code:

   <script src="https://product-locator.near.st/embed.js" async defer></script>
   <div
     class="nearst-locator-button"
     data-license-key="YOUR_LICENSE_KEY"
     data-barcode="{{product.barcode}}"
   ></div>

4. Test the Integration
   Preview your changes on a product page, and verify that the widget appears and functions correctly.
   Ensure the barcode is being passed correctly.

Product identifier options

Shopify provides several fields for product identification. You should use the one that matches the barcodes of the stock data you're sending to NearSt.

If you're unsure about the types of barcodes you're sending to NearSt, sign into the NearSt dashboard (opens in a new tab), navigate to one of your stores, and look at the Inventory → Manage items page.

Standard Shopify product fields

<!-- General barcode field -->
{{product.barcode}}
 
<!-- Stock Keeping Unit -->
{{product.sku}}
 
<!-- Unique Shopify product ID -->
{{product.id}}
 
<!-- Variant-specific barcode -->
{{variant.barcode}}
 
<!-- Variant-specific SKU -->
{{variant.sku}}

Using metafields

If you store GTINs or other identifiers in metafields, access them like this:

<!-- Global metafield -->
{{product.metafields.global.gtin}}
 
<!-- Custom metafield -->
{{product.metafields.custom.upc_code}}

Common setup examples

<!-- Using SKU -->
<script src="https://product-locator.near.st/embed.js" async defer></script>
<div
  class="nearst-locator-button"
  data-license-key="YOUR_LICENSE_KEY"
  data-barcode="{{product.sku}}"
></div>
 
<!-- Using variant barcode -->
<script src="https://product-locator.near.st/embed.js" async defer></script>
<div
  class="nearst-locator-button"
  data-license-key="YOUR_LICENSE_KEY"
  data-barcode="{{variant.barcode}}"
></div>
 
<!-- Using GTIN from metafield -->
<script src="https://product-locator.near.st/embed.js" async defer></script>
<div
  class="nearst-locator-button"
  data-license-key="YOUR_LICENSE_KEY"
  data-barcode="{{product.metafields.global.gtin}}"
></div>

Fallback pattern

You can implement a fallback pattern to use alternative identifiers:

<script src="https://product-locator.near.st/embed.js" async defer></script>
<div
    class="nearst-locator-button"
    data-license-key="YOUR_LICENSE_KEY"
    data-barcode="{{ product.barcode | default: product.sku | default: variant.barcode }}"
></div>

Troubleshooting

• If the widget doesn't appear, check that:
  • Your API key is correct
  • The product has a valid barcode
  • The script is loading properly
  • There are no JavaScript console errors
• Verify the chosen product identifier field contains the correct data by checking your product details in Shopify admin

Widget customization

You can customize the widget's appearance using the options described in the customization guide.