> 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/reign/getting-started/product-page.md). # Product Page The product page is where money is made, so Reign gives it the most firepower. The page is built from a **Product information** section (a stack of draggable blocks) followed by social-proof sections. ## Open the product template 1. In the theme editor, click the top-center dropdown 2. Choose **Products** → **Default product** 3. Use the "preview" picker to view different products while you style ## What's on the default product page * **Product information** — the main section, with these blocks in order: 1. Title 2. Price 3. Size guide ("FIND MY SIZE" button + calculator modal) 4. Variant picker 5. Buy buttons 6. Trust bar ticker (scrolling "Secure payment / Free delivery…" strip) 7. Description 8. Accordion (Shipping Info / Returns / Size Guide / Care Instructions) 9. Product bundle ("Frequently bought together") * **Auto-scroll gallery** — UGC strip * **Testimonials** — review carousel * **Related products** — "You may also like" recommendations Drag blocks to reorder, hide with the eye icon, and add more with **⊕ Add block**. ## Product information: section settings Click the **Product information** section header (not a block) for these: ### Layout & media | Setting | What it does | Default | | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------- | | Sticky content | Product info stays pinned while the gallery scrolls (desktop) | On | | Color scheme | Section colors | Scheme 1 | | Width (media) | Small / Medium / Large — how much of the page the gallery takes | Large | | Constrain to screen height | Stops tall images from exceeding the viewport | On | | Fit | *Original* (contain) or *Fill* (cover/crop) | Original | | Layout | Gallery style: **Stacked**, **2 columns**, **Thumbnails**, **Thumbnail carousel**, **Slideshow**, **Scroll to reveal** | Stacked | | Gallery navigation | *Inherit from layout*, *Always show thumbnails*, *Dots (swipe main image)*, or *Hidden* | Inherit | | Thumbnail / dot position | Bottom, Top, Left (desktop), Right (desktop) | Bottom | | Mobile layout | *2 columns*, *Show thumbnails*, *Hide thumbnails* | Hide thumbnails | | Position | Media on Left or Right | Left | | Product info alignment (desktop / mobile) | Left / Center / Right for the whole info column | Center / Center | | Zoom | *Open lightbox*, *Click and hover*, *No zoom* | Lightbox | | Press-and-hold zoom on mobile | Shoppers press and hold the first product image to zoom | On | | Hide image borders | Strips borders/radius/shadows from product media | On | | Hide other variant media after one is selected | Filters the gallery to the chosen variant's images | Off | | Loop video | Loops product videos | Off | 💡 **Which gallery layout?** *Stacked* suits editorial full-bleed photography; *Thumbnails* or *Thumbnail carousel* suit products with many angles; *Slideshow* + dots is the cleanest on mobile. ### Product info style | Setting | What it does | Default | | --------------------------------------- | ---------------------------------------------- | ------- | | Title size | Small / Medium / Large / Extra large | Large | | Show separator line between info blocks | Thin dividers between blocks | Off | | Spacing between info blocks | 0–40px | 10 | | Product info padding | Inner padding around the info column (0–60px) | 0 | | Product info max width | 300–800px column width (800 = full) | 800 | | Price size | Small / Medium / Large | Large | | Show info background | Subtle background panel behind the info column | Off | | Padding top / bottom | Section spacing | 36 / 36 | ## The blocks ### Title, Price, SKU, Inventory * **Title** — desktop/mobile alignment, desktop title size (20–72px, default 40), mobile size, and top/bottom spacing sliders. * **Price** — alignment, desktop size (default 28px), mobile size (default 24px), **Show sale badge** (on), spacing. * **SKU** — text style: Body / Subtitle / Uppercase. * **Inventory status** — text style, **Low inventory threshold** (default 10 — below this it shows "Low stock"), and **Inventory count** toggle to show exact numbers. ### Variant picker | Setting | What it does | Default | | -------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------- | | Style | *Pills* (buttons — best for sizes) or *Dropdown* | Pills | | Swatch | Circle / Square / None — for options with swatches (colors) | Circle | | Desktop / mobile alignment | Left / Center / Right | Center | | Desktop / mobile width | How wide the picker spans | 100% | | Label size | 11–22px | 14 | | Dropdown style group | Size scale, text size, padding, border width/radius, background/text/caret/border colors — only used when Style = Dropdown | — | | Top / bottom spacing | Nudge the block | 0 / 16 | ### Buy buttons * **Dynamic checkout buttons** (on) — shows Shop Pay / PayPal express buttons under Add to cart * **Gift card sending options** (on) — recipient email + message form on gift card products * **Button alignment** desktop, and mobile (*Same as desktop* by default) ### Description * Desktop/mobile alignment * **Read more / less** (off) — collapses long descriptions to a preview; set **Preview lines** (default 4) and the Read more / Read less labels ### Size guide 📏 The "FIND MY SIZE" button that opens Reign's size calculator — shoppers enter height/weight and get a recommended size, with a one-tap "ADD SIZE M TO CART" button. Key settings: trigger type (button or icon), button styling, fit-type product lists, result message templates. It remembers the shopper's size and shows a "Your size: M" badge on return visits. 👉 Full walkthrough: [Size calculator](/sitesbyseth-docs/reign/free-gift-tiers/size-calculator.md) ### Accordion (`Reign` accordion) Four ready-made collapsible rows — **Shipping Info**, **Returns & Exchanges**, **Size Guide**, **Care Instructions** — each with a show/hide toggle, editable title, and rich-text content. Style controls cover width, padding, row padding, all colors (background, divider, title, content, icon, toggle), title/content font size and weight, and icon sizes. 💡 There's also a simpler **Collapsible row** block (single row, choice of 12 icons, content from rich text or a page) if you want one-off rows, and a standalone [Accordion section](/sitesbyseth-docs/reign/sections/faq-accordion.md) for use outside the product page — which can even display a pre-order note from a metafield (see [Pre-orders](/sitesbyseth-docs/reign/free-gift-tiers/preorder-metafield.md)). ### Trust bar ticker The scrolling reassurance strip (Secure payment · Free delivery · 30-day guarantee · 24/7 support). Up to 6 items, plus alignment, width, speed, font, and colors. Same block exists as a standalone section — settings documented in [Trust bar](/sitesbyseth-docs/reign/sections/trust-bar.md). ### Product bundle ("Frequently bought together") Attach up to 2 add-on products with size dropdowns and a single **Add bundle to cart** button showing the bundle total. Settings: both add-on product pickers, section/total/button/size labels, horizontal or vertical layout, image size, text/label/button colors, padding, width. (The bigger 4-product bundle builder is a separate section — see [Product bundle](/sitesbyseth-docs/reign/sections/product-bundle.md).) ### Notification badges (urgency) "Currently viewing: 23 People" + pulsing "Low Stock. Selling Out Fast" badges. Fully styleable. Documented in [Urgency badges](/sitesbyseth-docs/reign/sections/urgency-badges.md). ### Testimonials (product block) Up to 3 inline quotes with stars, author, and optional avatar — lighter than the full testimonials carousel section. Settings: section label, show stars/avatars, three quote groups (quote, author, title/location, 1–5 rating, avatar), and typography/color styling. ### More blocks you can add * **Text** — freeform styled text with alignment controls * **Quantity selector** — with alignment controls * **Share** — share button with custom label * **Information with Icon** — an icon image + rich text row * **Collapsible row** — single accordion row (heading, icon, rich text or page content) * **Pop-up** — a text link that opens a page in a modal (great for size charts or shipping policies) * **Complementary products** — "Pairs well with" recommendations powered by the Search & Discovery app; options for heading, collapsible mode, product count, products per page, pagination style (dots/counter/numbers), image ratio, quick add * **Product rating** — star rating summary (requires a reviews app) * **Custom Liquid** — paste app embed codes or custom snippets * **Apps** — app blocks from installed apps ## Below the main section * **Auto-scroll gallery** and **Testimonials** — same sections as the homepage ([UGC gallery](/sitesbyseth-docs/reign/sections/ugc-gallery.md), [Testimonials](/sitesbyseth-docs/reign/sections/testimonials.md)) * **Related products** — heading, optional carousel mode with arrows, product count (2–10), columns, and the standard product-card options. Recommendations come from Shopify; tune them in the Search & Discovery app. ⚠️ **Save and test an actual purchase flow**: pick a size, add to cart, check the cart drawer, and run a test checkout. Five minutes now saves refunds later. --- # 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/reign/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.