Overview

Store Locator can be customized to reflect the same branding and colour scheme as your store.

• Language - Change the Store Locator language to match the tone of your store.
• Styling - Customize the look and feel of your map with plain text, HTML, or custom CSS. With Custom CSS, you can change the font type, size, colour; add images; and change the whole tone of your Store Locator map page.
• Initial Map Positioning  - Set the initial position and zoom level that the map will start from for your customers. Simply click + drag it to where you want it!

• Information Formatting - Control what fields show in your address list, as well as the detailed view, for your stores. The Address section controls how the address will display on the left of the map, and the Detailed section will control how it displays in the popup on the map.

Change the Language

1. From the Shopify Admin, select Apps.
2. Select Store Locator.
3. Select Display Settings.

   

4. Change the language as you see fit.

   

5. Select Save.

Custom CSS Styling

1. From the Shopify Admin, select Apps.
2. Select Store Locator.
3. Select Display Settings.

   

4. Add your custom CSS code into the Page Header HTML field.

   Note: Adding plain text or HTML to the Page Header will display the content above your map; adding plain text or HTML to the Page Footer will display the content below your map.

   

5. Select Save.

Initial Map Positioning

Note: When there are 300 or more locations within Store Locator, the pins will not automatically appear on the map. Please visit Store Locator Troubleshooting FAQ for more info.

1. From the Shopify Admin, select Apps.
2. Select Store Locator.
3. Select Display Settings.

   

4. Select Edit.

   

5. Click and drag to move around.

   Note: The location and zoom level you choose here will display on your map's initial page load, to your customers.

6. Select Lock.

   

7. Select Save.

Information Formatting

1. From the Shopify Admin, select Apps.
2. Select Store Locator.
3. Select Display Settings.

   

4. Adjust the setting as you see fit.

   

5. Validate your changes.

   Note: This is to check if the fields you're using are inputted correctly. If the validation is successful, there are no issues with the adjustments you have made. If there are issues with the adjustments (like a spelling error), the pop-up will notify you. Example below.

   

6. Select Preview. (optional)

   Note: This shows you how the information will appear for your customers on the storefront.

   

7. Select Save.

Customizing the URL

1. From the Shopify Admin, select Apps.
2. Beside Store Locator, select About.

   

3. Under App proxy, select Customize URL.

   

4. Under Edit App Proxy URL, select the URL you want to be displayed.

   

5. Enter an ending for the URL.

   

6. Select Save.