Skip to main content
The Product Page (PDP) powers individual product pages with flexible block-based content layout, advanced media gallery with thumbnails, variant selection, dynamic checkout buttons, and extensive customization options. This is your most important template for conversions - carefully configured media display, variant selection, and purchase options can optimize the buying experience and significantly increase conversion rates. Use this template to create compelling product presentations that address customer questions and reduce purchase friction.

​
Template Settings

​
Blocks

Embed app blocks from installed Shopify apps.
  • Review apps (Judge.me, Loox, Yotpo)
  • Size chart apps
  • Inventory apps
  • Trust badge apps
  • Customization apps
Apps must support app blocks. Drag and position where desired in product layout.
Display product title.
  • Automatically pulls product name
  • Rendered as H1 (SEO-optimized)
  • No settings (automatic)
  • Position anywhere in layout
Display product description with flexible behavior.Settings:Behaviour:
  • Plain (default) - Standard text display
  • Row (Accordion) - Collapsible accordion
  • Tab - Tab interface
Heading:
  • Custom heading for description section
  • Optional (leave blank to hide)
Truncated Lines:
  • Range: 0-5 lines (default: 3)
  • Show “Read more” link if exceeds
  • 0 = no truncation, show all
Use accordion or tab behavior for long descriptions to keep page compact and scannable.
Add custom text anywhere in product layout.Settings:Text: Custom text contentText Style:
  • Link - Styled as link/hyperlink
  • Body - Standard body text
Link to Resource:
  • None - No link
  • Type - Links to product type page
  • Vendor - Links to vendor/brand page
Use Cases:
  • Shipping information
  • Return policy link
  • Brand story
  • Care instructions
  • Certifications/badges
Display product SKU (Stock Keeping Unit).
  • Automatically pulls from product variant
  • Updates when variant changes
  • Useful for B2B, technical products
  • No settings (automatic)
Display product price.Settings:Show Price Extra Info:
  • Type: Checkbox (default: enabled)
  • Shows sale price, compare-at price
  • Tax information
  • Unit pricing (if applicable)
  • Payment term preview
Price Display:
  • Current price (large, prominent)
  • Compare-at price (strikethrough if on sale)
  • “Sale” or “On Sale” badge
  • Price per unit (if configured)

​
Block Layout Strategy

Recommended Order

  1. Title - Product name (H1)
  2. Price - Pricing with sale info
  3. Variant Picker - Size, color selection
  4. Inventory Notice - Stock urgency
  5. Buy Buttons - Add to cart, dynamic checkout
  6. Description - Product details (accordion/tab)
  7. Content Tabs - Shipping, size guide, care
  8. Pickup Availability - In-store options
  9. Collapsible Content - Additional FAQs, specs
  10. @app - Reviews at bottom

Mobile Optimization

  • Keep critical blocks above fold (title, price, buy button)
  • Use accordions/tabs to reduce scroll
  • Enable actions bar for sticky purchase
  • Show tags on mobile for discovery
  • Test actual devices for layout
Product Image Specs:
  • Minimum resolution: 2048x2048px
  • Aspect ratio: Consistent across all images (square or 3:4)
  • File format: JPG (photos) or PNG (graphics/transparency)
  • File size: Under 500KB each (compress)
  • Quality: High-resolution for zoom feature
Image Sequence:
  1. Main product image (front view)
  2. Alternative angles (side, back, top)
  3. Detail shots (texture, materials, features)
  4. Lifestyle/use images (product in context)
  5. Size/scale reference
  6. Color variations (if applicable)
6-12 images is ideal. Too few and customers lack confidence. Too many and page loads slowly.
Enable Thumbnails When:
  • 4+ product images
  • Customers need quick navigation
  • Visual merchandising priority
  • Desktop browsing important
Skip Thumbnails When:
  • 1-3 images only
  • Mobile-first audience
  • Minimal design aesthetic
  • Page speed critical
Shopify Supports:
  • YouTube/Vimeo embeds
  • Direct video uploads
  • 3D models (GLB format)
  • 360-degree spin images
Best Practices:
  • Place video after 2-3 images (not first)
  • Keep videos under 60 seconds
  • Mute by default
  • Provide play/pause controls
  • 3D models for complex products
Product videos can increase conversions 80%+. Show product in use, key features, and scale.

​
Variant Selection Best Practices

Buttons Layout:
  • Best for: 2-8 options per type
  • Examples: S, M, L, XL or Red, Blue, Green
  • Visual, easy to scan
  • Shows all options at glance
Dropdowns Layout:
  • Best for: 10+ options
  • Examples: 20 sizes, many colors
  • Saves space
  • Searchable (type to find)
Stacked Layout:
  • Vertical button layout
  • Good for image swatches
  • Mobile-friendly
  • Visual emphasis
For color variants, use image swatches (color thumbnails) instead of text buttons for better UX.
Strategy:
  • Assign variant-specific images in Shopify Admin
  • Image updates when variant selected
  • Show product in selected color
  • Reduces confusion
Setup:
  1. Upload images for each color variant
  2. In Shopify Admin → Products → [Product] → Media
  3. Click image → Select variant association
  4. Image auto-displays when variant chosen
Best Practices:Visual Indicators:
  • Strike-through sold out options
  • Gray out unavailable variants
  • “Sold Out” label overlay
  • Hide completely (not recommended - shows range)
Back in Stock Notifications:
  • Enable “Back in Stock” in variant picker setting
  • Collect customer emails
  • Auto-notify when restocked
  • Capture lost sales
Keep sold-out variants visible (but disabled) to show full product range and collect restock emails.

​
Use Cases

Fashion Store

Buttons variant picker, 8 lifestyle images, size guide page, content tabs for materials/care

Electronics

Dropdowns for tech specs, video demo, detailed tabs (specs, warranty, support), SKU display

Subscription Product

Purchase options block, benefits tabs, inventory notice for urgency

Gift Card

Amount variants as buttons, gift recipient form enabled, minimal description

Handmade Goods

Artisan images, collapsible content for story/process, inventory notice (limited quantity)

B2B Wholesale

SKU prominent, quantity discounts in tabs, pickup availability for warehouse locations

​
Quick Summary

  • Purpose: Individual product detail page template
  • Layout: Flexible block-based (drag & drop blocks)
  • Media: Advanced gallery with thumbnails, aspect ratios, object fit
  • Core Blocks: Title, price, variants, description, buy buttons (limit 1 each)
  • Content Blocks: Tabs (4 max), collapsibles (unlimited), custom liquid
  • Features: Inventory notices, pickup availability, selling plans, dynamic checkout
  • Customization: 14 block types, media controls, alignment, color schemes
  • Settings: Media layout, thumbnails, object fit, actions bar, alignment
Product content (title, price, images, description, variants) is managed in Shopify Admin → Products. This template controls how that content displays, not the content itself.