# 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 **SpiceGems 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.

{% hint style="info" %}
If you need any assistance regarding the above configurations, please drop an email at **<help@spicegems.com>**
{% endhint %}