Articles on: BFG

BFG Real-Time Inventory Store Locator Installation Guide

This guide provides step-by-step instructions for installing the BFG Real-Time Inventory Store Locator on your eCommerce website. By integrating the BFG Store Locator, you empower your customers to find nearby retailers carrying your products—complete with real-time inventory updates—directly from your product or store locator pages.

Overview

BFG offers two types of store locators:

General Store Locator
Displays a list of all retailers who carry your products. Ideal for a standalone “Where to Buy” or “Find a Retailer” page.
Product-Specific Store Locator
Displays a list of retailers who have a specific product in stock. Typically embedded on product detail pages (PDPs) with a Call-to-Action (CTA) button to open the locator.

Step 1: Create & Customize Your Store Locator

Log in to your BFG Portal.
Navigate to the Settings > Store Locator section.
Choose your locator type:

General Locator – Displays all stores.

Product-Specific Locator – Shows only stores with the selected product in stock.

Customize the locator:

Adjust colors, fonts, and styles to match your website’s branding.

Once complete, save your configuration.

Step 2: Embed the Store Locator on Your Website

For General Store Locator (Standalone Page)

Copy the provided embed script from the BFG Portal.
Paste the script into the HTML of your standalone store locator page—usually labeled “Where to Buy” or “Find a Retailer”.
Publish or update your page.

Example placement:

<!-- Place this in the body of your standalone store locator page -->
<div id="bfg-locator-container" style="position: fixed; width: 90%; height: 90%; z-index: 100;"></div>
<script type="text/javascript" id="store-locator-script" data-uuid="xxx"
src="https://atlas.buyingfreedom.app/js/store-locator.js"></script>

✅ No additional scripting is needed. The locator will automatically display all available retailers.

For Product-Specific Store Locator (Product Detail Page)

Copy the product-specific embed script from the BFG Portal.
Paste the code within your product detail page template (e.g., Shopify, Magento, WooCommerce, etc.).
The embed includes a CTA button. When clicked, it triggers the locator overlay, showing only stores that carry the specific product.

Example placement:

<!-- CTA Button -->
<button id="store-locator-btn">Check Local Stock</button>

<!-- Container to load the locator -->
<div id="bfg-locator-container"> 
    <button id="store-locator-hide-btn" class="tw-button"><i class="fa-regular fa-xmark close-btn"></i></button>
</div> 

<!-- Embed Script -->
<script>
  document.getElementById('store-locator-btn').addEventListener('click', function() {
        document.getElementById('bfg-locator-container').style.display = 'block';
        document.body.classList.add('bfg-open');

        if (!document.getElementById('store-locator-script')) {
            const script = document.createElement('script');
            script.src = 'https://atlas.buyingfreedom.app/js/product-store-locator.js';
            script.id = 'store-locator-script';
            script.dataset.upc = '{{your_product_upc}}';
            script.dataset.uuid = 'xxxx';
            script.dataset.token = 'yyyy';
            document.head.appendChild(script);
        }
    });
    
    document.getElementById('store-locator-hide-btn').addEventListener('click', function() {
        document.getElementById('bfg-locator-container').style.display = 'none';
        document.body.classList.remove('bfg-open');
    });
</script>

⚠️ Make sure to replace {{your_product_upc}} with the actual product UPC.

Tips & Best Practices

Always test the locator after embedding to ensure proper display and functionality.
Use product UPC to identify a product and avoid mismatches.

Need Help?

If you run into issues or have questions about advanced customization, reach out to our support team. We're happy to help!

Updated on: 04/04/2025

Was this article helpful?

Thank you!