Make the storefront yours

Part of step 6 of the launch path, Design your storefront. Work the theme before the pages. Colour and type re-render every page, so a home page composed first is a home page composed twice. Take one pass, not a redesign. Nothing on this page holds a launch date.

​

The order to work in

Open Online Store → Themes and choose Edit on the storefront card. The editor opens with four modes in the left rail: Settings, Content, Theme and Translations. Leave the remaining Theme panels until after go-live. Calendar, Availability indicator and the card panels are worth a pass once real orders are coming through, and they change nothing about whether an order can be placed. Two modes are not part of this job. Translations holds the storefront’s wording per language, which is the separate task under Translations. Settings mode carries no storefront settings yet, so domains, payment methods and sales channels stay under the main Settings navigation.

​

Set the logo outside the editor, the favicon inside it

Set the logo file under Settings → General, in the Logo card, choosing an image from the File Manager. The editor’s Logo panel sets Logo width and the favicon, and nothing else. Expect two different directions to the same place: the Theme Logo panel reads To edit logo go to Settings > General, and the Header block reads Settings > Brand. Both mean the one logo file, under Settings → General. Set the favicon in the Theme Logo panel, also from the File Manager. It renders at 32 by 32 pixels, so pick a mark rather than a wordmark.

​

Compose the home page from five blocks

Every block on the home page carries Hide and Show in its panel header, so an unwanted block is switched off rather than deleted. A hidden block keeps its settings for later. Decide what the first screen has to do before you drag anything in. For most merchants it says what you sell and sends the customer into a collection. Both of those need collections to exist, so build them first: see Build a collection. Note what hiding the home page does, because the editor says it rather than warning you: customers then start at the collection page. That is a reasonable launch choice for a small catalog, and a deliberate one.

​

Wire the header and footer once

The header, the footer and the announcement bar are storewide. Edit them from any page and they change on every page. Add menu entries under Header → Navigation items. Add page link points at Home, Shop, About or Stores, or at a single collection or All collections. Add external link takes any URL, which is how a marketing site or a help centre gets into the menu. Keep the menu short. The search bar covers what a menu cannot, and a storefront menu is not a sitemap. Turn on Show policy links in the footer and choose which documents appear under Policies to show. Write the documents themselves under Terms & policies first, because the footer only lists what exists.

​

Set visibility and SEO per page

Each page carries a Page settings block. Read it as two decisions: Write the meta title and description for the home page and the collection page at least. Those are the two that get found.

​

Check the real storefront, not the preview

Preview at all three widths in the editor: desktop at 1280, tablet at 768, and mobile at 375 pixels. Mobile is where storefront layouts break and where most customers are, so check the header, the listing grid and the calendar there specifically. Then open View your store from the Online Store page and walk the path a customer walks. The preview renders your configuration; the storefront renders your catalog, and only the second one proves a customer can order something.

​

Done when

• Your logo shows in the header on the live storefront, and your favicon shows in the browser tab.
• The colours and type on every page come from the theme, not from the default palette.
• The home page opens on blocks you chose, each pointing at a collection or listing that exists.
• A customer gets from the front page to a listing they can order in a couple of clicks.
• Every header menu entry resolves, and the footer’s policy links open the documents you wrote.
• The pages you meant to publish read Show page on, and the ones you did not are off.
• The home page and the collection page each carry a meta title and description you wrote.
• The storefront holds up at mobile width on the real site, not only in the preview.

​

Related articles