Stockists

The Stockists section lists the stores where shoppers can find your products, each with its address, opening hours, phone, a link (for example to book a fitting) and a Get directions link to Google Maps. An optional in-store offer shows a discount code that copies with one tap.

Radian includes a stockists page template with the section, and the section can also go on the home page in a Compact layout: one featured store with a button that opens every store in a drawer.

How to set it up

Step 1: Create the Stockists page

1. In Shopify Admin, go to Online Store > Pages > Add page.
2. Enter a title such as Stockists and save.
3. In Theme template (on the right), choose stockists and save again.
4. Add the page to your menu in Content > Menus, for example in the footer.

Step 2: Add your stores

1. In the theme editor, open the page (page picker > Pages > stockists) and click Stockists.
2. Click Add block > Store for each store. Add an Image, the Store name, the Address (on separate lines), the Opening hours and the Phone.
3. Add a Link label and Link, for example Book a fitting and your booking page.
4. Drag the stores into order. The first one is the featured store in the Compact layout.

Step 3: Choose the layout

1. Under Layout, choose the Layout (1): Rows (each store beside its image), Grid (cards) or Compact.
2. Choose the Image ratio, and turn Show directions link on or off.
3. Write the Subheading and Heading.

Step 4: Add an in-store offer (optional)

1. Click Add block > In-store offer (one per section).
2. Write the heading and text, and enter the Discount code, for example STUDIO15. Add an image and pick its color scheme.
3. Create the code in Shopify Admin under Discounts if shoppers will also use it online; in store, staff can apply it at your point of sale.

Step 5: Feature a store on the home page

1. Open the home page in the theme editor and click Add section > Stockists.
2. Add the stores and choose the Compact layout. The first store shows with an All stores button that opens the full list in a drawer, with the offer at the top.

Settings reference

Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.

How it works

• Get directions opens Google Maps with the store's address, so it works on phones and computers without an API key.
• The phone number is a tap-to-call link on phones.
• Each store's alignment and spacing can be set per block for desktop and mobile.
• The drawer of the Compact layout opens and closes like the cart drawer, and closes on an outside click or Escape.

Related

• Press quotes
• Promo tiles
• Pages