You do not have to choose one forever, and you can run more than one at a time. The app block is the one to reach for first: it needs no code and it sits wherever you drop it in the theme editor.
Method 1: The app block
- In your Shopify admin, go to Online Store → Themes and click Customize.
- At the top of the editor, pick the page the locator should appear on.
- Click Add section, open the Apps tab and choose Progus Store Locator.
- Drag the block to where you want it on the page, then click Save. It shows on your storefront a few seconds later.
Method 2: The embed code
Open Settings → Installation and copy the embed code. Before you copy it, you can narrow what that particular map shows: by tags, by city, or by group, and you can decide how the tag filter bar behaves next to it, from hiding it entirely to showing only the tags that already limit the map. Each combination produces its own code, which is how you end up with several different maps on one site.
Then paste it into your store, either way round:
As a page: Online Store → Pages → Add page, switch to the HTML editor, paste, save and publish.
As a section: Online Store → Themes → Customize → Add section → Custom Liquid, paste into the HTML editor, save.
Method 3: The floating button
This one puts a button on every page of your store, which opens the locator in an overlay. It is a theme app embed, so it is switched on in the theme editor rather than in our app.
- In your Shopify admin, go to Online Store → Themes and click Customize, then click the app embeds icon (the eye) in the left sidebar of the theme editor.
- Find Progus Store Locator in the list, switch it on, and configure it there.
- Click Save in the theme editor. Nothing happens until you do.
What to do next
The dashboard has a Generate page button that creates a store locator page for you. "Adding a store locator page to your shopify menu" links it from your navigation.
Want a different map per region or brand? "How to Display Multiple Maps with Different Locations" uses groups and one embed code each.
Stuck on any of this? Open the chat in the bottom right corner of the app and we will help you set it up.