> 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/getting-started/product-page.md). # Setting up the product page This is where the sale happens, so it's worth 30 careful minutes. Skeleton's product page is built from **blocks** you can reorder, add, and remove — plus a gallery, a sticky add-to-cart bar, and a recommendations section underneath. ## Open the right page in the editor 1. Go to **Online Store → Themes → Customize**. 2. Click the page selector at the top and choose **Products → Default product**. 3. In the left panel, click **Product page** to open the section settings. Its blocks are listed underneath it. ## Gallery settings (the section itself) * **Image layout**: * **Stacked** — all photos in a column; customers scroll down through them. Editorial, great for lots of photos. * **Slideshow** — one photo at a time with swipe/arrows. Compact, keeps the buy button high on the page. (This is the default template setup.) * **Slideshow with thumbnails below** — a slideshow plus a row of small thumbnails to jump between photos. * **Slideshow navigation** — **Dots**, **Arrows**, **Dots and arrows**, or **Swipe only**. Applies to the slideshow layouts; the thumbnails layout shows thumbnails instead of dots automatically. * **Media aspect ratio** — **Square (1:1)**, **Portrait (4:5)**, **Landscape (4:3)**, or **Natural (no crop)**. Images are cropped to fill the chosen ratio, so every photo becomes the same shape. Portrait 4:5 suits clothing photography. * 💡 Videos and 3D models can't have a "natural" height, so if you pick Natural they display at 16:9. * ⚠️ If photos look awkwardly cropped, either pick the ratio that matches how your photos were shot, or choose Natural. * **Show sticky add to cart bar** (on by default) — see below. * **Section style** — padding and color overrides. ## The blocks, one by one Click any block name in the left panel to edit it. Drag the ⠿ handle to reorder. **Add block** offers any you've removed. ### Title Your product's name, pulled from the product itself. No settings. ### Price The current price. If you set a "Compare-at price" on the product, the sale price shows highlighted with the old price struck through. No settings. ### Find your size The size-finder trigger — a ruler icon plus a text link that opens the size calculator modal. * **Trigger label** — the link text (default "Find your size"). * **How this piece fits** — **Use theme default**, **True to size**, **Runs small — recommend sizing up**, **Runs large — recommend sizing down**, or **Oversized / relaxed fit**. This shifts the recommendation for products cut differently from your norm. Leave on "Use theme default" unless this template's products fit unusually. * **Garment type** — **Use theme default**, **Tops / tees / hoodies**, **Bottoms / pants**, **Outerwear / jackets**, or **Dresses / one-pieces**. Changes how height vs. weight are weighted in the calculation. The size chart rows, default fit, and chart images live in **Theme settings → Size finder**. Full guide: [Size finder deep dive](/sitesbyseth-docs/skeleton/size-finder.md). ### Variant picker Size/color options shown as tappable pills. Sold-out combinations still show but the buy button disables when selected. The block hides itself automatically for products with no options. No settings. ### Buy buttons The add-to-cart form. * **Show quantity selector** (off by default) — +/− steppers next to the button. Streetwear stores usually leave this off; quantities can be changed in the cart. * **Show dynamic checkout buttons** (off by default) — adds Shop Pay / PayPal / Google Pay express buttons under add-to-cart. * **Show stock status** (on by default) — an "In stock" / "Only X left" / "Sold out" line under the button. * **Low stock threshold** (0–20, default 5) — when the selected variant's inventory is at or below this number, the note switches to a low-stock urgency message. Set 0 to never show the urgency message. ### Description Your product description from the product admin. * **Lines to show** (0–12, default 0) — 0 shows the full description. Any other number clamps it to that many lines and adds a **Read more** toggle. The default template uses 3 lines, which keeps long descriptions from pushing the buy button down. ### Trust badges A row of up to three short reassurances with icons (e.g. "Free shipping over $150 · 14-day returns · Secure checkout"). * For each badge (1, 2, 3): a **Text** field and an **Icon** picker — None, Shipping, Returns, Secure, Gift, Discount, Worldwide, Sizing, Star, Info, or Cart. * Leave a badge's text empty to hide it. ### Accordion Collapsible detail rows — add one block per topic (Shipping & returns, Sizing, Care…). You can add as many Accordion blocks as you like. * **Heading** — the row's label. * **Icon** — optional icon before the heading (same list as trust badges, plus None). * **Content** — rich text shown when opened. * **Page content** — alternatively (or additionally), pull in the content of a store page, so you can update your shipping policy in one place. * **Open by default** — starts expanded. ### Text A free-form rich text block for anything else — a fit note, a made-in line, care instructions. Add as many as you need. ## The sticky add-to-cart bar With **Show sticky add to cart bar** on, a slim bar slides up from the bottom of the screen when the customer scrolls the main buy button out of view. It shows the product title, live price, a variant dropdown (sold-out variants are disabled and labeled), and an Add to cart button. It disappears again when the customer scrolls back to the top. Nothing else to configure. ## Product recommendations Below the product section sits **Product recommendations** ("You may also like") — products picked automatically by Shopify based on sales data and product data. * **Heading** — the title above the grid. * **Products to show** (2–6, default 4). ## Quick view (bonus) Anywhere product cards appear (collections, search, featured grids), the + button opens a quick view modal with photos, price, size pills, a size-finder link, and add to cart — configured globally under **Theme settings → Product cards → Enable quick view (+) button**. Next: [Drop mode](/sitesbyseth-docs/skeleton/getting-started/drop-mode.md), or jump to [Theme settings](/sitesbyseth-docs/skeleton/theme-settings.md) to lock in your colors and fonts. --- # 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/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.