> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-sections/store-locator.md).

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