Quick start

This is the shortest honest path from “theme uploaded” to “ready to publish”. Five steps: brand, homepage, product page, the pages around the catalog, and pre-launch testing.

Allow an afternoon for the first pass. Most of that is content — copy and photography — not settings.

Step 1 — brand basics

Open the theme editor at Online Store → Themes → Customize, then open the gear icon for Theme settings.
Brand. Upload your logo and favicon, and set brand_name. The brand name is used by the header and footer wordmarks and defaults to your shop name, so you only need it if you want something different from your Shopify store name. The logo is optional — the header falls back to the wordmark as type, which is how the demo is set up.
Colors. Set color_accent first; it drives buttons, labels, hairlines and the ticker, and it’s the single setting that most changes the store’s character. Then adjust color_coal (the page ground), color_coal_deep (drop banner, mega panel, sticky bar), color_white (the inverted planes) and color_tile (the grey behind product images).
Typography. heading_font defaults to Anton and body_font to Inter. If you swap the heading face, use heading_tracking to tighten or open the letter spacing — condensed faces usually want a negative value, wider ones a positive one.
Layout. page_margin (how far content sits from the screen edge), gutter (the gap between plates), section_gap (the baseline rhythm every section starts from) and max_page_width (Narrow, Wide or Full bleed). The demo runs almost edge to edge at full bleed; narrowing it makes the theme feel considerably more conventional.
Motion. enable_motion controls reveals, the ticker and hover transitions; reveal_strength sets how far elements travel and how much they stagger (Subtle, Standard, Bold). Visitors who ask their operating system for reduced motion always get none of it, regardless of this setting.

Step 2 — the homepage

The shipped homepage is a complete drop-brand narrative. Tour it before you touch it, then replace content section by section.

Default homepage order

Section	What it’s for
Hero	Full-height image with the headline on a white type panel. Heading, subheading, optional button, height and image focal point
Ticker	Scrolling accent strip for drop dates, shipping terms or stock news
Slideshow	Multi-slide image stage with per-slide copy and text position
Product mosaic	Asymmetric grid of hero pieces, drawn from a collection and optionally overridden plate by plate
Promise bar	Short, repeated promises — shipping, returns, run size
Collection plates	Shop-by-drop grid with collection images and product counts
Drop banner	A thin countdown strip (the Drop countdown section in its banner layout)
Drop countdown	The full countdown panel: date, copy, live clock, and a message for after it ends
Editorial plate	Wide image with a block of narrative copy
Statement	Large type-only statement with a supporting paragraph
Product rail	Horizontally scrolling row of products from a collection
Split feature	Image and copy side by side, flippable
Numbers	Figures that quantify the brand — run size, drops a year, lead time
Reviews	Curated customer quotes
Spec table	Two-column table of material and construction facts
Dispatch	Latest posts from a blog
Image strip	Wide row of lifestyle or customer photography
FAQ	Accordion of questions
Stockists	City list with addresses, plus an optional map embed
Newsletter	Email capture on a white plane

Working through it

Click a section in the editor preview or in the left-hand section list.
Replace the copy. Most sections use an eyebrow (kicker), a heading, body copy and an optional button. Headings accept <strong> or <b> around a phrase to put it in the accent color — that’s how the demo gets its two-tone headlines.
Point content sections at real content. Product mosaic and Product rail need a collection; Dispatch needs a blog; Collection plates needs one plate block per collection.
Upload your own images for the hero, slideshow, editorial plate, split feature and image strip. See Demo content for the sizes that work.
Set the countdown. Open Drop countdown, set its date and time, and write the message shown once it passes. Remove or hide it between drops rather than leaving a finished countdown up.
Tune the rhythm. Every section has its own Top spacing and Bottom spacing, measured against the global section_gap. Alternate the plane setting (default / white / deep) on the sections that offer it so the page breathes.
Reorder, hide or remove sections from the left-hand list. Hiding is better than deleting while you’re still deciding — you keep the content.

Step 3 — the product page

The product page is assembled from theme blocks in the information column. The shipped order is:

Product meta — type, vendor and SKU (vendor off by default)
Product title
Price
Rating — reads review metafields
Product description — a short lede, trimmed to a word count
Variant picker — with a size-guide link that opens your measurements
Buy buttons — add to bag, quantity, and dynamic checkout buttons
Back in stock — a notify form, shown only when the variant is unavailable
Inventory — the run counter (“57 left in this run”)
Pickup availability
Perks ×3 — icon-and-text lines: shipping, returns, no restock
Trust badges
Share
Details ×2 — accordions, one pulling the full description, one with custom content
Spec list — a label-and-value table

Drag any of them into a different order, delete the ones you don’t need, and add more. Nested blocks reach the product through closest.product, so a block inside a group still knows which product it’s on.

The section itself adds three settings worth knowing: Sticky add to bag (a bar that follows the shopper down the page, on by default), Enable image zoom, and an Add to bag label you can override per store.

What the product page needs from your catalog

Media. Product images, and video or 3D models if you have them — the gallery iterates product.media.
A compare-at price above the regular price, if you want a sale treatment.
Inventory tracking enabled, for the run counter to show numbers. Set the run size on the Inventory block (stock_run, default 400) so the bar is scaled to how many you actually made.
An option named Color (or colour, shade, tint) for swatches to render. The names are configurable via swatch_options.

Below the main section the template also ships Recommendations twice — once with intent complementary (“Complete the look”, with a bundle add button) and once related (“You may also like”) — plus Recently viewed and an FAQ.

Step 4 — the pages around the catalog

This is the step that gets skipped. Signal ships nine configured page templates — about, lookbook, size guide, stockists, shipping and returns, FAQ, contact and wishlist — and each one does nothing until you create a page and assign the template to it.

Full instructions, including which handle each page needs, are in Pages and templates. Do that before you spend time on the homepage copy: several homepage and product settings link to those pages by default.

Then wire your menus up — see Navigation and menus — including the mega menu panel and its featured-product promo.

Step 5 — pre-launch testing

Mobile, on a real device

The header collapses to a burger, the mega panels become a drawer with expandable rows, and the cart becomes a full-height drawer. Simulators miss sticky-header and scroll-lock problems.

Checkout

Run a full test order with Shopify Payments test mode or Bogus Gateway. Check the dynamic checkout buttons appear under add to bag.

Open the header search and type. Products, collections, pages and articles should appear as you type. Before you type, you should see popular searches — set popular_searches in theme settings.

Cart and gift wrap

Add, change quantity and remove. Check the free-shipping progress if you’ve set free_shipping_threshold, and the gift wrap tick-box if you’ve set a gift_wrap_product.

Wishlist and compare

Heart a few products, open the wishlist drawer and the wishlist page. Add up to four products to the compare tray and open it.

Promo popup and age gate

The shipped setup has the promo popup on and the age verification gate off. Both are site-wide. Test in a fresh private window — each remembers a dismissal, so you only see it once.

Going live

Preview the whole storefront from the theme library (Actions → Preview), not just the homepage.
Click every navigation link, including the footer policy menu and the mega panel promos.
Check for leftover demo copy — search the editor for “Outfit Lab”, “deadstock”, “four hundred units” and “Drop 04”.
Confirm shipping, taxes and payments under Settings in Shopify admin.
Publish — Actions → Publish.