How do I put the new look on my store?

The Publish tab of the new look: the app block, the floating map button, hiding the map, the code for any page with limits by country, city, group or tag, Google Tag Manager, and the switch back.

This article is about the new look. Everything that puts the map on your storefront lives in Settings → Publish. Your Store Locator page itself is on the Dashboard: View page, Edit url, Edit title and Add to menu.

Step 1: Add the map as an app block

Map on your store shows whether the block is Added to your theme, and to which templates. Pick where to add it (Home page, Pages, Product pages, Collection pages, Blog or Blog posts), click Open theme editor, place the block, and save in the theme editor. If the card says Theme not supported, your theme has no app blocks: use the code in step 4 instead.

Step 2: Turn on the floating map button

Floating map button is a round button in the page corner that opens your map on any page. The card says whether it is On or Off; Open theme editor turns it on and sets its colours and title. Its title is translated in your translation app, such as Translate & Adapt.

Step 3: Hide the map without removing it

Map visibility has one switch, Show the map on your storefront. Off keeps everything installed while customers cannot see the map.

Step 4: Add the map with code

Add the map with code gives you code to paste into any page. Use it when your theme does not support app blocks, or to show only some of your locations:

  1. Locations on this map: turn on Limit the locations on this map, then pick Countries, Cities, Groups or Tags. All means no limit.

  2. Tag filters on this map: with tags picked, choose which tag filters visitors see: none, all tags with your picks selected, all tags with none selected, only the tags you did not pick, or only the tags you picked.

  3. Code for your page: click Copy code. Paste it into a Custom Liquid block in the theme editor, or into a page's HTML (Online Store → Pages → Show HTML).

The code carries the map heights from Design → Height. How to Display Multiple Maps with Different Locations shows how to reuse this for several maps.

Step 5: Google Tag Manager

Google Tag Manager lets Google Analytics see what shoppers do on your map: searches, store picks, direction clicks and more. Click Show setup, copy the listener code into a Custom HTML tag that fires on all pages, and trigger your tags on event names starting with psl_. The card lists every event and its data.

After a switch

While old map code on your page or in your theme needs replacing, the top of Publish lists it with the steps per place, under the same title as the Dashboard banner. I switched to the new look. What do I need to change? explains it. At the bottom, Classic look offers the switch back for 30 days: How do I go back to the classic look?

What to do next

Adding the page to your menu: Adding a store locator page to your Shopify menu. Comparing the install methods: Integrating store locator in your Shopify store: 3 methods.

Stuck on any of this? Open the chat in the bottom right corner of the app and we will help you set it up.

Last verified on 2026-10-15 against progus-store-locator ed6c3877 (kb-ref: put-the-new-look-on-my-store).

Did this answer your question?
😞
😐
😁