# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.spicegems.com/esl-easy-store-locator/settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.