# Store locator 🔥

<figure><img src="/files/ZET0O2HYQ7tpha3IwOie" alt=""><figcaption></figcaption></figure>

The **Store locator** section lets you easily display store locations with their exact addresses to make the shopping experience easier and more seamless for customers.

You can showcase:

* Store addresses
* Opening hours
* Contact information
* Social media links
* Store images
* Additional store details

Whether you are opening new branches, relocating stores, or updating business hours, simply edit the Store locator section to keep customers informed.

{% hint style="info" %}
The **Store locator** section is only available in Minimog **version 6.0.0 and above**. ✨

See [Changelog](/minimog-theme/changelog.md).
{% endhint %}

## How to add a Store locator section to your Shopify store

{% hint style="info" %}
**Steps:**

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Store locator.**
3. Make necessary changes.
4. **Save** the settings.
   {% endhint %}

## How to edit a Store locator section

### Section settings

#### General

You can choose your **Container type** for the collection list as:

* Default
* Full width
* Use container box

Select the **Color scheme** for the section.&#x20;

{% hint style="info" %}
Set up your Color schemes anytime in the Theme settings > [Colors](/minimog-theme/theme-settings/colors-and-color-schemes.md).
{% endhint %}

Select the **Container color scheme** for the content area inside the section.

This allows you to create contrast between:

* The section background
* The store information container

<figure><img src="/files/BpBNJzdjMhV28L7lJb2B" alt=""><figcaption></figcaption></figure>

#### Section header

Enter the **Heading** for the Store locator section.

Choose the **Heading size** as:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl

Add an optional **Description** using the rich text editor.

<figure><img src="/files/DpVzUQFZo2wfuRy5bsXE" alt=""><figcaption></figcaption></figure>

#### Image

Upload an **Image** for the store location.

Choose the **Image width** as:

* Small
* Medium
* Large

<figure><img src="/files/WYYcdRoymxnY02xBVfxy" alt=""><figcaption></figcaption></figure>

Choose the **Image position desktop** as:

* Left
* Right

<figure><img src="/files/IGuAQgbm3hhsyafFBrLp" alt=""><figcaption></figcaption></figure>

This setting controls whether the image appears before or after the store information on desktop devices.

{% tabs %}
{% tab title="Left" %}

<figure><img src="/files/A5LXFNtNArbi5NEgkdYb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="/files/J0s20BxnXQRk7hGql1M4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Content

Choose the number of **Columns** for the store information layout:

* 1 column
* 2 columns
* 3 columns

Adjust the **Item column gap** to control the horizontal spacing between content blocks (0-100px).

Adjust the **Item row gap** to control the vertical spacing between content blocks (0-100px).

<figure><img src="/files/pF1w9ujc5iXwWiX78tGV" alt=""><figcaption></figcaption></figure>

These settings help create a cleaner and more organized store information layout.

#### Mobile settings

Choose the number of **Item columns** displayed on mobile devices:

* 1 column
* 2 columns

Adjust the **Item column gap** for mobile spacing (0-50px).

Adjust the **Item row gap** for mobile spacing (0-50px).

<figure><img src="/files/UpVSY3TgeMgfMMiTeo1T" alt=""><figcaption></figcaption></figure>

Use smaller gaps for compact layouts or larger gaps for improved readability.

### Block settings

The Store locator section supports the following blocks:

* [Text](#text)
* [Icon box](#icon-box)
* [Social media](#social-media)

You can combine multiple blocks to build a flexible store information layout.

<figure><img src="/files/9mXvllT0jo6EO4qhNAGF" alt=""><figcaption></figcaption></figure>

#### Text

The **Text** block is commonly used for:

* Store address
* Opening hours
* Phone numbers
* Email information
* Direction links
* Store notices

<figure><img src="/files/8XLKMVfV9hSDkt8ezPrf" alt=""><figcaption></figcaption></figure>

**Content settings**

Enter the **Heading** for the text block.

Choose the **Heading size** as:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl

<figure><img src="/files/oZNy4EY91X1KToi9KKb1" alt=""><figcaption></figcaption></figure>

Add the **Text** content using the rich text editor.

Select the **Text size** as:

* Small
* Base size
* Large

<figure><img src="/files/1ODVeyrsSzoe5BKTPK09" alt=""><figcaption></figcaption></figure>

**Button settings**

Display a call-to-action button to redirect customers to your desired pages.&#x20;

Add a **Label** and **Link** for one or both, then choose a **Button style:**&#x20;

* Primary button
* Secondary button
* Underline button/White button&#x20;

{% hint style="info" %}
Leave the **Button label** field blank to hide the button.
{% endhint %}

and adjust the **Button size:**

* Button small
* Button medium
* Button large

<figure><img src="/files/uj6rck33TSBal4gB6LS4" alt=""><figcaption></figcaption></figure>

#### Icon box

The **Icon box** block is commonly used for store services, feature highlights, brand values, promotional content, and support information.

Choose the **Layout** for the Icon box:

* Vertical
* Horizontal

{% tabs %}
{% tab title="Vertical" %}

<figure><img src="/files/insK2Y20yeODad7s8XcZ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Horizontal" %}

<figure><img src="/files/TNKJD6PnXWxujKcoFPhG" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Image settings**

Upload an **Image** for the Icon box block.

<figure><img src="/files/n5PdRSarjZoWwUxxsAXZ" alt=""><figcaption></figcaption></figure>

You can also use **Image from URL** to display an external image.

<figure><img src="/files/cvjDpANoIBXatjzuwqaB" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Supported image formats: .svg, .png or .jpg

*Example: <https://example.com/icon.svg>*
{% endhint %}

Adjust the **Image width** in pixels. Leave the field blank to use the original image width.

<figure><img src="/files/HXFuoxRwhT3pscPFryI4" alt=""><figcaption></figcaption></figure>

Add an **Image link** to make the image clickable.

<figure><img src="/files/MzQS9DvqPmABgmP4XoAs" alt=""><figcaption></figcaption></figure>

Choose the **Hover effect** for the image:

* None
* Zoom in
* Scaling up
* Scaling down

<figure><img src="/files/tTnBKAZ4UVuig8RXY8UQ" alt=""><figcaption></figcaption></figure>

**Content settings**

Enter the **Heading** text for the Icon box.

Choose the **Heading size** as:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl

<figure><img src="/files/w5O3mibihpbM81rTsMqC" alt=""><figcaption></figcaption></figure>

Add a **Description** using the rich text editor.

Select the **Text size** for the description:

* Small
* Base size
* Large

<figure><img src="/files/wUkNJq5eOz0lOekkiIzV" alt=""><figcaption></figcaption></figure>

**Button settings**

Display a call-to-action button to redirect customers to your desired pages.&#x20;

Add a **Label** and **Link** for one or both, then choose a **Button style:**&#x20;

* Primary button
* Secondary button
* Underline button
* White button&#x20;

{% hint style="info" %}
Leave the **Button label** field blank to hide the button.
{% endhint %}

and adjust the **Button size:**

* Button small
* Button medium
* Button large

<figure><img src="/files/5zrWU6uD2gXjwe2vTPDT" alt=""><figcaption></figcaption></figure>

#### Social media

The **Social media** block displays your store’s social media icons. This helps customers follow your brand, stay updated and connect through social platforms.

<figure><img src="/files/2RIpWeDoC3d1NrkkDJbA" alt=""><figcaption></figcaption></figure>

Enter the **Heading** for the social media block.

Choose the **Heading size** as:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl

<figure><img src="/files/DJqSIWmAgk5QBUeQBdtv" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Update your social media links anytime in **Theme settings >** [Store contact](/minimog-theme/theme-settings/store-contact.md).
{% 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://docs.foxecom.com/minimog-theme/theme-sections/store-locator.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.