> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://care.coreware.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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

1. Log in to your [BFG Portal](https://buyingfreedom.app/login).
    
2. Navigate to the **Settings > Store Locator** section.
    
3. Choose your locator type:

* **General Locator** – Displays all stores.

* **Product-Specific Locator** – Shows only stores with the selected product in stock.
        
4. 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)

1. Copy the provided **embed script** from the BFG Portal.
    
2. Paste the script into the HTML of your standalone store locator page—usually labeled “Where to Buy” or “Find a Retailer”.
    
3. 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)

1. Copy the **product-specific embed script** from the BFG Portal.
    
2. Paste the code within your product detail page template (e.g., Shopify, Magento, WooCommerce, etc.).
    
3. 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!