> 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/main-product.md).

# Product page

The product page rendered as a full-screen story panel — visually identical to a homepage story screen, with the side rail showing related products instead of the rest of the deck. Related products come from this product's collection first, topped up from the rest of the catalog so the rail is never empty; clicking a related chip navigates to that product.

👉 **Customize → page selector → Products → Default product → Product page** section. Walkthrough: [The product page](/sitesbyseth-docs/showcase/getting-started/product-page.md).

## Settings

### Content

* **Story text** — rich text under the price. Because this section serves *every* product, keep it product-agnostic ("Made in small batches. Numbered, never restocked.") or leave it empty and let each product's description speak.
* **Show description under the title** (off) — the product description as plain text (trimmed) under the name. The description accordion below is separate.
* **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 front and center; external videos and 3D models show their preview image.
* **Auto-remove studio background** (off) — keys out flat white/light backdrops so products float on the background. See [Auto-cutout](/sitesbyseth-docs/showcase/auto-cutout.md).
* **Info style** — `Transparent` (default) or `Glass panel`.
* **Slideshow navigation** — `Arrows` (default), `Dots`, `Arrows and dots`, or `None (swipe only)`.

### Related products rail

* **Related products shown** (2–8, default 4) — chips pulled from this product's collection, then the rest of the catalog.

### Buy now

* **Show Buy now button** (on) — skips the cart, straight to checkout.
* **Offer attached to Buy now** — auto-added on Buy now; offers with options open a small accept window first.
* **Offer label** — button text after "Buy now —"; falls back to the offer product's title.

### Background

* **Background video** — plays muted on loop; wins over the image.
* **Background image** — used when no video is set.
* **Background color** (default `#F3F0EA`) — used when neither is set.
* **Overlay darkness** (0–90%, default 35%).
* **Text color** — `Auto`, `Light`, or `Dark`.

⚠️ This background applies to **every** product page — there's one Product page section for all products. Pick something neutral (texture, tone, ambient loop) that flatters your whole range.

### Find my size

Appears automatically on clothing products. **How does this piece fit?** (`Runs small — size up` / `Slightly snug` / `True to size` / `Slightly roomy` / `Oversized cut — size down`), **Garment type** (`Top / tee / hoodie` / `Bottoms / pants` / `Outerwear / jacket` / `Dress / one-piece`), and an optional **Size chart image** shown inside the finder window. Full guide: [Size finder](/sitesbyseth-docs/showcase/size-finder.md).

### Accordions

* **Show description accordion** (on).
* **Shipping timeline title** (default "Shipping timeline") + **content** — renders only when content is filled.
* **Accordion 1 / 2 / 3 title + content** — custom accordions; each needs both title and content.

## Pro tip

💡 If different products need genuinely different product-page treatments (say, jewelry vs. outerwear), duplicate the template: **Online Store → Themes → Customize → page selector → Products → Create template**, adjust the Product page section settings on the new template, then assign products to it from their product admin 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/sections/main-product.md?ask=<question>&goal=<endgoal>
```

`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.