Set up the app

When you open the app, its home page shows a Setup guide. It takes you from your first store to your store locator page, in four steps. The guide shows which steps are done, and opens the next one.

Before you start

Your theme must be compatible with Online Store 2.0, which all recent themes are. To check, open a page in the theme editor: if you can click Add section and create a template, it is.

1. Add your stores

Add your stores one by one with Add store, or all at once:

• Import a file: a CSV or Excel file, checked row by row before anything changes. See Import a file.
• Import your Shopify locations: the locations you already have in Shopify. See Import your Shopify locations.

The step is done as soon as a store is active: an active store is published on your online store.

Try it with demo data

On a development store or a password-protected store, Load demo data adds 12 fictitious stores (Paris, London, New York, Tokyo…) with hours, types and services, so you can see the map and the pages right away. They are published on your online store: delete them from the stores list before you open your store to the public.

2. Add the store locator to a page

The map and the list of your stores show on a page of your online store.

1. In the theme editor, create a page template named “store-locator”. If your theme already has one, the editor adds a number (“store-locator-2”): note the exact name it gives.

2. On that template, click Add section, open the Apps tab, choose Store locator, then save.

   The Add the Store locator block button is a shortcut: the editor opens with the block already added, you only have to save.

   The block shows a title above the map (“Find a store”). If the template already shows the page’s title, remove one of the two: empty the block’s Title field, or remove the theme’s title.

3. In Online Store > Pages, create a page (for example “Our stores”). In Theme template, choose exactly the name of the template you created.

4. Open the page on your online store: your store locator is there, as your visitors see it. If it’s empty, check that your stores are active.

3. Choose which stores have an individual page

Each store can have its own page on your online store, with its photos, hours, description and directions. These pages help search engines show your stores, and make each store’s address easy to share.

By default, every store has a page: keep it for your own shops. For resellers, you can remove it. In the Settings, each store type has its default channels, and each store has its own, on its page.

Choose Open publication to set it up, or Keep the default setup.

Caution

A page is public and indexed by search engines. Removing it makes its address unreachable.

4. Create the template for the individual pages

All the store pages share one template in your theme: you create it once, and every store that has a page uses it.

1. In the theme editor, open the page list at the top of the screen, choose Store page, then Create template.

2. On the Store page template, click Add section, open the Apps tab, choose Store page, then save.

   The Add the Store page block button is a shortcut, as in step 2.

Two options in this step:

• The address of your pages. Each page has an address like your-store.com/pages/stores/paris-le-marais. You can change the middle word (“stores”) in Middle word of the address, now or later in the Settings: the old addresses redirect to the new ones.
• The title in your theme’s style. To give the store’s name the look of your other page titles, add your theme’s heading block above the Store page block, connect its text to the Name field, then empty the Title field of the Store page block.

If none of your stores has a page, this step shows Not needed.

Good to know

• The guide’s links open the theme editor, but they can’t create the templates for you: you create them there.
• Steps 2 and 4 tick themselves when the block is saved in your published theme. The guide only looks at the published theme.
• The guide can’t see which page uses your store locator template: check the page yourself, in step 2.