The Settings page gives you control over how eLocate works and looks on your site. From choosing what elements appear in your store locator, to customizing colors and text, connecting your website, and adding your Google Maps API key — this is where you fine-tune the experience for your customers.

Navigating to Global Filters:  Click the Settings tab from the submenu (see Navigating to eLocate for full steps).

3.1. Setup  #

When you first open the Settings submenu, you’ll land on the Setup tab. This tab contains switches and customization options for additional features in your store locator. Each feature includes a Preview button so you can see how it will look before saving.

💡Tip: Preview before customizing. Click the Preview button to see a sample reference of how filters may appear in the store locator.

Radius Filter

• What it does: Allows visitors to narrow down store results by distance.
• Options available: 5, 10, 25, 50, 100, and 250 miles (preset in the app).
• How to use:
  1. Toggle the switch On to enable the radius filter.
  2. Click Preview to see how the dropdown selector will appear in the store locator.
  3. Toggle Off anytime to hide it.
     

Custom Text on Filter Pop-up

• What it does: Displays a custom message inside the filter pop-up to guide or inform visitors.
• Example Preview: “Need help choosing the right applicator? Learn more.” (with a link button).
• How to use:
  
  1. Toggle the switch On to enable this feature.
  2. Click the “Click Here to Customize” button to open the customization pop-up.
  3. In the pop-up, fill in:
     • Main Heading – your message title.
     • Call-to-Action Button Text – the text of the clickable link button (e.g., “Learn More.”)
     • Call-to-Action Button Link – the page link (URL) where the button should redirect.
       
  4. Click Save in the pop-up to apply.

Extra Tabs

• What it does: Adds up to three tabs below the search banner and results section to display extra information or promotions.
• How to use:
  1. Toggle the switch On to enable extra tabs.
  2. Click the “Click Here to Customize” button to open the Extra Tabs Customization pop-up.
  3. Fill in details for each tab you want to use:
     • Heading Title
     • Button Text
     • Description
     • Font Awesome Icon.
       • Go to Font Awesome Icons.
       • Search for an icon (e.g., “star,” “map,” “gift”) and click it.
       • Copy the class name from the HTML snippet (e.g., fa-solid fa-star).
         
       • Paste this class name into the Font Awesome Icon field.

⚠️Important Notice: Stick to Free icons. Pro icons require a subscription and won’t work here.

• Button Link – page link (e.g., https://yourstore.com/)
  

4. Leave unused tab fields blank (e.g., fill only Tab 1 if you need just one, fill all three if you need to add 3 tabs).
5. Click Save in the pop-up to confirm.

💡Tip: Use tabs to highlight promotions, FAQs, or special services. Even a single tab can make your locator feel more interactive and informative.

3.2. Design  #

The Design tab lets you tailor the look of your store locator to match your brand. You can adjust your color palette and customize the search header messaging so your locator feels on-brand and user-friendly. Each option comes with a Preview button to show how it will appear before you save.

💡Tip: Preview before customizing. Click the Preview button to see a sample reference of how filters may appear in the store locator.

How to Customize Colors #

• What it does: Defines the main colors used in your locator — buttons, highlights, and featured filters.
• Available options:
  
  • Primary Color – controls the main buttons and interface elements.
    • Choose Text Color and Background Color.
      
  • Secondary Color – supports secondary buttons and interface sections.
    • Choose Text Color and Background Color.
      
  • Accent Color – applies to featured global filters and highlight elements.
    • Choose Text Color and Background Color.

How to set colors:

1. Under each color section, click the color picker.
2. Select a color from the palette, or manually enter a HEX or RGBA code.
3. Use Preview to check how each color applies to buttons, highlights, and filters.
4. Click Save to apply changes.

💡Tip: Use your brand’s color codes here for a consistent experience across your website and store locator.

How to Customize the Search Header #

• What it does: Personalizes the heading and results area above the store locator to better reflect your brand and tone.

Available fields:

• Heading Text – main headline above the locator.
• Subheading Text – supporting line for extra context.
• Results Title Text – replaces the word Stores in search results.
  • Example: enter Installers → “Showing 5 Nearby Installers” instead of “Stores.”
• Text Color – customize the color for heading, subheading, and results title.
  

Search Header Background Options:
Choose how the background of your search header will appear by selecting the radio button:

1. Use an Image –
   • Locate Upload Your Image.
   • Drag and drop your image file into the upload area, or click Browse to select a JPG or PNG file from your device.
   • Recommended image size: No bigger than 1750px wide and 700px high.
   • Once uploaded, your image will appear in the Current Image Preview.
2. Use Solid Color – choose a background and border color.
3. Use No Background – removes background styling completely.
   

Steps to customize:

1. Enter text in the Heading, Subheading, and Results Title fields.
2. Pick a Text Color using the selector.
3. Choose one of the three background styles (Image, Solid Color, None).
4. Click Preview to confirm how it looks.
5. Click Save to finalize.

💡Tip: After saving, you may check your site to ensure your colors look good and text is readable. You can always return to Settings to adjust if needed.

3.3. Website Integration #

The Website Integration tab connects eLocate directly to your BigCommerce store. By enabling this option, a store locator page will be created automatically on your site without needing extra coding.

Step 1: Enable Store Locator on Your Website

1. Locate Integrate eLocate to Your BigCommerce Website.
2. Toggle the switch to ON to show the store locator on your site.

• If you toggle it OFF, the locator will be hidden, and the fields below will not appear.
  

Step 2: Enter Page Name and URL

1. In Website Page Name, type the display name for your store locator page.
   • Example: Store Locator
     
2. In Website Page URL, you have two options:
   
   Option 1: Enter the full URL
   • Example: https://yourstore.com/store-locator
   • Use this if you want to specify the exact full link.
     

Option 2: Enter only the last part of the URL (recommended)

• Example: /store-locator
• The full page URL will automatically become https://yourstore.com/store-locator.
• This is simpler and avoids mistakes — just type the part after your domain.

💡Tip: Both options work, but using just the last part of the URL (/store-locator) is usually simpler and less error-prone.

Step 3: Save Your Changes

• Click Save at the top-right corner of the page.
• A new page displaying your store locator will automatically be created on your BigCommerce store.
• A small confirmation message will appear once your changes are saved successfully.

⚠️ Important Notice: • To ensure your reviews sync properly, avoid making changes directly on your BigCommerce website. • If you need to update the Page Name or Page URL later, do it here in eLocator. • Changes may take up to a minute to appear on your live site — check your website after saving to verify.

3.4. General #

The General tab is where you connect eLocate with Google Maps by adding your API key. This integration powers the map display and location accuracy in your store locator.

How to Add Google Maps API Key #

1. Log in to your Google Cloud Console at console.cloud.google.com.
2. Follow the steps in the Google Maps API Key Guide (click the Click Here link provided in eLocate).
3. Once you’ve generated your API key, copy it.
4. In eLocate, paste the key into the Google Maps API Key field.
5. Click Save.

⚠️ Important Notice: If you need help setting up your Google Maps API key, please feel free to contact our support team