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

# Product page

The section that renders every product: a media gallery on one side, an information column built from reorderable blocks on the other, and an optional sticky add-to-cart bar. A step-by-step setup walkthrough lives in [Setting up your product page](/sitesbyseth-docs/skeleton/getting-started/product-page.md); this page is the full reference.

**Where to find it:** theme editor → page selector → **Products → Default product** → click **Product page**.

## Settings

* **Image layout** —
  * **Stacked (scroll down the page)** — all media in a vertical column.
  * **Slideshow (one image at a time)** — swipeable, compact.
  * **Slideshow with thumbnails below** — slideshow plus a thumbnail strip for jumping between media.
* **Slideshow navigation** — **Dots**, **Arrows**, **Dots and arrows** (default), or **Swipe only**. Applies to the slideshow layouts; the thumbnails layout uses thumbnails instead of dots.
* **Media aspect ratio** — **Square (1:1)** (default), **Portrait (4:5)**, **Landscape (4:3)**, or **Natural (no crop)**. Images are cropped to fill the selected ratio. Videos, external videos, and 3D models can't be "natural" height, so they render 16:9 when Natural is selected; otherwise they share the image ratio.
* **Show sticky add to cart bar** (on by default) — a bar with the product title, live price, a variant dropdown (sold-out variants disabled), and an Add to cart button slides in at the bottom of the screen once the main buy buttons scroll out of view.
* **Section style** — **Top padding** (default 40), **Bottom padding** (default 24), **Background color**, **Text color**.

## Blocks

| Block              | Limit     | Purpose                                                                                       |
| ------------------ | --------- | --------------------------------------------------------------------------------------------- |
| **Title**          | 1         | The product name (H1). No settings.                                                           |
| **Price**          | 1         | Live price; sale price highlighted with compare-at struck through. No settings.               |
| **Variant picker** | 1         | Option pills for size/color. Hidden automatically when a product has no options. No settings. |
| **Find your size** | 1         | Opens the size finder modal. Settings below.                                                  |
| **Buy buttons**    | 1         | Add to cart form. Settings below.                                                             |
| **Description**    | 1         | The product description, optionally clamped with Read more.                                   |
| **Trust badges**   | 1         | Row of up to 3 icon + text reassurances.                                                      |
| **Accordion**      | unlimited | Collapsible rows (shipping, care, sizing…).                                                   |
| **Text**           | unlimited | Free rich text.                                                                               |

### Find your size

* **Trigger label** (default "Find your size").
* **How this piece fits** — **Use theme default** (default), **True to size**, **Runs small — recommend sizing up**, **Runs large — recommend sizing down**, **Oversized / relaxed fit**.
* **Garment type** — **Use theme default** (default), **Tops / tees / hoodies**, **Bottoms / pants**, **Outerwear / jackets**, **Dresses / one-pieces**. Changes how height vs. weight are weighted.

The chart rows and defaults live in **Theme settings → Size finder**; per-product charts come from the product's `custom.size_chart` metafield. See the [size finder deep dive](/sitesbyseth-docs/skeleton/size-finder.md).

### Buy buttons

* **Show quantity selector** (off by default).
* **Show dynamic checkout buttons** (off by default) — Shop Pay/PayPal/etc. express buttons.
* **Show stock status** (on by default) — In stock / low stock / Sold out line.
* **Low stock threshold** (0–20, default 5) — the urgency message shows when the selected variant's inventory is at or below this; 0 disables the urgency message.

### Description

* **Lines to show** (0–12, default 0) — 0 shows everything; any other number clamps the text and adds a **Read more / Read less** toggle.

### Trust badges

Three badges, each with a **Text** field and an **Icon** — **None**, **Shipping**, **Returns**, **Secure**, **Gift**, **Discount**, **Worldwide**, **Sizing**, **Star**, **Info**, or **Cart**. Defaults: "Free shipping over $150" (Shipping), "14-day returns" (Returns), "Secure checkout" (Secure). Empty text hides that badge.

### Accordion

* **Heading** (default "Details"), **Icon** (same icon list, default None), **Content** (rich text), **Page content** (pull in a store page — great for a shared shipping policy), **Open by default** (off).

### Text

* **Text** — rich text.

💡 **Pro tip:** the highest-converting block order for streetwear is the template default — Title, Price, Find your size, Variant picker, Buy buttons — because the size answer arrives *before* the size choice. Resist pushing the description above the buy button; clamp it to 3 lines instead and let Read more do the work.


---

# 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/skeleton/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.