Stockists

A grid of bordered cards, each a city in the display face with an address underneath, optionally linking out — and under them an optional embedded map, desaturated to match the theme. It powers the stockists page template, and also sits near the bottom of the demo homepage.

For a brand that sells mostly online but is carried in a handful of shops, this is a trust section as much as a wayfinding one: being stocked somewhere real is evidence.

Section settings

Setting	Type	Default	What it does
Heading	Text	Stocked at	Section heading.
Side note	Text	All stockists	Side note on the right of the header row.
Side note link	URL	—	Makes the side note a link.
Colour scheme	Select — Default / Light / Deep	default	Which ground the section sits on.
Map embed URL	Text	—	The src from a map provider’s embed code. Leave it empty to hide the map entirely.
Map title	Text	Where to find us	Read out by screen readers in place of the map.
Top spacing	Range, 0–160 px	48	Top spacing.
Bottom spacing	Range, 0–160 px	48	Bottom spacing.

Stockist blocks

Up to eight blocks.

Setting	Type	Default	What it does
City	Text	Osaka	The city or shop name, in the display face at 22 px.
Address	Textarea	2-14-8 Minamihorie, Nishi-ku	The address. Line breaks are preserved.
Button link	URL	—	Makes the whole card a link — to the shop’s site, or to a map pin. Linked cards take an accent border and accent city name on hover.

The preset ships with four stockists.

Behaviour worth knowing

The column count follows your blocks, capped at four. Two columns below 860 px, one below 480 px.

The map is just an embed src. Paste the URL from inside the src="…" attribute of your map provider’s embed code — not the whole <iframe> tag, and not the ordinary share link. It is rendered in a lazily-loaded frame, so it costs nothing until a visitor scrolls to it.

The map is desaturated to greyscale so it sits inside the theme’s palette rather than dropping a block of Google’s colours into a coal page. It eases back towards colour on hover.

Cards fade up on scroll in sequence when the theme’s Motion setting is on.

Tip

Lead each card with the city, not the shop name — that is what the display face is sized for, and it is what a shopper is scanning for. Put the shop name on the first line of the address. Four cities on one row reads as a footprint; four shop names reads as a list of links.

Caution

Many map embeds set third-party cookies. If your store has a cookie banner or you sell into the EU, check that the embed is covered by your consent setup — or leave map_embed empty and let the addresses do the work.