> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Make the storefront yours
> Set the theme first, then the home page and navigation, so a customer reaches something they can order in a couple of clicks.
Part of step 6 of the [launch path](/docs/guides/launch/overview), [Design your storefront](/docs/guides/launch/shape-the-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.
**Saving publishes.** Your account has one storefront configuration and the editor edits it in place. There is no draft, no publish step and no version history, so every save is live for customers at once.
Work in sittings you can finish. **Discard** is the only undo, and it exists only until you save.
## 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.
| Pass | Where | What it settles |
| ---- | -------------------------------------------------------------------------- | -------------------------------------------------------- |
| 1 | **Settings → General**, outside the editor | The logo file |
| 2 | **Theme** mode, **Logo** | Logo width, and the favicon |
| 3 | **Theme** mode, **Theme style**, **Colors**, **Typography**, **Layout** | Everything storewide |
| 4 | **Theme** mode, **Buttons**, **Inputs**, **Listings card**, **Header bar** | The parts repeated on every page |
| 5 | **Content** mode, **Home page** | What the front page says and where it sends people |
| 6 | **Content** mode, **Header** and **Footer** | How a customer gets around, and where your policies show |
| 7 | **Content** mode, **Page settings** on each page | What is public, and what a search result shows |
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](/docs/settings/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.
| Block | What it puts on the page | Have ready |
| ----------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------ |
| **Image banner** | A full-width image with a title, description and button | One image, and a separate one for mobile if the desktop crop loses the subject |
| **Search bar** | The storefront search | Nothing |
| **Collection list** | Collections as columns, with a shop button | The collections you want browsed |
| **Featured collection** | One collection, with some of its listings on the front page | The collection you would lead with |
| **Listing list** | Listings you pick, in a row | Published listings |
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](/docs/guides/catalog/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](/docs/settings/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:
| Setting | What it does | Watch for |
| -------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Show page** | Publishes the page, or takes it out of the storefront | Checkout and the store selection sidebar read *This page can't be hidden* |
| **Meta title** | What a search result shows as its headline | 70 characters, counted for you |
| **Meta description** | The text under it | 160 characters, counted for you |
| **URL handle** | The page's path | Read-only. Change the domain instead, under [Set up the online store](/docs/guides/sales-channels/set-up-the-online-store) |
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
The launch step this guide belongs to.
The theme editor in full, panel by panel.
Every page template and every storewide block.
The reference for each mode and setting.
The collections your home page blocks point at.
Domains, and the settings the editor does not hold.