> 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 🔥

A guide to customize a section that showcase your store locations

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F69ui3ad49Eufjwwapiro%2Fimage.png?alt=media&amp;token=7d0da45f-7547-4de2-826a-cf418d087a0f" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FZRowy5DbnDc676cmX3Pk%2Fimage.png?alt=media&amp;token=0e8063b8-ae5c-491b-93b8-461373ac0ae9" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FM3fRxrzCgOrYREqVX6qR%2Fimage.png?alt=media&amp;token=cacc8c1e-7cad-47ff-97bd-e0d6aa38d4c6" alt=""><figcaption></figcaption></figure>

#### Image

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

Choose the **Image width** as:

* Small
* Medium
* Large

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FWZLovPrGzCIv9dR6ptwi%2Fimage.png?alt=media&amp;token=8543250b-72c2-4ed0-b675-1f201a42d748" alt=""><figcaption></figcaption></figure>

Choose the **Image position desktop** as:

* Left
* Right

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F7SGzyNl8HnBO3cL43kjK%2Fimage.png?alt=media&amp;token=25f7bfa8-a7d8-40ec-8725-434ecb98ac97" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F6rOPscECjNZbdIqkrf7v%2Fimage.png?alt=media&amp;token=f26d17d5-f1a4-4aab-b46c-af5953fe9444" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FXL4UIKH2uJAE2cI1QW8D%2Fimage.png?alt=media&amp;token=653318e8-fe88-4d68-b632-d7f00e63c7dd" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FVO0JHfFvUI6n8LMGgjZH%2Fimage.png?alt=media&amp;token=4f7450fe-1543-45b0-8cd0-667aefb3b9f4" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FtfofSHo81hRk3D7Wjc8u%2Fimage.png?alt=media&amp;token=5b7f2a70-e17c-4cfd-b169-80aaa66f2cd0" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F8ghXgp48KASUsoEatDtC%2Fimage.png?alt=media&amp;token=bd9729f4-3b28-4fd8-a513-bff43d506f22" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FJzaWtUyEebMhKRjYuOvh%2Fimage.png?alt=media&amp;token=4f52c9d7-4d00-4bf9-ab59-e513a6c4081b" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FRrejIZyWoDPAvjWsAnUF%2Fimage.png?alt=media&amp;token=4176e4ff-acb8-4b0b-9f9d-dd705a4f9178" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FA2okBLdj7O0u1bVa0B9I%2Fimage.png?alt=media&amp;token=cb8bf16d-7b6c-4192-a945-2781ce3394d3" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FFRoNJbqnnZOReBzDSySE%2Fimage.png?alt=media&amp;token=da455ba4-3bc0-4e60-8b24-6ddcad6afc43" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FKudMY4J5aGa1Uu6blWSd%2Fimage.png?alt=media&amp;token=e24ca9e1-a559-4585-b61b-6200903788a8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Horizontal" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FRpZuXF1S0FGIFS5i4ihI%2Fimage.png?alt=media&amp;token=a48badc4-a9ad-4e1a-a80b-3121cf5c5f1d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Image settings**

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FT7d0pJsuuIQjXkFi5T07%2Fimage.png?alt=media&amp;token=c2748cb1-aa67-4408-99ea-93255f40ac6a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FAy2lbJUrsQ1rPoWc3c8k%2Fimage.png?alt=media&amp;token=202c3e94-e5ae-4d1b-81d0-03d8ce6409ae" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FO4UCSFmTBQXeBrWn40Ff%2Fimage.png?alt=media&amp;token=bdf6e011-dcc7-4d93-ba3c-0906be1a2a1c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FifUjttBAMPCVlcr9IXoH%2Fimage.png?alt=media&amp;token=b4f03662-577a-4e54-b8e0-76f379511ec8" alt=""><figcaption></figcaption></figure>

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

* None
* Zoom in
* Scaling up
* Scaling down

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F32lw8k2xjvzCyKB4Iqyl%2Fimage.png?alt=media&amp;token=4479b781-4e6b-4918-add1-5da3e05d5118" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FjEk8daTauURl917sfguM%2Fimage.png?alt=media&amp;token=9d5e525e-20e5-41e8-ba98-89a47a01172a" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FHznRyzKbhthi1fUGXjeS%2Fimage.png?alt=media&amp;token=1d8be267-5c25-4880-8736-3f5963e894d0" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FAUd8LVtYdiHrMY8ahc2k%2Fimage.png?alt=media&amp;token=a8441475-0114-4e0a-a083-b4765065d92f" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FwYcntzYEs5qn4LkN3oMk%2Fimage.png?alt=media&amp;token=38eceac0-ea0c-4bde-ae03-28a40713ea30" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F7VIfOtTYWQXTf27SFoKX%2Fimage.png?alt=media&amp;token=ee9794d3-0583-4e13-8c3c-3a16aab3d842" 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 %}