Product page views
Choose between SAISON's Runway, 50/50, and 60/40 product page views, then tune media, variants, size guide, buying controls, and product information blocks with the real product section settings.
SAISON product pages are controlled by the Product section. The most important decision is layout_style: stack creates the Runway view, 50-50 creates a balanced split, and 60-40 gives more space to product media.
Explore the product page before changing settings
Click the view, media gallery, variants, buy controls, size guide, trust blocks, or mobile behavior. The inspector opens the matching Shopify settings and updates this local mock.
- Choose Runway, 50/50, or 60/40.
- Tune media browsing.
- Set variant controls.
- Keep buy controls close.
- Add size and trust info.
- Check mobile states.
Build It In Shopify
Open the product template
Go to Online Store > Themes > Customize, open a product template, and select the Product section. The default product template is Runway-oriented; the product.60-40 template starts with layout_style = 60-40.
Choose layout_style first
Pick stack, 50-50, or 60-40 before tuning smaller controls. stack is the schema value for Runway, which uses horizontal media with a floating product information rail. Changing the layout later can change which media and rail controls apply.
Tune the media behavior
For Runway, tune runway_media_vw, runway_media_min_px, runway_media_max_px, runway_rail_width_px, and runway_right_gap after product images are uploaded. For 50/50 and 60/40, tune media_layout, media_height, slider_animation, dots_position, mobile_pagination_style, show_thumbnails, enable_zoom, and smooth_scroll_stacked. In the current Product schema, media_layout is only shown when layout_style is not stack.
Build the purchase stack
Keep the buying path close to the top: title, price, options, quantity, add to cart, size guide, shipping information, description, and collapsible details.
Test the real product states
Test available, sold out, low stock, compare-at price, unit price, subscription selling plans, pickup availability, dynamic checkout, and a product with only one default variant.
Product Section Settings
Options Block
Add To Cart Block
Recommended View Recipes
| Setting | Location | Recommended | Notes |
|---|---|---|---|
| Visual launch product | Use Runway | layout_style stack, product_info_bg glass, enable_sticky_atc on | Add benefits, shipping info, and recommendations below; mark a later section as rail end when needed. |
| Standard catalog product | Use 50/50 | layout_style 50-50, product_info_bg solid, media_height full, thumbnails bottom | Prioritize clear options, price, quantity, add to cart, and description. |
| Image-led product with normal buying flow | Use 60/40 | layout_style 60-40, slider_animation scroll, media_layout stacked | Good for fashion or home products where imagery needs more space but buying should stay familiar. |
| Variant-heavy product | Use 50/50 or 60/40 | buttons or dropdown, color_swatch_max_height when needed, size guide under options | Avoid hiding important fit, color, or stock details below the fold. |
| Long education page | Use Runway or 60/40 with below-product sections | collapsible info, benefits, product recommendations, text or video sections | Keep buying controls available while deeper content builds confidence. |
Common mistakes
- Changing layout_style after building the entire purchase stack.
- Looking for media_layout while Runway is selected; it is hidden for layout_style = stack.
- Expecting show_arrows_mobile to render arrows on stacked media layouts.
- Using glass product info over media that does not provide enough contrast.
- Putting size guide, shipping, or stock information below long descriptions.
- Testing only one product state instead of sold out, low stock, many variants, one default variant, and selling plans.