> 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/product-page.md). # The product page Click any product in Showcase and you land on… the same full-screen story panel. That's the point — no jarring switch from cinematic homepage to generic product template. The product page *is* a story screen, with the product's own background, slideshow, story text, options, and buttons, plus a rail of related products. ## Setting it up 1. Go to **Online Store → Themes → Customize**. 2. In the page selector at the top, choose **Products → Default product**. 3. Click the **Product page** section in the left sidebar. The settings mirror a homepage Story block — background (video/image/color, overlay, text color), story text, info style, slideshow navigation, Buy now, size finder, and accordions — but here they apply to whichever product is being viewed. Configure them once; the product's own title, price, images, options, and description fill in the rest. ## The image slideshow The floating "3D" slideshow shows up to **5** of the product's media items: * **Every slide is cropped to the same 4:5 portrait frame.** The theme crops server-side from the center, so the gallery is the identical shape on every product and every device — your first image doesn't have to match the others, but center your product in each shot so the crop never clips it. * **Videos in your product media play in place** — muted, looping, and only while their slide is front and center. Slides behind the deck pause automatically. * **External videos (YouTube/Vimeo) and 3D models show their preview image** as a static slide. * **Product photos never link anywhere** — tapping the image flips slides, it doesn't navigate. (On the homepage and collections, the product *title* is the link to the product page.) * **Navigation** — the **Slideshow navigation** setting offers `Arrows`, `Dots`, `Arrows and dots`, or `None (swipe only)`. Single-image products show no controls. * **Show product image slideshow** — untick to hide the gallery entirely (for a background-led look). * **Auto-remove studio background** — keys out flat studio backdrops so the product floats on your background. See [Auto-cutout](/sitesbyseth-docs/showcase/auto-cutout.md). ## Buy now and the offer modal Under the **Buy now** heading: * **Show Buy now button** (on by default) — adds a second, ghost-style button under Add to cart that skips the cart and goes **straight to checkout** with the selected variant. * **Offer attached to Buy now** — pick a product to attach as a one-tap upsell: * **Offer with a single variant** (e.g. a beanie, one size): it's added to checkout automatically alongside the main product. The button reads *"Buy now — \[offer name]"* so the buyer knows. * **Offer with options** (e.g. sizes): tapping Buy now opens a small **offer window** showing the offer's image, price, and size pills. The buyer picks a size and taps **Accept & checkout**, or taps **No thanks, just checkout** to proceed without it. Either way they land in checkout in one step. * **Offer label** — short text shown on the button after "Buy now —". Leave empty to use the offer product's title. ⚠️ The offer must be in stock to appear; a sold-out offer product silently disables the offer and Buy now behaves normally. And note the offer is added at its **real price** — if you want it discounted, discount the product itself or use a Shopify automatic discount. ## Variant options Products with options (Size, Color…) render them as tap-able pills. As the buyer picks, the price, compare-at price, and button state update live; combinations that are sold out show as struck-through pills, and a fully unavailable selection disables the button with "Sold out" / "Unavailable." ## Accordions and the shipping timeline Under the **Accordions** heading — these collapse/expand below the buttons, keeping the screen clean: * **Show description accordion** (on by default) — the product's full description in a "Description" accordion. * **Shipping timeline title + content** — a rich-text accordion for your made-to-order or drop shipping schedule (e.g. "Orders placed this week ship March 4–8"). It only appears when the content field has text. * **Accordion 1 / 2 / 3 title + content** — three fully custom accordions (care instructions, sizing notes, returns…). Each appears only when both its title *and* content are filled in. 💡 When an opened accordion is taller than the remaining screen, the panel glides it into view automatically — nothing gets stuck under the fold. ## The related products rail The side rail on a product page shows: the current product (highlighted), then related products — pulled first from the same collection, topped up from the rest of your catalog so the rail is never empty. Clicking a related chip navigates to that product's page. * **Related products shown** (2–8, default 4) — how many related chips appear. ## Find my size Clothing products (detected automatically) get a **Find my size** link above the options. Set this product's **fit profile** ("How does this piece fit?"), **garment type**, and optional **size chart image** here. Full walkthrough: [Size finder](/sitesbyseth-docs/showcase/size-finder.md). Next: [drop mode](/sitesbyseth-docs/showcase/getting-started/drop-mode.md) — the password page. 👉 --- # 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/product-page.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.