> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/getting-started/homepage.md). # Building the homepage The homepage is Showcase's signature: a deck of full-screen story panels, one product per screen. Visitors scroll, and each product fades (or scrolls) into the next like scenes in a film. Let's build yours. ## How the homepage is structured The homepage renders exactly two sections, in this order: 1. **Product stories** — the story deck. Each *Story* block is one full-screen product. 2. **Lookbook** — an optional 3D deck of campaign images with product hotspots (see [Pages → Lookbook](/sitesbyseth-docs/showcase/pages.md#the-lookbook)). These two sections are fixed — you can't add, remove, or reorder sections on the homepage. Everything inside them is fully configurable. ## Step 1: Add your story blocks 1. Go to **Online Store → Themes → Customize** (make sure you're viewing the homepage). 2. In the left sidebar, click the **Product stories** section. It comes with 3 placeholder Story blocks. 3. Click a **Story** block, then click the **Product** picker and choose a product. 4. To add more screens, click **Add Story** at the bottom of the section's block list. Drag blocks to reorder — the side rail renumbers itself automatically. 💡 A screen with no product selected shows a gray placeholder that says "Select a product for this screen in the theme editor." Placeholders never show real prices or buttons, so don't publish until every block has a product. ## Step 2: Give each screen a background Every Story block has its own **Background** settings. The theme uses them in this priority order: 1. **Background video** — wins if set. Upload a video (it plays muted, on loop, full-screen). Keep clips short and lightweight; Showcase only plays the video for the screen that's currently visible, so a long deck stays smooth. 2. **Background image** — used when no video is set. Upload at least 2400px wide for crisp full-screen rendering. 3. **Background color** — used when neither is set. Default is a warm off-white (`#F3F0EA`). A plain color screen is a legitimate, gallery-like look — especially with [auto-cutout](#step-4-optional-turn-on-auto-cutout) on. Two supporting settings: * **Overlay darkness** (0–90%, default 35%) — a dark tint over the video/image so your text stays readable. Raise it for bright, busy footage. * **Text color** — `Auto` (default) uses light text over a video or image and dark text on a plain color. Override with `Light` or `Dark` if your background needs it. * **Info style** — `Transparent` floats the product info directly on the background; `Glass panel` puts it on a frosted card. Use Glass panel when the background is busy. ## Step 3: Choose the transition — fade vs. scroll At the top of the **Product stories** section settings: * **Fade (no sliding)** — the default and the signature look. The screen stays still, and scrolling crossfades to the next product. The scrollbar still moves (one "step" per product), but nothing slides — products dissolve into each other. * **Scroll** — classic full-page scrolling. Each product is a full-screen section you scroll past, with gentle snapping so screens don't rest half-cut at the fold. 💡 Fade mode needs at least 2 Story blocks — with a single block there's nothing to fade between, so the deck behaves like a single scroll panel. ## Step 4 (optional): Turn on auto-cutout Each Story block has an **Auto-remove studio background** checkbox. When on, the theme keys out flat white/light photo backdrops in the product slideshow, so the product floats directly on your story background — like a professional cutout, with zero editing. It only works on photos shot against a **uniform studio backdrop** (all four corners the same color). Photos with real-world backgrounds are automatically left untouched — the theme detects them and bails out rather than mangle them. 👉 Full details, including how to shoot photos that cut out cleanly: [Auto-cutout](/sitesbyseth-docs/showcase/auto-cutout.md). ## Step 5: Write the story text Each block has a **Story text** field (rich text), shown under the price. This is your one paragraph on stage — treat it like ad copy, not a spec sheet: * **Keep it to 2–4 short lines.** The screen is shared with the product image, price, options, and buttons. * **Lead with feel, not features.** "Cut from heavyweight Japanese cotton. Made to be lived in." beats "300gsm cotton t-shirt." * **One idea per screen.** If you need bullet points, put them in an accordion (Description, Shipping timeline, or one of the three custom accordions) instead. * The separate **Show description under the title** checkbox prints the product description (trimmed to 300 characters) right under the product name — off by default. Use story text *or* the description, rarely both. ## Step 6: The scroll hint and the rail * **Show scroll hint on first screen** (on by default) — a small "Scroll" cue with an animated line on the very first panel. It disappears as soon as the visitor starts scrolling. Leave it on: full-screen pages can look static without it. * **The side rail** — the vertical chip list on the right edge. It builds itself: one chip per Story block, auto-numbered (01, 02, 03…), each showing the product's thumbnail and, on hover, its name. Clicking a chip warp-scrolls to that product. If a Lookbook follows the deck, a Lookbook chip is appended automatically. There's nothing to configure — it always mirrors your blocks. ## Step 7: Slideshow navigation The **Slideshow navigation** setting controls the arrows/dots on each product's floating image slideshow: | Option | What it does | | ------------------- | ------------------------------------------ | | `Arrows` (default) | Left/right chevrons on the image frame | | `Dots` | A dot row under the frame | | `Arrows and dots` | Both | | `None (swipe only)` | No controls — visitors swipe (mobile) only | Products with a single image show no controls regardless. ## Everything else on the block Each Story block also carries its own **Buy now** button and offer, **Find my size** fit settings, and up to five **accordions**. These work identically on the product page, so they're covered in depth in [Product page](/sitesbyseth-docs/showcase/getting-started/product-page.md) and [Size finder](/sitesbyseth-docs/showcase/size-finder.md). For the exhaustive setting-by-setting reference, see [Sections → Product stories](/sitesbyseth-docs/showcase/sections/product-stories.md). Next: [the collection page](/sitesbyseth-docs/showcase/getting-started/collection-page.md). 👉 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/getting-started/homepage.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.