> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Page (PDP)

> Product detail page template with flexible block-based layout, media gallery, variants, and purchase options

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

<Tabs>
  <Tab title="Media Gallery">
    <AccordionGroup>
      <Accordion title="Product Media Layout" icon="images">
        Control media gallery layout style:

        * **Full** (default) - Full-width media, max impact
        * **Partial** - Partial width, more compact

        **Full Layout:**

        * Media takes maximum available space
        * Best for lifestyle imagery
        * Visual impact priority
        * Works well for fashion, home decor

        **Partial Layout:**

        * More compact media presentation
        * Better balance with product info
        * Good for technical products with detailed specs
      </Accordion>

      <Accordion title="Slides with Thumbnails" icon="grip-vertical">
        Display thumbnail navigation for media gallery:

        * **None** (default) - No thumbnails, arrows/dots only
        * **Desktop and Mobile** - Thumbnails on all devices
        * **Only Mobile** - Thumbnails on mobile, not desktop

        <Tip>
          Thumbnails help customers navigate multiple product images quickly. Enable for products with 4+ images.
        </Tip>
      </Accordion>

      <Accordion title="Product Media Object Fit" icon="expand">
        How main product images scale:

        * **Cover** (default) - Fill container, may crop
        * **Contain** - Fit entire image, may show background

        **Cover:**

        * No whitespace around images
        * Consistent container size
        * May crop edges
        * Best for uniform image sizes

        **Contain:**

        * Shows full image
        * May show background color
        * Preserves entire image
        * Best for mixed aspect ratios
      </Accordion>

      <Accordion title="Thumbnail Object Fit" icon="clone">
        How thumbnail images scale:

        * **Cover** - Fill thumbnail, may crop
        * **Contain** (default) - Fit entire image in thumbnail

        <Tip>
          Contain works well for thumbnails to show full preview. Cover creates uniform thumbnail grid.
        </Tip>
      </Accordion>

      <Accordion title="Adaptive Ratio & Auto Height" icon="arrows-up-down">
        Control media gallery height behavior:

        * **Default** - Fixed aspect ratio (set below)
        * **Adaptive Ratio** - Height adapts to each image
        * **Slider Auto Height** - Slider adjusts per slide

        **When to Use:**

        * **Default:** Consistent product image sizes
        * **Adaptive Ratio:** Mixed aspect ratios, preserve original dimensions
        * **Slider Auto Height:** Varying image heights in slideshow
      </Accordion>

      <Accordion title="Media Aspect Ratio" icon="rectangle">
        Set fixed aspect ratio (visible when Adaptive Ratio = Default):

        * **Default** - Theme default ratio
        * **1:1** - Square
        * **2:3** - Portrait
        * **3:4** - Standard portrait
        * **4:5** - Tall portrait

        <Note>
          This setting only appears when "Adaptive Ratio & Auto Height" is set to "Default".
        </Note>
      </Accordion>

      <Accordion title="Slider Background Transparent" icon="fill">
        Make slider background transparent:

        * **Type:** Checkbox
        * **Default:** Disabled (has background)

        <Tip>
          Enable for products photographed on white/transparent backgrounds to blend with page color scheme.
        </Tip>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Controls">
    <AccordionGroup>
      <Accordion title="Show Tags on Mobile" icon="tags">
        Display product tags on mobile devices:

        * **Type:** Checkbox
        * **Default:** Enabled

        <Note>
          Tags help with product discovery and SEO.Desktop version typically shows tags; this controls mobile visibility.
        </Note>
      </Accordion>

      <Accordion title="Enable Actions Bar" icon="bars">
        Show sticky actions bar (add to cart, wishlist, etc.):

        * **Type:** Checkbox
        * **Default:** Enabled

        **Actions Bar Features:**

        * Sticky on scroll
        * Quick add to cart
        * Share buttons
        * Wishlist toggle (if enabled)
        * Price display

        <Tip>
          Actions bar improves mobile UX by keeping purchase buttons accessible while scrolling product details.
        </Tip>
      </Accordion>

      <Accordion title="Horizontal Alignment" icon="align-center">
        Align product information content:

        * **Left** - Left-aligned content
        * **Center** (default) - Centered content
        * **Right** - Right-aligned content

        <Note>
          This controls text alignment for product title, price, description, and other text elements.
        </Note>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Layout">
    <AccordionGroup>
      <Accordion title="Section Width" icon="left-right">
        * **Page** (default) - Contained within page margins
        * **Fluid** - Extends to container edges
        * **Full** - Full browser width
      </Accordion>

      <Accordion title="Color Scheme" icon="palette">
        * Select from available theme color schemes
        * **Default:** scheme-1
      </Accordion>

      <Accordion title="Spacing" icon="arrows-up-down">
        * **Top Spacing**: 0 (default), 1, 2, 4, or 6
        * **Bottom Spacing**: 0 (default), 1, 2, 4, or 6

        <Note>
          Default spacing is 0 for both, assuming product content fills the page naturally.
        </Note>
      </Accordion>

      <Accordion title="Borders" icon="border-top-left">
        * **None** (default)
        * **Top Border**
        * **Bottom Border**
        * **Both Borders**
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

***

## Blocks

<Tabs>
  <Tab title="Core Blocks">
    <AccordionGroup>
      <Accordion title="@app Block" icon="puzzle-piece">
        Embed app blocks from installed Shopify apps.

        * Review apps (Judge.me, Loox, Yotpo)
        * Size chart apps
        * Inventory apps
        * Trust badge apps
        * Customization apps

        <Note>
          Apps must support app blocks. Drag and position where desired in product layout.
        </Note>
      </Accordion>

      <Accordion title="Title Block (Limit 1)" icon="heading">
        Display product title.

        * Automatically pulls product name
        * Rendered as H1 (SEO-optimized)
        * No settings (automatic)
        * Position anywhere in layout
      </Accordion>

      <Accordion title="Description Block (Limit 1)" icon="align-left">
        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

        <Tip>
          Use accordion or tab behavior for long descriptions to keep page compact and scannable.
        </Tip>
      </Accordion>

      <Accordion title="Text Block" icon="font">
        Add custom text anywhere in product layout.

        **Settings:**

        **Text:** Custom text content

        **Text 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
      </Accordion>

      <Accordion title="SKU Block (Limit 1)" icon="barcode">
        Display product SKU (Stock Keeping Unit).

        * Automatically pulls from product variant
        * Updates when variant changes
        * Useful for B2B, technical products
        * No settings (automatic)
      </Accordion>

      <Accordion title="Price Block (Limit 1)" icon="dollar-sign">
        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)
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Purchase">
    <AccordionGroup>
      <Accordion title="Variant Picker Block (Limit 1)" icon="square-check">
        Allow customers to select product options (size, color, etc.).

        **Settings:**

        **Title:**

        * Custom heading for variant section
        * Default: "Variant picker"

        **Back in Stock:**

        * **Type:** Checkbox (default: disabled)
        * Show "Notify me" for out-of-stock variants
        * Collects emails for restock notifications

        **Variant Picker Layout:**

        * **Buttons** (default) - Clickable option buttons (e.g., S, M, L, XL)
        * **Dropdowns** - Select dropdowns for each option
        * **Stacked** - Buttons stacked vertically

        **Size Guide Page:**

        * Link to size guide page
        * "Size Guide" link appears next to size selector

        <Tip>
          Buttons work great for 2-6 options. Use dropdowns for many options (10+ sizes, 20+ colors).
        </Tip>
      </Accordion>

      <Accordion title="Purchase Options Block (Limit 1)" icon="repeat">
        Display selling plans (subscriptions, payment plans).

        * One-time purchase
        * Subscribe and save
        * Payment plans
        * Frequency selection
        * Discount display

        <Note>
          Requires selling plans configured in Shopify Admin. Only appears if product has selling plans.
        </Note>
      </Accordion>

      <Accordion title="Buy Buttons Block (Limit 1)" icon="cart-plus">
        Add to cart and checkout buttons.

        **Settings:**

        **Show Quantity:**

        * **Type:** Checkbox (default: enabled)
        * Show quantity selector
        * Increase/decrease buttons

        **Quantity Type:**

        * **Inline** (default) - Quantity + button together
        * **Separate** - Quantity above button

        **Show Dynamic Checkout:**

        * **Type:** Checkbox (default: enabled)
        * Apple Pay, Google Pay, Shop Pay buttons
        * Skip cart, direct to checkout

        **Show Gift Card Recipient:**

        * **Type:** Checkbox (default: disabled)
        * For gift card products
        * Collect recipient info during purchase

        <Tip>
          Dynamic checkout buttons can increase conversion by reducing friction. Keep enabled unless you need custom cart logic.
        </Tip>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Content">
    <AccordionGroup>
      <Accordion title="Content Tabs Block (Limit 4)" icon="folder-open">
        Create tabbed or accordion content sections (up to 4 tabs).

        **Global Settings:**

        * **Tabs Alignment:** Left, Center (default), Right
        * **Tabs Content Alignment:** Left, Center(default), Right

        **Each Tab (1-4):**

        **Show:** Enable/disable tab (checkbox)

        **Open by Default:** Auto-expand tab (checkbox)

        **Title:** Tab heading text

        **Content:** Rich text content

        **Page:** Or link to page for content

        **Tab 1 Special Features:**

        * **Show Product Content:** Include product description
        * **Product Content Type:**
          * All: Full product description
          * Above: Content before description
          * Below: Content after description

        **Common Tab Uses:**

        * Tab 1: Description + Details
        * Tab 2: Shipping & Returns
        * Tab 3: Size Guide
        * Tab 4: Care Instructions

        <Tip>
          Use tabs to organize detailed information without overwhelming the page. Most customers prefer 2-3 tabs over one long page.
        </Tip>
      </Accordion>

      <Accordion title="Custom Liquid Block" icon="code">
        Add custom Liquid code for advanced functionality.

        * Custom HTML/Liquid
        * Metafield displays
        * Custom product data
        * Third-party integrations
        * Advanced customization

        <Warning>
          Requires Liquid knowledge. Incorrect code can break product page. Test thoroughly.
        </Warning>
      </Accordion>

      <Accordion title="Pickup Availability Block (Limit 1)" icon="store">
        Show in-store pickup availability.

        * Displays nearby store locations
        * Stock availability per location
        * Store hours and address
        * "Check other stores" link

        <Note>
          Requires Shopify POS or local inventory setup. Only shows if product has inventory at physical locations.
        </Note>
      </Accordion>

      <Accordion title="Inventory Notice Block (Limit 1)" icon="warehouse">
        Display low stock warnings.

        **Settings:**

        **Inventory Threshold:**

        * Range: 1-50 (default: 5)
        * Shows notice when stock below this number
        * Creates urgency

        **Notice Just Text:**

        * **Type:** Checkbox (default: disabled)
        * Text only (no icon/styling)
        * Subtle notification

        **Display Examples:**

        * "Only 3 left in stock!"
        * "Low stock - order soon"
        * "Limited availability"

        <Tip>
          Low stock notices create urgency and can increase conversions. Set threshold to 5-10 for best results.
        </Tip>
      </Accordion>

      <Accordion title="Collapsible Content Block" icon="caret-down">
        Add collapsible accordion sections (unlimited).

        **Settings:**

        **Heading:** Accordion heading text

        **Row Content:** Rich text content inside

        **Icon:** Optional custom icon image

        **Page:** Or link to page for content

        **Product File Section:**

        * **Label:** Custom label for file link
        * **Metafield:** Product metafield for file URL
        * Downloads PDFs, manuals, spec sheets

        **Common Uses:**

        * Shipping & Returns
        * Size Guide
        * Care Instructions
        * Materials& Specs
        * Warranty Information
        * FAQs

        <Tip>
          Use multiple collapsible blocks to organize detailed information. Customers can expand only what they need.
        </Tip>
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

***

## Block Layout Strategy

<CardGroup cols={2}>
  <Card title="Recommended Order" icon="list-ol">
    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
  </Card>

  <Card title="Mobile Optimization" icon="mobile">
    * 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
  </Card>
</CardGroup>

***

## Media Gallery Best Practices

<AccordionGroup>
  <Accordion title="Image Guidelines" icon="image">
    **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)

    <Tip>
      6-12 images is ideal. Too few and customers lack confidence. Too many and page loads slowly.
    </Tip>
  </Accordion>

  <Accordion title="When to Use Thumbnails" icon="grip">
    **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
  </Accordion>

  <Accordion title="Video & 3D Media" icon="video">
    **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

    <Tip>
      Product videos can increase conversions 80%+. Show product in use, key features, and scale.
    </Tip>
  </Accordion>
</AccordionGroup>

***

## Variant Selection Best Practices

<AccordionGroup>
  <Accordion title="Variant Display Strategy" icon="palette">
    **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

    <Tip>
      For color variants, use image swatches (color thumbnails) instead of text buttons for better UX.
    </Tip>
  </Accordion>

  <Accordion title="Variant Images" icon="images">
    **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
  </Accordion>

  <Accordion title="Sold Out Handling" icon="ban">
    **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

    <Tip>
      Keep sold-out variants visible (but disabled) to show full product range and collect restock emails.
    </Tip>
  </Accordion>
</AccordionGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Fashion Store" icon="shirt">
    Buttons variant picker, 8 lifestyle images, size guide page, content tabs for materials/care
  </Card>

  <Card title="Electronics" icon="laptop">
    Dropdowns for tech specs, video demo, detailed tabs (specs, warranty, support), SKU display
  </Card>

  <Card title="Subscription Product" icon="rotate">
    Purchase options block, benefits tabs, inventory notice for urgency
  </Card>

  <Card title="Gift Card" icon="gift">
    Amount variants as buttons, gift recipient form enabled, minimal description
  </Card>

  <Card title="Handmade Goods" icon="hand-sparkles">
    Artisan images, collapsible content for story/process, inventory notice (limited quantity)
  </Card>

  <Card title="B2B Wholesale" icon="briefcase">
    SKU prominent, quantity discounts in tabs, pickup availability for warehouse locations
  </Card>
</CardGroup>

***

## 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

<Note>
  Product content (title, price, images, description, variants) is managed in **Shopify Admin → Products**. This template controls **how** that content displays, not the content itself.
</Note>