The storefront locator
Adding the block
Putting a locator on a page, and pointing it at a profile.
The locator on your storefront is a theme app block called Store Locator. It renders in your theme, in your theme's colors if you want, with no iframe and nothing hosted anywhere else.
There is a second block, Product finder, for product pages — the same locator with the product being viewed already applied as a filter. See Product finder.
Adding it
The quickest route is Add to your theme on the app's dashboard, which opens the theme editor with the block ready to place.
By hand:
- Online Store → Themes → Customize.
- Navigate to the page you want the locator on.
- Add section → Apps → Store Locator.
It appears with your locations already on it. If the list is empty, the block says so rather than showing an empty map.
Where it can go
Anywhere your theme accepts app blocks — which in an Online Store 2.0 theme means most sections, and always a page's own content area. A locator wants room, so a full-width page section is the usual home. Beside a product or in a narrow column it still works: the search, map and list stack on narrow widths.
Give it a page of its own
Create a page in Online Store → Pages (call it Store locator, Find a stockist, whatever your shoppers would look for), then add the block to that page's template in the theme editor and link it from your navigation.
Choosing a profile
The block has one setting: Locator profile. It lists the profiles you have built under Customize, and names which one this block renders.
Leave it empty and the block uses your default profile, which is why a locator works the moment it is added, with nothing to choose.
Running more than one
Because a block only points at a profile, a shop can run as many locators as it has uses for:
- A full store finder on its own page, with search, filters and the details panel.
- A compact where to buy on a product page, with search off and the product filled in automatically, so it shows only the stores stocking that product.
- A regional locator that offers one filter category and a short radius list.
They all read the same list of locations. Nothing is duplicated, and a location you add appears in all of them.
Add a profile in the app, then point a second block at it.
What is set where
| Set in the app | Set on the block | |
|---|---|---|
| Locations, hours, photos, products | ✓ | |
| Filters and their categories | ✓ | |
| Custom fields and their values | ✓ | |
| Color schemes, and the wording | ✓ | |
| Map provider key | ✓ | |
| Which filter categories and custom fields show | ✓ | |
| Layout, map style, search, radiuses | ✓ | |
| What appears when a location is selected | ✓ | |
| Which color scheme, borders, radius, text size | ✓ | |
| Which profile this locator renders | ✓ |
The rule of thumb: the app holds what a locator is, and the block says which locator goes here.
On a product page
Use the Product finder block, which is built for it: the product comes from the page and the filters panel is gone, because the product is the filter.
The store locator block has two product settings of its own, for the cases where you want the full locator on a product page instead:
- On a product page, show only stores stocking it narrows it to the product being viewed, wherever that profile is used on a product page.
- Let shoppers filter by product offers a menu of every product assigned to your locations, which suits a locator that is not on a product page.
Next
Customize walks through every setting.