Product page overview
Layout, blocks, and how to compose a PDP that converts.
Updated 2026-05-09
The product page is the most configurable template in Dost. Layout uses a two-column structure: media gallery on the left, product info on the right.
Section: Product
The page has one main Product section. Inside it:
- Gallery (left, fixed by the section)
- Info column (right, blocks-based — you control the order)
Top-level section settings
| Setting | Notes |
|---|---|
| Container width | Boxed / Full width |
| Column ratio | 60/40, 50/50, 40/60 |
| Gallery layout | Slider / Grid 1-2-2 / Grid 2-2-2 / Grid 1-1-1 |
| Enable lightbox | Click image → full-screen viewer |
| Autoplay product videos | Mutes & loops by default |
| Loop product videos | |
| Sticky add-to-cart | Mobile bottom-bar that appears on scroll |
| Show mobile thumbnails | Off by default |
Info column blocks
Each is its own block — drag in / out, reorder freely:
- Vendor — small text above title
- Title
- Rating — Shopify product reviews metafield
- Price
- Variant picker (also called "Options")
- Selling plans — subscriptions
- Buy buttons — Add to cart + qty stepper + Shop Pay etc.
- Description
- SKU
- Share buttons
- Accordion (multiple) — Details, Care, Shipping, etc.
- Stock alert — In stock / Low stock / Sold out badge with optional pulse
- Badges — sale / new / preorder / custom tag badges
- Divider
- Custom Liquid
Each block topic in this category covers its own settings. Start with Gallery layouts for visual setup, then tour the info-column blocks.
Recommended block order
- Badges
- Vendor
- Title
- Rating
- Price
- Variant picker
- Selling plans (if subscription)
- Buy buttons
- Description (or accordion if it's long)
- Accordions (Details, Care, Shipping, Returns)
- SKU
- Share buttons
This mirrors how customers scan a PDP — visual identity → option → buy → consider.
Behavior
Image fade-in
Product card images and the PDP main image fade in once their image resource loads — no pop-in on slow connections. The theme also runs a MutationObserver that watches for async-injected cards (recently-viewed, recommendations, search results, quick view) and applies the same fade. So dynamically loaded content always animates in the same way as the initial render.
Rating accent colour
- PDP star ratings use the PDP section's
color_schemeaccent. - Product-grid card ratings use the parent section's
color_schemeaccent (per-section override).
That way a "Featured collection" with a custom scheme paints its rating stars to match, without affecting the global PDP star colour.