Settings

SpiceGems Store Locator provides a variety of customizable settings to help you tailor the store locator to your business needs. This guide will walk you through configuring each section of the app’s settings.

1. General Settings

Configure the basic behavior of the map and store locator.

• Starting Map Position: Choose whether the map starts by fitting all locations or focusing on a specific area.

• Geolocation Options: Enable browser-based or IP-based geolocation to show nearby stores automatically.

• Max Locations: Set the maximum number of store locations to display.

• Gesture Handling: Configure map zoom behavior (e.g., scroll or Ctrl+Scroll).

• Distance Units: Choose kilometers or miles for distance-related settings.

• Zoom Levels: Adjust map zoom levels for starting position and when clicking a location.

2. Map Provider

Select and configure your preferred map provider.

• Providers:

  • OpenStreetMap: Free and easy to set up.

  • Mapbox: Customizable styles with generous free usage limits.

  • Google Maps: Advanced features like real-time traffic data and multiple map styles.

• Map Styles: Choose from available styles (e.g., Standard, Cold) to match your branding.

• API Keys: Add your API key for Mapbox or Google Maps to enable the integration.

3. Search Settings

Enhance the search functionality for your customers.

• Search Results Behavior:

  • Show results within the bounds of a found address.

  • Show results within a specified radius.

• Search Bar:

  • Enable or disable the search bar.

  • Add autocomplete suggestions for faster searches.

  • Restrict searches to specific countries.

• Search Button & Find Me Button:

  • Customize the icon, color, and background of the search and location detection buttons.

4. Appearance

Customize the visual design of the store locator widget.

• Layouts:

  • Configure desktop and mobile layouts (e.g., position of the search bar and location list).

  • Adjust list height and width.

• Colors: Update the widget’s accent color to match your store branding.

• Custom CSS: Add custom styles to further tailor the widget’s appearance.

5. Marker Settings

Define how locations appear on the map.

• Cluster Markers:

  • Enable marker clustering to group nearby locations for a cleaner map.

  • Customize the cluster's text and background colors.

  • Set the zoom level at which clusters deactivate.

• Custom Marker Styles:

  • Create and assign unique marker styles for different location types.

• Marker Popups:

  • Add, remove, or reorder elements (e.g., name, address, phone number) displayed in the popup when a marker is clicked.

6. Location List

Manage and customize how store locations are displayed.

• Visibility: Enable or disable the location list.

• Sorting Options: Arrange locations by name, creation date, or custom order.

• List Elements:

  • Customize the details shown in the list, such as images, phone numbers, and email addresses.

  • Adjust display options for desktop and mobile views.

7. Floating Widget

Add a floating widget to improve accessibility for your store locator.

• Visibility: Enable or disable the floating widget.

• Widget Icon: Select an icon (e.g., GPS, Pin) for the widget.

• Customization:

  • Adjust the icon’s size, color, and background.

  • Set the widget’s position (e.g., bottom-right, bottom-left).

  • Choose a shape (e.g., circular, semi-circular).

8. Installation

Add the store locator to your Shopify store.

• Using Theme Editor (App Block):

  1. Open your Shopify Theme Editor.

  2. Add the Easy Store Locator app block to your desired page.

  3. Adjust its position (e.g., top or bottom of the page).

  4. Save your changes.

• Using Embed Code:

  1. Copy the embed code provided in the app.

  2. Paste it into your theme’s code where you want the locator to appear.

If you need any assistance regarding the above configurations, please drop an email at [e-mail]