> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/getting-started/first-time-setup.md).

# First-Time Setup

The settings and Shopify data SUPRA needs before it looks like the demo.

Work through these in order. The last three are the ones people miss — they're features that stay invisible until the Shopify data behind them exists.

## 1. Branding

**Theme settings → Branding**

* **Logo image** — your mark. Also used as the favicon if you don't set one.
* **Favicon** — a square **PNG**. SVG is sharper but Safari only started showing SVG favicons at version 26, so older Macs and iPhones see nothing at all.
* **Social sharing image** — a **PNG or JPG at 1200 × 630**, shown when someone shares a link to your shop. No social network or messaging app will draw an SVG, so if you leave this empty and your logo is an SVG, shared links get the small card with no picture.

## 2. Colours

**Theme settings → Colors**

Four values: background, text, accent, border. The accent is the red in the demo — it drives the boxed wordmark, the checkout button, sale prices and hover fills. Changing it changes all of them at once.

## 3. The clock

**Theme settings → Clock**

SUPRA shows a live store-local clock under the logo. Set the **time zone** (defaults to your store's) and the **location label** — a city or airport code reads best. `NYC`, `HTX`, `LDN`.

## 4. Menus

**Content → Menus** in your Shopify admin, then point the theme at them.

SUPRA uses more menus than most themes. Create these before you start customizing:

| Menu                     | Used by                                 |
| ------------------------ | --------------------------------------- |
| Main menu                | Header navigation, Enter Page           |
| A category menu          | Collection sidebar, filmstrip on phones |
| Footer columns (up to 3) | Footer                                  |
| Policy menu              | Footer bottom row                       |

The **category menu** matters most — it's the left-hand list on collection pages and the dropdown on phones. If you don't pick one, SUPRA falls back to a menu handled `sidebar-menu`, and failing that lists your collections alphabetically, which is rarely the order you want.

## 5. Metafields — do this before you expect colourways to appear

SUPRA reads three product metafields. None of them exists until you create it.

* [`custom.colorways`](/supra-shopify-theme/supra/metafields/colorways.md) — links colour variants that are separate products
* [`custom.colorway_name`](/supra-shopify-theme/supra/metafields/colorway-name.md) — names the colour under the product title
* [`custom.badge`](/supra-shopify-theme/supra/metafields/badge.md) — the small corner note on collection tiles

Full walkthroughs on those pages.

## 6. Product tags for the filmstrip

The filmstrip can mark slivers **new**. It reads the product tag `new` — add it under **Products → Tags** in your admin. Products without it are left unmarked. This is a tag, not the badge metafield above; they're separate.

## 7. Pages that need a template assigned

SUPRA ships templates that do nothing until a page uses them. Create the page in **Online Store → Pages**, then pick the template under **Theme template** on the right.

| Create a page           | Assign the template |
| ----------------------- | ------------------- |
| FAQ                     | `faq`               |
| Lookbook                | `lookbook`          |
| Contact                 | `contact`           |
| Preview (a mosaic grid) | `preview`           |
| Random                  | `random`            |

Until a page uses one, the theme editor previews that template against some other page — usually an auto-generated one like "Your Privacy Choices". That's Shopify behaviour, not a fault in the theme, and buyers never see it.

## What's next

[Going Live](/supra-shopify-theme/supra/getting-started/going-live.md).