# Store Locator Page

[https://beautica-light.mybigcommerce.com/find-a-store/](https://beautica-light.mybigcommerce.com/find-a-store/)

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2Fd7jJagZFLOfP33ckdkAa%2Fimage.png?alt=media&#x26;token=e9509b3b-a209-474a-b79e-c79a4d033bbc" alt=""><figcaption></figcaption></figure>

**1. How to Create Find A Store Page?**

Go to **Storefront** -> **Web pages**.

In the **Create a Web Page** -> Enter name: **Store Locator**

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FSaYA8g0Sr8Tl8D2HQSk4%2Fimage.png?alt=media&#x26;token=52c933f4-b211-45e8-a85a-f4c51e0bf207" alt=""><figcaption></figcaption></figure>

In **Advanced Options**, choose **Template Layout File** is "find-a-store".

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FalZNeAvlKGsBnVvsBPBF%2Fimage.png?alt=media&#x26;token=1a5923d2-5670-408e-b54b-73c03ff0e8c7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When you are happy with your changes, don't forget click **Save**.
{% endhint %}

**2. How to Change Content of Find A Store Page?**

Go to **Storefront** -> **Web pages** -> **Find A Store** page.

In field **Page Content**, click button HTML to open **HTML Source Editor**.

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FvfeotWhQkZBjauBDD3Y3%2Fimage.png?alt=media&#x26;token=3185b2df-541e-4037-a07d-45aa5a7c4a36" alt=""><figcaption></figcaption></figure>

After that, input content below:

```html
<div class="halo-location-top page-location-nav">
    <div class="halo-location-topLeft">
        <h3 class="halo-location-title">Find Store Location Near You</h3>
        <p class="halo-location-text">We have 05 stores throughout &ldquo;Country&rdquo; and more in works.</p>
        <p class="halo-location-text">Complete the search details below to find a Beautica store near you.</p>
    </div>
    <div class="halo-location-topRight">
        <div class="halo-location-seach search_map">&nbsp;</div>
    </div>
</div>
<div class="halo-location-bottom page-location-map">
    <div class="HL-ColLeft halo-location-bottomLeft">
        <div class="InfoFind haloCustomScrollbar">
            <div class="InfoFindInner ENV_maps_list halo-location-list">&nbsp;</div>
        </div>
    </div>
    <div class="HL-ColRight halo-location-bottomRight">
        <div class="mapContact ENV_maps__div halo-location-map" style="position: relative; overflow: hidden;">&nbsp;</div>
    </div>
</div>
```

Or use button below to generate the code with your own banners. Please click the **Copy code** on the popup after you changed all the blocks.

{% embed url="https://codepen.io/HaloThemes/pen/BaGjWzp" %}

{% hint style="info" %}
Please click the "Run Pen" button to be used
{% endhint %}

**3. How to Setup Location of Find A Store Page?**

In the **Stencil File Editor** -> go to templates/components/halothemes/map/**halo-multi-map.html** file.

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FKOnTSGgdJtWIgkWDW4v8%2Fimage.png?alt=media&#x26;token=79869860-af8d-4279-9d6d-b5b3782d5db0" alt=""><figcaption></figcaption></figure>

**\* Find or enter latitude & longitude**

Here is an article of Google for your reference: [https://support.google.com/maps/answer/18539?co=GENIE.Platform%3DDesktop\&hl=en](https://support.google.com/maps/answer/18539?co=GENIE.Platform%3DDesktop\&hl=en)

{% hint style="info" %}
In case you cannot make change, our support team is available to support you, email us at: [support@halothemes.com.](mailto:support@halothemes.com)
{% endhint %}

