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:
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— links colour variants that are separate productscustom.colorway_name— names the colour under the product titlecustom.badge— 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.
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
Last updated