Customize the Display Settings in Store Locator

 Caution

Making advanced styling changes within Store Locator requires knowledge of CSS. If you are not comfortable with completing this on your store, please contact our Merchant Success team.

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.

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.

    Shopify Admin

  2. Select Store Locator.

    Apps Section of the Shopify Admin

  3. Select Display Settings.

    Display Settings

  4. Change the language as you see fit.

    Change the Text

  5. Select Save.

    Save Your Progress

  1. From the Shopify Admin, select Apps.

    Shopify Admin

  2. Select Store Locator.

    Apps Section of the Shopify Admin

  3. Select Display Settings.

    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.

    Page Header HTML

  5. Select Save.

    Save Your Progress

  1. From the Shopify Admin, select Apps.

    Shopify Admin

  2. Select Store Locator.

    Apps Section of the Shopify Admin

  3. Select Display Settings.

    Display Settings

  4. Select Edit.

    Initial Map Positioning

  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.

    Initial Map Positioning 2

  7. Select Save.

    Save Your Progress

  1. From the Shopify Admin, select Apps.

    Shopify Admin

  2. Select Store Locator.

    Apps Section of the Shopify Admin

  3. Select Display Settings.

    Display Settings

  4. Adjust the setting as you see fit.

    Information Formatting

  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.

    Validate Your Changes Validation Error

  6. Select Preview. (optional)

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

    Preview 1 Preview 2

  7. Select Save.

    Save Your Progress

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

    Select About

  3. Under App proxy, select Customize URL.

    Select Customize URL

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

    Select Edit App Proxy URL

  5. Enter an ending for the URL.

    Enter an Ending for the URL

  6. Select Save.
Was this article helpful?
0 out of 0 found this helpful