Map setup

The Map section (sections/map.liquid) renders a single-location map image that you upload, an <address> card with your business details, and an opening-hours list — all from theme editor settings. It makes zero network requests: no map iframe, no tile server, no API keys, no JavaScript. Nothing external loads on your storefront, and nothing is added to your page-speed budget.

If you want a multi-location directory with per-location phone / map-link cards, use the existing Store locator section instead. Map is the simpler single-location primitive.

How it works

• Map image — you upload a static picture of your map (a screenshot or export from any map service). The theme renders it as a responsive, lazy-loaded image. Every fact the picture carries — the name, the street, the hours — also appears as real text in the address card beside it, so the image is treated as decorative and screen readers lose nothing by skipping it.
• Address card — your business name, address, and hours render server-side as text. The name and the address are marked up with Schema.org LocalBusiness and PostalAddress microdata; the hours are not (see Hours blocks).
• Get directions — a plain external link that takes the visitor out to the map service you choose (Google Maps, Apple Maps, OpenStreetMap — whatever you paste). They land in their own map app with a live, routable map. The link opens in a new tab, so nobody loses your page.

The map doesn't pan or zoom in place — that's what the directions link is for.

Quick start

1. In the theme editor, add the Map section to any page, or to a custom section group.
2. Upload a Map image — see Creating your map image below.
3. Fill in the address fields: Address line 1, City, Country.
4. Paste a share link for your listing into Directions link.
5. (Optional) Add up to 7 Opening hours blocks — one per weekday.
6. Save.

That's it — no API keys, no build step, no extra setup.

Creating your map image

Any map service works, because you're taking a picture — not embedding a live map.

1. Open your preferred map service (Google Maps, Apple Maps, https://www.openstreetmap.org, …) and search for your address.
2. Frame the view you want shoppers to see — close enough to recognise the street, wide enough to include a landmark or two.
3. Take a screenshot, or use the service's export / share-image option if it offers one.
4. Crop it and upload it to the Map image setting. Aim for roughly 1,600 px wide — the theme serves responsive sizes from 600 px up to 1,600 px.

While you're there, copy the share link for your listing and paste it into the Directions link setting — that's where the "Get directions" link sends visitors.

Leave the image empty and the section renders the address card on its own — no empty frame, no placeholder.

Section settings reference

Setting	Type	Notes
Color scheme	Color scheme	Applies your chosen scheme to the whole section.
Map image	Image	Your uploaded map picture. Rendered decorative (empty alt) because the address card carries the same facts as text.
Directions link	URL	Where "Get directions" sends visitors. Opens in a new tab. Leave empty and no link renders — never a dead link.
Business name	Text	Displayed above the address — typically your business name. Used as the Schema.org LocalBusiness name.
Address line 1	Text	Street number and street name.
Address line 2	Text	Suite, floor, unit, etc. Optional.
City	Text	—
Country	Text	Full country name (e.g. "Ireland", not "IE").

Hours blocks

Each Map section accepts up to 7 Opening hours blocks (one per weekday). Each block has:

• Day — free text (e.g. "Monday", "Lun.", "月曜日"). We do not force a day order — the order in which you drag the blocks in the theme editor is the order they render.
• Hours — free text (e.g. "09:00 – 17:00"). Leave empty to render the translated "Closed" key.

The resulting <dl> is readable text, and deliberately carries no Schema.org openingHours microdata. That property is a fixed machine grammar — Mo-Fr 09:00-17:30 — and Day/Hours here are free text in whatever language and format suits you, which cannot be turned into it. Publishing free text as machine hours produces an invalid value: a search engine reports it as an error and it can cost the page its rich result. Your business name and address are still marked up, and those are accurate.

Privacy and security

• Nothing loads externally — the section makes no network request of any kind. No map provider receives your visitors' IP addresses, no third-party cookies are set, and there is nothing here to add to a cookie-consent banner.
• No API keys — there is no map service integration to configure or pay for.
• The directions link is a plain link out — it only does anything when a visitor chooses to click it, and it opens in a new tab with rel="noopener noreferrer" so the destination page gets no handle on your storefront.
• No JavaScript in the section — zero added bytes to your critical-path JS budget.
• No Content-Security-Policy changes needed — with no iframe and no remote assets, restrictive CSP setups need no allowances for this section.

Troubleshooting

The whole section is missing. It has nothing to show yet. Until it has an address, opening hours, a map image or a directions link, the section is hidden on the storefront rather than printing an empty band; in the theme editor it stays visible with a one-line reminder.

No map is showing. No image is uploaded — the image frame renders nothing rather than an empty box, and the address card stands on its own. Upload a picture to the Map image setting.

The map image looks blurry. The uploaded picture is too small. Re-take the screenshot at a larger size — roughly 1,600 px wide is ideal — and upload again.

The map shows the wrong spot. The picture is whatever you uploaded — re-frame your screenshot on the map service and upload the corrected image.

"Get directions" doesn't appear. The Directions link setting is empty. Paste the share link from your listing on any map service; the link renders as soon as the setting has a value.

The hours list rendered in the wrong order. Drag the Opening hours blocks in the theme editor — the render order follows the block order, which you can change freely.

I see English "Closed" text instead of my language. The fallback uses the storefront's sections.map.closed translation key, which is provided in all 50 locales. If you see English on a non-English storefront, check that the locale is published and not overridden by a language you have disabled.