> 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/sections/product-stories.md). # Product stories The heart of Showcase: the homepage story deck. Each **Story** block is one full-screen product — its own background, floating image slideshow, story text, options, and buttons. A fixed side rail lists every product with auto-numbered chips and warp-scrolls to them on click. 👉 **Customize → homepage → Product stories** section. See also the walkthrough: [Building the homepage](/sitesbyseth-docs/showcase/getting-started/homepage.md). ## Section settings * **Product transition** — `Fade (no sliding)` (default) or `Scroll`. Fade keeps the screen still and crossfades to the next product as the visitor scrolls (needs 2+ blocks); Scroll is classic full-page scrolling with gentle snap. * **Show scroll hint on first screen** (on) — the animated "Scroll" cue on panel 1; hides once the visitor scrolls. * **Slideshow navigation** — controls for each product's image slideshow: `Arrows` (default), `Dots`, `Arrows and dots`, or `None (swipe only)`. Products with one image show no controls. ## The Story block Everything for one screen, grouped top to bottom: ### Story * **Product** — the product this screen sells. Empty = a placeholder screen (don't publish those). * **Story text** — rich text shown under the price. Your 2–4 line pitch for this piece. * **Show description under the title** (off) — prints the product description (trimmed to 300 characters) directly under the name. Separate from the description accordion below. ### Product images * **Show product image slideshow** (on) — the floating gallery, up to 5 media items, all cropped to a shared 4:5 portrait frame. Product videos play only while their slide is active. * **Auto-remove studio background** (off) — keys out flat white/light photo backdrops so the product floats on the story background. Photographic backgrounds are detected and left untouched. Details: [Auto-cutout](/sitesbyseth-docs/showcase/auto-cutout.md). ### Background * **Background video** — wins over everything; plays muted on loop, and only while this screen is visible. * **Background image** — used when no video is set. 2400px wide or more. * **Background color** (default `#F3F0EA`) — used when neither is set. * **Overlay darkness** (0–90%, default 35%) — dark tint for text legibility over media. * **Text color** — `Auto` (light over video/image, dark on plain color), `Light`, or `Dark`. * **Info style** — `Transparent` (info floats on the background) or `Glass panel` (frosted card — use on busy backgrounds). ### Buy now * **Show Buy now button** (on) — a second button that skips the cart and goes straight to checkout. * **Offer attached to Buy now** — a product auto-added when the buyer taps Buy now. If the offer has options (sizes), a small accept window opens first. * **Offer label** — text after "Buy now —" on the button; falls back to the offer product's title. ### Find my size Shown automatically on clothing products and anything with a Size option — no toggle needed. Just describe the piece: * **How does this piece fit?** — `Runs small — size up`, `Slightly snug`, `True to size` (default), `Slightly roomy`, or `Oversized cut — size down`. * **Garment type** — `Top / tee / hoodie` (default), `Bottoms / pants`, `Outerwear / jacket`, or `Dress / one-piece`. Sets how height vs. build are weighted. * **Size chart image** — optional; shown inside the Find my size window. Full explanation: [Size finder](/sitesbyseth-docs/showcase/size-finder.md). ### Accordions * **Show description accordion** (on) — the full product description, collapsed. * **Shipping timeline title** (default "Shipping timeline") + **Shipping timeline content** — appears only when the content is filled. * **Accordion 1 / 2 / 3 title + content** — three custom accordions; each renders only when both its title and content are filled. ## Pro tip 💡 Vary your backgrounds for rhythm: video → plain color → image → video. In fade mode a plain-color screen between two video screens acts like a palate cleanser and makes each video land harder. And keep the deck to 4–8 blocks — a story deck is an edit, not an archive; the collection page is where the full range lives. --- # 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/sections/product-stories.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.