Settings

The Settings page lets you customize how your store locator looks and works. From here, you can manage your locator’s features, appearance, website integration, and Google Maps API key.

To access Settings

• In eLocate, click Settings from the menu.

Setup #

The Setup tab opens by default when you open the Settings page.

Here, you can turn additional features on or off and customize how they appear in your store locator.

Radius Filter #

Enabling the Radius Filter adds a Select Radius dropdown to your store locator’s search bar, allowing customers to search for stores within a specific distance.

1. (Optional) Click Preview to see how the Select Radius dropdown appears in your store locator.
2. Turn the Radius Filter toggle On.
3. Once enabled, customers can choose from the preset distance options of 5, 10, 25, 50, 100, and 250 miles using the Select Radius dropdown in your store locator’s search bar.

Custom Text on Filter Pop-up #

Enabling the Custom Text on Filter Pop-up displays a custom message at the top of your store locator’s Filters panel. You can use it to highlight important information, promotions, or direct customers to another page using a call-to-action button.

1. (Optional) Click Preview to see how the custom message appears in your store locator.
2. Turn the Custom Text on Filter Pop-up toggle On.
3. Click Click Here to Customize.
4. Enter the following:
   • Main Heading – The title displayed above your message.
   • Call-to-Action Button Text (Optional) – The text shown on the button (for example, Learn More).
   • Call-to-Action Button Link (Optional) – The webpage customers are taken to when they click the button.
5. Click Save.

Extra Tabs #

Enabling Extra Tabs adds up to three customizable tabs to your store locator page. Use them to organize and showcase additional information, such as promotions, FAQs, special services, or other helpful content for your customers.

1. (Optional) Click Preview to see how the additional tabs appear in your store locator.
2. Turn the Extra Tabs toggle On.
3. Click Click Here to Customize.
4. For each tab you’d like to display, enter the following:
   • Heading Title – The name of the tab.
   • Description – The information displayed when customers open the tab.
   • Button Text – The text shown on the button.
   • Button Link – The webpage customers are taken to when they click the button.
   • Font Awesome Icon – The icon displayed beside the tab heading.

All of these fields are optional, so you can add only the information you’d like to display.

To add a Font Awesome Icon:

• Click the Font Awesome link beside the Font Awesome Icon field. This opens the official Font Awesome website, where you can browse and copy an icon’s HTML code.
• Search for the icon you’d like to use.
• Copy the icon’s HTML code.
• Return to eLocate and paste the HTML code into the Font Awesome Icon field.

5. Leave any unused tabs blank.
6. Click Save in the customization pop-up.
7. Click Save again in the top-right corner of the page to apply your changes.

Design #

The Design tab lets you customize the appearance of your store locator to match your brand. Here, you can update your color palette and personalize the search header to create a more consistent experience for your customers. 

Colors #

Customizing the Colors section lets you apply your brand colors throughout your store locator, including the Search button, Filter button, featured global filters, and other color-customizable text. 

• Primary Color – Customizes the Search button and the buttons used in Extra Tabs.
• Secondary Color – Customizes the Filter button, icons, and results text.
• Accent Color – Customizes Featured Global Filters.

To customize any of the colors above:

1. Choose a Text Color and Background Color using the color picker, or enter a HEX or RGBA color code.
2. Repeat this for any other color sections you’d like to customize.
3. If you’re finished customizing your colors, click Save to apply your changes. Otherwise, continue to the next section.

Search Header #

Customizing the Search Header lets you personalize the section above your store locator, including the heading, supporting text, search results title, and background style.

1. Enter your preferred text for the following fields:
   • Heading Text – The main heading displayed above your store locator.
   • Subheading Text – Supporting text displayed below the heading.
   • Results Title Text – The term used to refer to your locations in the search results (for example, Stores, Installers, or Shops).
2. Choose a Text Color for the heading, subheading, and results title.
3. Select one of the following background styles:
   
   Use an Image for the Background
   • Upload a JPG or PNG image by dragging it into the upload area or clicking Browse.
   • Recommended image size: 1750 × 700 pixels or smaller.
   • Your uploaded image will appear in the Current Image Preview.

Use Solid Color for the Background

• Choose a Background Color and Border Color.

Use No Background

• Removes the background from the search header.

4. Click Save to apply your changes.

Website Integration #

The Website Integration tab lets you add your store locator to your BigCommerce storefront. Once enabled, eLocate automatically creates a store locator page on your website—no additional coding required. 

Integrate eLocate to Your BigCommerce Website

Enabling Website Integration automatically creates a dedicated store locator page on your BigCommerce website.

1. Turn the Integrate eLocate to Your BigCommerce Website toggle On.
2. Enter a Website Page Name.
   • This is the name customers will see for your store locator page.
   • Example: Store Locator
3. Enter a Website Page URL.
   • Enter only the last part of the URL.
   • Example: /store-locator
   • Your full page URL will automatically become:
     https://yourstore.com/store-locator
4. When you’re finished, click Save to apply your changes. Otherwise, continue to the next section.

After saving, eLocate automatically creates a new store locator page on your BigCommerce website using the page name and URL you entered. Visit your website to confirm that the page has been created successfully.

General #

The General tab lets you connect eLocate to Google Maps by adding your Google Maps API key. This allows your store locator to display maps and provide accurate location information for your customers. 

Google Maps API Key #

Adding a Google Maps API key enables the map and location features used throughout your store locator.

1. Sign in to your Google Cloud Console ↗.
2. Open the Google Maps API Key Guide↗, or click the Click Here link in eLocate.
3. Follow the guide to generate your Google Maps API key.
4. Copy your API key and paste it into the Google Maps API Key field in eLocate.
5. Click Save.