Product Template
The most important section in your store—where conversions happen. Three sophisticated layout options with extensive customization for galleries, variants, and purchase options.
Overview
The product page directly impacts your conversion rate. Brave offers three distinct layouts plus extensive customization for galleries, variant selectors, and purchase options.
🎬
3 Layout Modes
Runway, 50/50, or 60/40 split
🖼️
Rich Gallery
Zoom, thumbnails, video support
🎨
Color Swatches
Visual variant selection
🛒
Sticky Cart
Always-visible add to cart
Layout Overview
Brave offers three distinct product page layouts:
Recommended
🎬
Runway
Horizontal scrolling gallery with floating info panel. Luxury, editorial aesthetic.
Best for: Fashion, beauty, lifestyle brands
📱
Two-column 50/50
Classic equal split between gallery and info. Familiar e-commerce layout.
Best for: Detailed product information
🖼️
Two-column 60/40
Larger gallery area (60%) for visual impact. Compact info panel.
Best for: Image-focused products
Try the interactive demo to see how each layout looks with different options:
📱Product Page Layout Demo
Compare different product page layouts
Preview
Image 1
Image 2
Image 3
BRAVE BRAND
Premium Product Name
$199.00
Page Layout Settings
Desktop Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Desktop layout | select | Runway | Choose the overall product page structure. |
Product Info Style
| Setting | Type | Default | Description |
|---|---|---|---|
| Product info style | select | Standard | Typography and styling preset for the info panel. |
✨
Standard
Clean, balanced typography
◻️
Minimal
Understated, modern aesthetic
💎
Premium
Italic headings, luxurious feel
Image Display Style
| Setting | Type | Default | Description |
|---|---|---|---|
| Image display style | select | Stacked | How product images are arranged. |
Image Display Options
StackedRecommended
Scroll through images vertically
Stacked in 2 columns
Two-column grid layout for desktop
2 columns with hero first
First image full-width, then 2-column
Additional Layout Options
| Setting | Type | Default | Description |
|---|---|---|---|
| Two-column gallery (desktop) | checkbox | true | Show images in a 2-column grid on desktop. |
| Full-height hero (edge-to-edge) | checkbox | false | Extends product images to the top of the viewport. Best with transparent header. |
| Image aspect | select | Natural | Control image proportions: Natural (original), Square (1:1), or Fit to screen. |
Gallery Behavior
Control how customers navigate through product images.
Slide Transition
| Setting | Type | Default | Description |
|---|---|---|---|
| Slide transition | select | Fade | Animation between images. |
🌊
Fade
Smooth crossfade between images
⬇️
Vertical Scroll
Scroll through stacked images
👆
Swipe
Horizontal swipe for touch devices
Navigation
| Setting | Type | Default | Description |
|---|---|---|---|
| Navigation dots | select | Overlay on image | Position of slide indicators. |
| Mobile indicator style | select | Progress bar (full width) | How slide position is shown on mobile. |
| Thumbnail position | select | Below main image | Position of thumbnail navigation (desktop). |
| Show thumbnails | checkbox | true | Display thumbnail navigation. |
| Show navigation arrows (mobile) | checkbox | true | Display prev/next arrows on mobile. |
| Enable pinch-to-zoom | checkbox | true | Allow customers to zoom into product images. |
| Smooth scroll between images | checkbox | true | Animate scroll transitions. |
Color Swatches
Configure variant color selection behavior.
| Setting | Type | Default | Description |
|---|---|---|---|
| Preview on hover | checkbox | true | Hovering a color swatch previews that variant's image. |
| Hover revert delay | range | 0ms | How long to wait before reverting preview (0 = instant). Range: 0-1000ms. |
| Preferred size for gallery | text | S | Which size variant's images to show per color. Leave blank for auto-detection. |
| If color has no images | select | Show product images | Fallback behavior when a color variant has no assigned images. |
Product Info Settings
Info Panel Appearance
| Setting | Type | Default | Description |
|---|---|---|---|
| Info panel style | select | Solid background | Background style for the product info area. |
| Glass opacity | range | 0.2 | Transparency when using frosted glass style. Range: 0-1. |
Badges & Status
| Setting | Type | Default | Description |
|---|---|---|---|
| Show NEW badge | checkbox | true | Display NEW badge on recent products. |
| NEW badge threshold (days) | range | 28 | Products created within this many days show the badge. Range: 7-84 days. |
| Show stock status | checkbox | true | Display inventory level indicators. |
| Show wishlist button | checkbox | true | Display 'Add to wishlist' option. |
| Wishlist button text | text | Add to wishlist | Button label text. |
| Show loyalty points | checkbox | false | Display points program information. |
| Points text | text | 6200 Oner Points | Points display text. |
Purchase Options
Cart & Checkout
| Setting | Type | Default | Description |
|---|---|---|---|
| Show 'taxes included' message | checkbox | true | Display pricing policy message. |
| Show payment installments | checkbox | false | Show Buy Now Pay Later options (Shop Pay, Klarna, etc.). |
| Sticky add-to-cart bar (Desktop) | checkbox | false | Fixed buy bar that stays visible when scrolling. Always ON for mobile. |
| Quick quantity selector | checkbox | false | Shows quantity +/- buttons on hover. |
| Hide sold-out variants | checkbox | false | Don't show options that can't be purchased. |
Size Guide
| Setting | Type | Default | Description |
|---|---|---|---|
| Enable size guide | checkbox | false | Show size guide button and content. |
| Open as | select | Modal popup | How the size guide displays: Modal popup or Side drawer. |
| Button text | text | Size guide | Size guide link text. |
| Button icon | image | - | Optional icon next to button. |
| Drawer title | text | Size guide | Heading when using drawer display. |
| General tab / Model tab | text | General / Model | Tab labels for size guide content. |
Appearance
| Setting | Type | Default | Description |
|---|---|---|---|
| UI button style | select | Dark | Controls zoom buttons, navigation arrows, and other UI elements: Light (for dark backgrounds) or Dark (for light backgrounds). |
| Content spacing | range | 24px | Vertical space between info blocks. Range: 8-32px. |
| Page width | select | Default | Container width: Default, Narrow, or Wide. |
Runway Advanced Settings
Fine-tune the Runway layout with these advanced options.
| Setting | Type | Default | Description |
|---|---|---|---|
| Max media width | range | 855px | Maximum width of each image in the carousel. Range: 600-1100px. |
| Min media width | range | 320px | Minimum width of each image. Range: 280-500px. |
| Preferred width | range | 60vw | Target image width as viewport percentage. Range: 40-80vw. |
| Info panel width | range | 360px | Width of the floating product info panel. Range: 320-800px. |
| Right edge gap | range | 0px | Space between the info panel and viewport edge. Range: 0-80px. |
Block Types
Add content blocks to customize the product info panel. Drag and drop blocks to reorder them.
Content Blocks
📝
Title
Product name display
💰
Price
Current and compare-at prices
📄
Description
Product description text
🎨
Options
Variant selectors
🔢
Quantity
Quantity input field
🛒
Add to Cart
Purchase button
🏷️
Vendor & SKU
Brand name and ID
Enhancement Blocks
🏅
Badges
NEW, Sale, or custom badges
✅
Benefits
Up to 3 benefit icons with headings
📊
Inventory Status
Low stock / In stock indicators
⏰
Countdown Timer
Urgency timer for sales
🎟️
Promo Code
Display discount codes
📋
Collapsible Info
Expandable accordions
Support Blocks
🔔
Back in Stock
Notify me button for sold-out items
❓
Ask a Question
Contact form for inquiries
📍
Pickup Availability
Store pickup information
🔗
Complementary Products
Related product suggestions
📤
Social Links
Share buttons
Technical Blocks
📝
Rich Text Blurb
Custom formatted text
💻
Custom Liquid
Advanced custom code
⭐
Highlight Row
Icon + text feature highlights
📏
Option Accuracy Meter
Fit/sizing confidence indicator
📈
Progress Tracker
Visual progress bars
✍️
Product Note Field
Custom message input
Block Settings: Options
| Setting | Type | Default | Description |
|---|---|---|---|
| Variant picker | select | Buttons | How variants are displayed: Buttons or Dropdown. |
| Color swatch type | select | Small square | Swatch appearance: Small square, Big square, or Square with label. |
| Enable color swatch preview | checkbox | true | Show image preview when hovering swatches. |
| Enable color swatch max height | checkbox | false | Limit swatch row height with scrolling. |
Block Settings: Inventory Status
| Setting | Type | Default | Description |
|---|---|---|---|
| Low stock text | text | Low stock | Message for low inventory. |
| Low stock icon | image | - | Icon for low stock status. |
| High stock text | text | In stock | Message for normal inventory. |
| High stock icon | image | - | Icon for in-stock status. |
| Low stock threshold | range | 3 | Quantity that triggers low stock warning. Range: 1-50. |
| Low/High stock color | color | - | Custom colors for status indicators. |
Block Settings: Countdown Timer
| Setting | Type | Default | Description |
|---|---|---|---|
| Text before timer | text | Sale ends in | Label text. |
| Hours from now | range | 24 | Quick timer setup: countdown from now. Range: 0-168 hours. |
| End date | text | - | Specific end date (YYYY-MM-DD format). |
| End time | text | 23:59 | Specific end time (24-hour format). |
| Icon | image | - | Optional timer icon. |
| Text/Timer colors | color | - | Custom color scheme for the countdown. |
Block Settings: Collapsible Info
| Setting | Type | Default | Description |
|---|---|---|---|
| Show Size & Fit / Content | checkbox + richtext | Enabled | Toggle and content for Size & Fit accordion. |
| Show Material & Care / Content | checkbox + richtext | Enabled | Toggle and content for Material & Care accordion. |
| Show Delivery & Returns / Content | checkbox + richtext | Enabled | Toggle and content for Delivery & Returns accordion. |
| Show Model Info / Content | checkbox + richtext | Enabled | Toggle and content for Model Info accordion. |
Best Practices
Layout Selection Guide
| Brand Type | Recommended Layout |
|---|---|
| Luxury / Fashion | Runway |
| Consumer Electronics | Two-column 60/40 |
| General E-commerce | Two-column 50/50 |
| Visual Products | Runway or 60/40 |
| Complex Products | 50/50 (more info space) |
Image Optimization
Image Guidelines
Use high-resolution imagesRecommended
2000px+ recommended for zoom functionality
Consistent aspect ratiosRecommended
All product images should match for smooth transitions
Multiple angles
4-8 images per product showing different views
Lifestyle photos
Include images showing the product in use
Mobile Considerations
Mobile Optimization
Test swipe behaviorRecommended
Ensure smooth gallery navigation on touch devices
Sticky ATC bar
Always enabled on mobile for easy purchasing
Thumbnail visibility
May be hidden on small screens - test thoroughly
Conversion Optimization
Boost Conversions
Enable urgency elementsRecommended
Countdown timers and low stock warnings
Add social proofRecommended
Reviews, badges, and highlight rows build trust
Use collapsible info
Keep the purchase area clean and focused
Show payment options
Installment messaging builds purchase confidence
Troubleshooting
🖼️Images not displaying correctly
- Verify image aspect ratios are consistent across all product photos
- Check the "Image aspect" setting matches your images
- For Runway layout, test with different media width settings
🎨Color swatches not working
- Ensure products have color variants properly configured in Shopify
- Check that variant images are assigned correctly to each color
- Verify swatch colors are defined in Theme Settings
🛒Sticky ATC bar issues
- On desktop: Verify "Sticky add-to-cart bar" is enabled in settings
- On mobile: Always shows by default, no action needed
- Check for z-index conflicts with other page elements
📐Layout looks different than expected
- Verify the correct layout option is selected
- Check container width settings
- Test with products that have different image counts