Product Page Template

The product page is where customers view individual product details, images, and make purchases. It's the most important page for converting visitors into customers, so proper setup is crucial for your store's success.

Overview

The product page displays product information in a two-column layout: product images on the left and product details on the right. You can customize the layout, add various content blocks, and arrange them to create the perfect shopping experience for your products.

Where to Use

The product page template (product.json) is automatically used for all products in your store. When customers click on a product from a collection, search results, or anywhere else, they'll see this template.

Note: There's also a product.quote.json template for products that require quotes instead of direct purchase. This documentation covers the default product page.

Blocks

Title Block

What it does: Displays the product title, vendor name, and SKU

Settings:

  • Title Size: Extra Large, 2X Large, 3X Large, 4X Large
  • Show Vendor: Display the product vendor/brand name
  • Show SKU: Display the product SKU code

Examples:

  • Large title (4X Large) with vendor for brand-focused products
  • Medium title (3X Large) with SKU for technical products
  • Standard title (2X Large) without vendor for simple products

Tips:

  • Use 3X Large or 4X Large for prominent product names
  • Show vendor when brand is important to your customers
  • Show SKU for B2B or technical products where customers need reference numbers
  • Only one title block can be added (limit: 1)

Price Block

What it does: Displays the product price, sale price (if applicable), and availability status

Settings:

  • Price Size: Extra Large, 2X Large, 3X Large, 4X Large
  • Show Availability: Display stock status (In Stock, Out of Stock, etc.)

Examples:

  • Large price (4X Large) for sale items to draw attention
  • Standard price (3X Large) with availability for most products
  • Price with compare-at price automatically shown when product is on sale

Tips:

  • Automatically shows compare-at price when product is on sale
  • Shows savings percentage when applicable
  • Availability status helps customers make quick decisions
  • Only one price block can be added (limit: 1)

Pickup Availability Block

What it does: Shows local pickup availability at your store locations

Settings: None (automatic)

Examples:

  • Shows "Available for pickup" when product is available at a location
  • Displays location information and pickup times
  • Only appears if pickup is enabled and product is available

Tips:

  • Only shows if you have pickup locations configured
  • Helps customers who prefer to pick up in-store
  • Only one pickup availability block can be added (limit: 1)

Description Block

What it does: Displays the product description content from Shopify

Settings:

  • Show Heading: Display a heading above the description
  • Heading: Custom heading text (default: "Description")

Examples:

  • Description with heading "Product Details" for clarity
  • Description without heading for seamless integration
  • Rich text formatting from product description is preserved

Tips:

  • Use rich text formatting in Shopify admin for better presentation
  • Add headings, lists, and formatting to make descriptions scannable
  • Only one description block can be added (limit: 1)
  • Block only shows if product has a description

Variant Picker Block

What it does: Allows customers to select product variants (size, color, material, etc.)

Settings:

  • Picker Type: Buttons or Dropdown
  • Swatch Shape: Circle, Square, or Rounded (applies to color options with buttons)
  • Show Unavailable: Show unavailable variants but crossed out

Examples:

  • Buttons with circle swatches for color variants (fashion products)
  • Dropdown for products with many size options
  • Buttons with square swatches for material variants

Tips:

  • Buttons: Better for visual variants (colors, sizes, styles) - easier to see and select
  • Dropdown: Better for many options (10+) or text-based variants
  • Circle swatches work best for color options
  • Show unavailable variants to let customers see all options
  • Only one variant picker block can be added (limit: 1)

Buy Buttons Block

What it does: Displays the "Add to Cart" button, quantity selector, and dynamic checkout options

Settings:

  • Show Quantity Selector: Allow customers to choose quantity
  • Show Payment Terms: Display payment terms (e.g., "4 interest-free payments")
  • Show Dynamic Checkout: Show Apple Pay, Google Pay, PayPal buttons
  • Border Radius: 0-24px (controls button corner rounding)
  • Add to Cart Button Text: Custom text (default: "Add to Cart")
  • Sold Out Button Text: Custom text (default: "Sold Out")

Examples:

  • Add to cart with quantity selector for products sold in multiples
  • Dynamic checkout enabled for faster mobile purchases
  • Payment terms shown for high-value items
  • Custom button text like "Add to Bag" or "Buy Now"

Tips:

  • Enable quantity selector for products customers buy in bulk
  • Enable dynamic checkout for faster conversions (especially mobile)
  • Show payment terms to reduce price sensitivity
  • Customize button text to match your brand voice
  • Only one buy buttons block can be added (limit: 1)

Share Block

What it does: Displays social media share buttons for the product

Settings:

  • Social Platforms: Enable/disable Facebook, X (Twitter), Pinterest, LinkedIn, Reddit, Telegram, WhatsApp, Instagram, Snapchat, TikTok, YouTube
  • Icon Size: Small, Medium, Large

Examples:

  • Facebook, X, and Pinterest enabled for most stores
  • All platforms enabled for maximum reach
  • Small icons for subtle sharing options

Tips:

  • Enable platforms your customers use most
  • Pinterest is great for visual products
  • Facebook and X are essential for most stores
  • Medium size is usually best for visibility
  • Only one share block can be added (limit: 1)

Trust Badges Block

What it does: Displays shipping and returns badges to build customer confidence

Settings:

  • Show Shipping Badge: Display shipping information
  • Shipping Title: Text (default: "Free Shipping")
  • Shipping Text: Details (default: "On orders over $50")
  • Show Returns Badge: Display returns information
  • Returns Title: Text (default: "Easy Returns")
  • Returns Text: Details (default: "30-day return policy")

Examples:

  • "Free Shipping" / "On orders over $50"
  • "Easy Returns" / "30-day return policy"
  • "Fast Delivery" / "Same-day shipping available"

Tips:

  • Build trust with clear, honest policies
  • Update text to match your actual policies
  • Place near buy buttons for maximum impact
  • Only one trust badges block can be added (limit: 1)

Collapsible Row Block

What it does: Creates an expandable/collapsible content section

Settings:

  • Heading: Section heading (e.g., "Shipping & Returns", "Materials", "Care Instructions")
  • Open by Default: Start expanded or collapsed
  • Text Content: Rich text content

Examples:

  • "Shipping & Returns" with policy details
  • "Product Specifications" with technical details
  • "Care Instructions" with washing/maintenance info
  • "Size Guide" with measurement charts
  • "FAQs" with common questions

Tips:

  • Use for additional information that doesn't need to be always visible
  • Keep headings short and descriptive
  • Use rich text formatting for better readability
  • Open by default for important information
  • You can add multiple collapsible row blocks

Custom Liquid Block

What it does: Allows you to add custom Liquid code for advanced customization

Settings:

  • Custom Liquid: Liquid code field

Examples:

  • Custom product badges or labels
  • Dynamic content based on product metafields
  • Custom product information displays
  • Integration with third-party apps

Tips:

  • For developers and advanced users
  • Test thoroughly before publishing
  • Use for custom functionality not available in other blocks
  • You can add multiple custom liquid blocks

Area Calculator Block

What it does: Displays a calculator for products with area coverage (e.g., flooring, tiles, paint)

Settings:

  • Show Area Calculator: Enable/disable (only shows if product has area_per_box metafield)

Examples:

  • Flooring products: calculates boxes needed for room dimensions
  • Tile products: calculates coverage area
  • Paint products: calculates gallons needed

Tips:

  • Only appears if product has area_per_box metafield set
  • Helps customers determine correct quantity
  • Reduces returns and customer confusion
  • Only one area calculator block can be added (limit: 1)

Manual Products Block

What it does: Displays manually selected related products

Settings:

  • Heading: Section heading (default: "You may also like")
  • Products: Select up to 12 products
  • Maximum Visible Items: 2-6 products before scrolling
  • Show Vendor: Display vendor name on product cards
  • Show Second Image on Hover: Display alternate product image
  • Image Ratio: Portrait, Square, Landscape, Auto

Examples:

  • "You may also like" with 4 complementary products
  • "Complete the Look" with matching accessories
  • "Frequently Bought Together" with related items

Tips:

  • Curate products that complement the current product
  • Current product is automatically excluded
  • Use for cross-selling and upselling
  • 3-4 visible items is usually optimal
  • You can add multiple manual products blocks

Settings

Layout

Image Width

  • What it does: Controls how much horizontal space product images take up
  • Options:
    • 33% - Narrow: More space for product information
    • 50% - Medium: Balanced layout (default)
    • 67% - Wide: More space for images
  • Default: 50%
  • Tip:
    • 33%: Best for text-heavy products, many options, detailed specs
    • 50%: Best for most products, balanced appearance
    • 67%: Best for visual products (fashion, art), image-focused display

Image Sizing

  • What it does: Controls how product images are displayed and cropped
  • Options:
    • Adapt to Image Size: Natural aspect ratio (default)
    • Square (1:1): Square images
    • Portrait (3:4): Tall images
    • Landscape (4:3): Wide images
    • Wide (16:9): Very wide images
  • Default: Adapt to image size
  • Tip:
    • Adapt: Best for varied product images, preserves original aspect ratio
    • Square: Good for consistent grid appearance
    • Portrait: Best for fashion, clothing, tall products
    • Landscape: Best for wide products, hero images
    • Wide: Best for banner-style images

Container Width

  • What it does: Controls the width of the product page container
  • Options:
    • Narrow: Constrained width for focused display
    • Full Width: Maximum width (default)
    • Wide: Extra wide display
  • Default: Full width
  • Tip:
    • Narrow: Best for focused, premium feel
    • Full Width: Best for most products, standard e-commerce
    • Wide: Best for large product displays

Colors

Color Scheme

  • What it does: Selects a color scheme for the product page
  • Controls background color, text colors, and button colors
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that complements your products and brand

Padding

Top Padding

  • What it does: Space above the product section
  • Range: 0-100px
  • Default: 40px
  • Tip: More padding creates more breathing room from header/navigation

Bottom Padding

  • What it does: Space below the product section
  • Range: 0-100px
  • Default: 40px
  • Tip: Adjust to balance spacing with related products or footer

How It Works

Layout Structure

The product page uses a two-column grid layout:

  • Left Column: Product images (gallery with thumbnails)
  • Right Column: Product information blocks (title, price, variants, etc.)

Block Order

Blocks appear in the order you add them, from top to bottom in the right column. You can:

  • Add blocks in any order
  • Reorder blocks by dragging
  • Remove blocks you don't need
  • Some blocks have limits (can only add one)

Product Images

Product images are automatically displayed from the product's image gallery. The image gallery includes:

  • Main product image
  • Additional product images
  • Thumbnail navigation
  • Zoom functionality (if enabled)
  • Image carousel on mobile

Variant Selection

When customers select variants:

  • Price updates automatically
  • Images update if variant has specific images
  • Availability updates based on variant stock
  • Add to cart button updates with selected variant

Related Products

By default, the product page includes a "Related Products" section below the main product. This section:

  • Shows products from the same collection
  • Displays 4 products by default
  • Can be customized in section settings
  • Can be removed if not needed

Common Use Cases

Standard E-commerce Product

  • Layout: 50% image width, balanced
  • Blocks: Title, Price, Variant Picker, Buy Buttons, Description, Trust Badges
  • Use Case: Most products with standard purchase flow

Visual Product (Fashion, Art)

  • Layout: 67% image width, image-focused
  • Blocks: Title, Price, Variant Picker (Buttons with swatches), Buy Buttons, Description, Share
  • Use Case: Products where images are the main selling point

Technical Product (Electronics, Tools)

  • Layout: 33% image width, info-focused
  • Blocks: Title, Price, Variant Picker (Dropdown), Buy Buttons, Description, Collapsible Rows (Specs, FAQs)
  • Use Case: Products with detailed specifications and technical information

Bulk/Quantity Product

  • Layout: 50% image width
  • Blocks: Title, Price, Variant Picker, Buy Buttons (with quantity), Description, Area Calculator (if applicable)
  • Use Case: Products sold in quantities (flooring, tiles, materials)

High-Value Product

  • Layout: 50% image width
  • Blocks: Title, Price, Buy Buttons (with payment terms), Description, Trust Badges, Collapsible Rows (Warranty, Returns)
  • Use Case: Expensive products requiring trust and payment options

Simple Product (No Variants)

  • Layout: 50% image width
  • Blocks: Title, Price, Buy Buttons, Description, Share
  • Use Case: Products with no options, single SKU

Tips & Best Practices

✅ Do's

  • Use high-quality images: Product images are crucial - use multiple angles and high resolution
  • Write detailed descriptions: Help customers understand what they're buying
  • Show all variants: Let customers see all available options
  • Enable dynamic checkout: Faster checkout increases conversions
  • Add trust badges: Build confidence with clear policies
  • Use collapsible rows: Organize additional information without cluttering
  • Test on mobile: Most customers shop on mobile - ensure great experience
  • Show availability: Help customers know stock status
  • Add related products: Increase average order value with cross-sells
  • Customize button text: Match your brand voice

❌ Don'ts

  • Don't skip descriptions: Always include product details
  • Don't use low-quality images: Professional photos are essential
  • Don't hide important info: Make key details visible
  • Don't forget variants: Show all product options
  • Don't skip trust badges: Build customer confidence
  • Don't clutter the page: Keep layout clean and organized
  • Don't forget mobile: Test on phones and tablets
  • Don't use generic button text: Customize to match your brand
  • Don't ignore related products: Use for cross-selling opportunities

Adding and Managing Blocks

Adding Blocks

  1. In the theme editor, navigate to a product page
  2. Click on the Product section
  3. Scroll to Blocks in the left sidebar
  4. Click Add block
  5. Choose a block type from the list
  6. Configure block settings
  7. Click Save

Reordering Blocks

  1. Click on a block in the left sidebar
  2. Use the ⋮⋮ (six dots) icon to drag and drop
  3. Move blocks up or down to change order
  4. Blocks appear top to bottom in the right column
  5. Click Save

Editing Block Settings

  1. Click on the block in the left sidebar
  2. Change settings as needed
  3. Changes appear instantly in the preview
  4. Click Save when done

Removing Blocks

  1. Click on the block in the left sidebar
  2. Scroll to the bottom of the block settings
  3. Click Remove block
  4. Confirm removal
  5. Click Save

Recommended Block Order

Standard Product Page

  1. Title - Product name first
  2. Price - Show pricing early
  3. Variant Picker - Let customers select options
  4. Buy Buttons - Purchase options
  5. Pickup Availability - Local pickup info (if applicable)
  6. Trust Badges - Build confidence
  7. Description - Product details
  8. Collapsible Rows - Additional info (FAQs, specs, care instructions)
  9. Share - Social sharing
  10. Area Calculator - If applicable (flooring, tiles, etc.)
  11. Manual Products - Related products

Visual Product (Fashion, Art)

  1. Title
  2. Price
  3. Variant Picker (Buttons with swatches)
  4. Buy Buttons
  5. Trust Badges
  6. Description
  7. Share (especially Pinterest)
  8. Manual Products

Technical Product

  1. Title
  2. Price
  3. Variant Picker (Dropdown)
  4. Buy Buttons
  5. Description
  6. Collapsible Rows (Specifications, FAQs, Warranty)
  7. Trust Badges
  8. Manual Products

Image Width Guide

33% - Narrow

When to Use:

  • ✅ Text-heavy products
  • ✅ Many product options/variants
  • ✅ Detailed specifications needed
  • ✅ Information is the priority

Benefits:

  • More space for product information
  • Better for long descriptions
  • More room for variant options
  • Better for technical products

50% - Medium (Recommended)

When to Use:

  • ✅ Most products
  • ✅ Balanced layout needed
  • ✅ Standard e-commerce
  • ✅ General use

Benefits:

  • Balanced image and info space
  • Works for most product types
  • Professional appearance
  • Good default choice

67% - Wide

When to Use:

  • ✅ Visual products (fashion, art, jewelry)
  • ✅ Products where images are key
  • ✅ Fewer product options
  • ✅ Image-focused display

Benefits:

  • Large, prominent images
  • Better for visual products
  • Showcase product details
  • More impactful visual presentation

Variant Picker Best Practices

Picker Type: Buttons

Best For:

  • Color variants (with swatches)
  • Size variants (S, M, L, XL)
  • Style variants
  • Visual options
  • Fewer options (2-8)

Benefits:

  • Visual selection
  • Easy to see all options
  • Better user experience
  • Faster selection

Picker Type: Dropdown

Best For:

  • Many options (10+)
  • Text-based variants
  • Technical specifications
  • When space is limited
  • Less visual options

Benefits:

  • Compact display
  • Good for many options
  • Clean appearance
  • Saves space

Swatch Shapes

  • Circle: Best for color swatches, modern look
  • Square: Clean, structured appearance
  • Rounded: Soft, friendly appearance

Buy Buttons Best Practices

Quantity Selector

Enable When:

  • ✅ Products sold in multiples
  • ✅ Bulk purchases common
  • ✅ Customers buy multiple items
  • ✅ Quantity affects price

Disable When:

  • ⚠️ Single-item purchases
  • ⚠️ Custom/one-of-a-kind items
  • ⚠️ Quote-based products

Dynamic Checkout

Enable When:

  • ✅ You accept Apple Pay, Google Pay, PayPal
  • ✅ You want faster checkout
  • ✅ Mobile customers important
  • ✅ Reducing cart abandonment

Benefits:

  • Faster checkout process
  • Reduced cart abandonment
  • Better mobile experience
  • One-click purchasing

Payment Terms

Enable When:

  • ✅ You offer payment plans (Shop Pay Installments, etc.)
  • ✅ Installment options available
  • ✅ Want to show affordability
  • ✅ High-value products

Benefits:

  • Shows payment flexibility
  • Can increase conversions
  • Reduces price sensitivity
  • Makes expensive items more accessible

Trust Badges Best Practices

Shipping Badge

What to Include:

  • Free shipping threshold
  • Shipping speed
  • Shipping options

Examples:

  • Title: "Free Shipping"
  • Text: "On orders over $50"
  • Title: "Fast Delivery"
  • Text: "Same-day shipping available"

Returns Badge

What to Include:

  • Return window
  • Return conditions
  • Return process

Examples:

  • Title: "Easy Returns"
  • Text: "30-day return policy"
  • Title: "Hassle-Free Returns"
  • Text: "Free returns within 30 days"

Collapsible Rows Use Cases

Common Uses

  1. Product Specifications

    • Technical details
    • Dimensions
    • Materials
    • Weight

  2. Care Instructions

    • Washing instructions
    • Maintenance tips
    • Storage guidelines
    • Cleaning methods

  3. FAQs

    • Common questions
    • Product-specific answers
    • Usage tips
    • Troubleshooting

  4. Shipping Information

    • Delivery times
    • Shipping methods
    • International shipping
    • Tracking information

  5. Size Guide

    • Size charts
    • Fit information
    • Measurement guides
    • Sizing recommendations

  6. Warranty Information

    • Warranty terms
    • Coverage details
    • Claim process

Area Calculator

How It Works

  • Automatic: Only shows if product has area_per_box metafield
  • Calculates: Boxes needed based on room dimensions
  • Helps: Customers determine correct quantity

Setting Up

  1. In Shopify admin, go to the product
  2. Add area_per_box metafield (e.g., "25 sq ft")
  3. Enter coverage area per box
  4. Add Area Calculator block to product page
  5. Calculator automatically appears
  6. Customers enter room dimensions
  7. Calculator shows boxes needed

Use Cases

  • Flooring products (tiles, hardwood, carpet)
  • Paint products (coverage per gallon)
  • Wallpaper (rolls needed)
  • Any product sold by area coverage

Examples

Example 1: Standard Product

Layout:

  • Image Width: 50%
  • Image Sizing: Adapt
  • Container Width: Full

Blocks:

  1. Title (3X Large, show vendor)
  2. Price (3X Large, show availability)
  3. Variant Picker (Buttons, circle swatches)
  4. Buy Buttons (quantity, dynamic checkout, payment terms)
  5. Trust Badges (shipping, returns)
  6. Description (with heading)
  7. Share (Facebook, X, Pinterest)
  8. Related Products (automatic)

Result: Balanced, standard product page for most products

Example 2: Visual Product (Fashion)

Layout:

  • Image Width: 67%
  • Image Sizing: Portrait
  • Container Width: Full

Blocks:

  1. Title (4X Large, show vendor)
  2. Price (3X Large)
  3. Variant Picker (Buttons, circle swatches for colors)
  4. Buy Buttons (quantity, dynamic checkout)
  5. Trust Badges
  6. Description
  7. Share (Facebook, X, Pinterest, Instagram)
  8. Manual Products ("Complete the Look")

Result: Image-focused, visual product display for fashion items

Example 3: Technical Product

Layout:

  • Image Width: 33%
  • Image Sizing: Adapt
  • Container Width: Narrow

Blocks:

  1. Title (3X Large, show SKU)
  2. Price (2X Large, show availability)
  3. Variant Picker (Dropdown)
  4. Buy Buttons (quantity, payment terms)
  5. Description
  6. Collapsible Row ("Specifications")
  7. Collapsible Row ("FAQs")
  8. Collapsible Row ("Warranty")
  9. Trust Badges
  10. Manual Products ("Related Products")

Result: Information-focused, detailed product page for technical products

Example 4: Bulk Product (Flooring)

Layout:

  • Image Width: 50%
  • Image Sizing: Square
  • Container Width: Full

Blocks:

  1. Title (3X Large)
  2. Price (3X Large)
  3. Variant Picker (Buttons)
  4. Area Calculator
  5. Buy Buttons (quantity enabled)
  6. Description
  7. Trust Badges
  8. Collapsible Row ("Installation Guide")
  9. Manual Products ("You may also need")

Result: Calculator-enabled product page for bulk/area-based products

Troubleshooting

Images Not Showing

  • Check: Verify product has images in Shopify admin
  • Check: Ensure images are published and not hidden
  • Check: Test with different products
  • Check: Verify image files are not corrupted

Variants Not Working

  • Check: Verify variants are set up in product settings
  • Check: Ensure variant picker block is added
  • Check: Test variant selection in preview
  • Check: Verify variant inventory is set correctly

Buy Button Not Working

  • Check: Verify product is available (not sold out)
  • Check: Check inventory settings in Shopify admin
  • Check: Test add to cart functionality
  • Check: Verify product is not set to "Draft"
  • Check: Ensure product is published

Description Not Showing

  • Check: Verify description block is added
  • Check: Ensure product has description in Shopify admin
  • Check: Check block settings (show heading, etc.)
  • Check: Verify description is not empty

Price Not Updating with Variants

  • Check: Ensure variant picker block is added
  • Check: Verify variants have different prices set
  • Check: Test variant selection
  • Check: Ensure price block is added

Related Products Not Showing

  • Check: Verify related products section exists in template
  • Check: Ensure products are in same collection
  • Check: Check section settings (products to show, etc.)
  • Check: Verify collection has multiple products

Area Calculator Not Showing

  • Check: Verify product has area_per_box metafield
  • Check: Ensure metafield value is set correctly
  • Check: Verify area calculator block is added
  • Check: Check block settings (show calculator enabled)

Blocks Not Appearing in Order

  • Check: Verify block order in theme editor
  • Check: Drag and drop blocks to reorder
  • Check: Save changes after reordering
  • Check: Refresh preview

Related Templates

  • Product Quote Page (product.quote.json) - For products requiring quotes
  • Collection Page - Browse multiple products
  • Cart Page - Shopping cart
  • Search Page - Search results

Related Sections

  • Related Products - Automatically shows related products
  • Product Spotlight - Feature products in other pages
  • Featured Collection - Showcase product collections

Next Steps: