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

> Configure your product detail page with flexible media galleries, variant pickers, and dynamic content blocks

The Product information template (main-product) controls how individual products display on your store. It provides extensive customization for media galleries, product details, purchasing options, and informational content through a flexible block system.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/mojave/main-product-overview.png" alt="Product page overview" />
</Frame>

## What this section controls

* Product media gallery layouts (grid, slider, mobile carousel)
* Video autoplay and controls
* Sticky product information behavior
* Product title, price, SKU, and variants
* Add to cart and dynamic checkout buttons
* Collapsible product details and pop-ups
* Related products and ratings
* Inventory notices and pickup availability
* Media description metadata block

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    In your Shopify admin, go to **Online Store > Themes** and click **Customize** on your active theme.
  </Step>

  <Step title="Navigate to a product page">
    Use the page selector dropdown at the top center to select **Products** and choose any product to preview.
  </Step>

  <Step title="Locate the template">
    The "Product information" section controls the main product template. Additional sections can be added above or below it in the product template.
  </Step>
</Steps>

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/mojave/main-product-location.png" alt="Product information section location" />
</Frame>

## Template settings

<Tabs>
  <Tab title="Media Gallery">
    <AccordionGroup>
      <Accordion title="Gallery layout on desktop">
        Choose how product images display on desktop devices:

        * **Grid**: All images displayed in a grid layout, supporting the media description block
        * **Slider with thumbnails**: Main large image with thumbnail navigation below
        * **Grid with large first item**: First image displayed large, remaining images in grid below

        **Selection guidance**:

        * **Grid**: Best for showcasing multiple detailed product views, allows media description
        * **Slider**: Traditional e-commerce layout, familiar user experience
        * **Grid with large first item**: Emphasizes hero image while showing additional views
      </Accordion>

      <Accordion title="Gallery layout on mobile">
        Control mobile gallery behavior independently from desktop:

        * **Carousel** (default): Swipeable horizontal carousel with dots or thumbnails
        * **Slider**: Vertical sliding with pagination controls

        Mobile layouts automatically optimize for touch interaction and smaller screens.
      </Accordion>

      <Accordion title="Gallery pagination style on mobile">
        Choose pagination indicators for mobile gallery:

        * **Thumbnails**: Small thumbnail images for navigation
        * **Progress bar** (default): Linear progress indicator showing scroll position
        * **Navigation**: Arrow buttons for advancing through images

        Progress bar provides the cleanest, least intrusive experience.
      </Accordion>

      <Accordion title="Gallery size on desktop">
        Control the width ratio between media gallery and product information:

        * **Extra Large**: Maximum width for media, narrow info column
        * **Large** (default): Balanced 60/40 or 65/35 split
        * **Half-sized**: Even 50/50 split between media and info

        **Sizing considerations**:

        * Large product catalogs with many images → Extra Large or Large
        * Detailed product information → Half-sized for more info space
        * Apparel/visual products → Extra Large emphasizes imagery
      </Accordion>

      <Accordion title="Adaptive media ratio">
        When enabled, the media container adjusts to match each image's natural aspect ratio instead of using a fixed ratio for all images.

        **Benefits**: Displays images at their intended proportions without cropping
        **Considerations**: Can create uneven gallery appearance if images have varying ratios

        Recommended when all product images share similar aspect ratios.
      </Accordion>

      <Accordion title="Media autoplay">
        Control automatic video playback behavior:

        * **None** (default): Videos require manual play
        * **First video**: Only the first video autoplays
        * **All videos**: Every video autoplays when scrolled into view

        **Important limitations**:

        * Autoplaying all videos impacts page performance and site speed
        * YouTube/Vimeo don't allow multiple videos from same host playing simultaneously
        * If you have multiple videos from one host, use "None" or "First video" only

        **Best practices**: Use "First video" if hero video is critical, otherwise use "None" for performance.
      </Accordion>

      <Accordion title="Loop video">
        Makes videos repeat continuously after finishing. Enable this when autoplay is set to "First video" or "All videos" for seamless playback.

        Looping works best with short product demonstration videos under 30 seconds.
      </Accordion>

      <Accordion title="Video controls">
        Shows play/pause and timeline controls for videos.

        **Note**: Only works for videos hosted on Shopify, not external YouTube or Vimeo embeds.

        Disable for cleaner autoplay experience, enable for customer control over playback.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Product Info">
    <AccordionGroup>
      <Accordion title="Enable sticky product info on scroll">
        When enabled (default), the shorter area between media gallery and product information stays fixed while scrolling.

        **Behavior logic**:

        * If media gallery is shorter → media sticks while scrolling
        * If product info is shorter → info sticks while scrolling

        **Benefits**:

        * Keeps add to cart button always visible on long pages
        * Maintains context while viewing extensive product images
        * Improves conversion by keeping purchase options accessible

        Highly recommended to keep enabled for better user experience.
      </Accordion>

      <Accordion title="Show price when sold out">
        Controls whether price displays for sold-out products. Disabled by default.

        **When to enable**:

        * You want to show pricing even when unavailable
        * Price context helps customers decide to sign up for back-in-stock notifications
        * Transparency about pricing regardless of availability

        **When to disable**:

        * Focus attention on "Sold Out" status rather than price
        * Reduce customer frustration seeing price of unavailable items
      </Accordion>

      <Accordion title="Details style">
        Choose between Style 1 (default) or Style 2 for visual presentation of product information area.

        Style variants affect spacing, typography, and layout of product details. Test both to see which better matches your brand aesthetic.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Media Description">
    <AccordionGroup>
      <Accordion title="About media descriptions">
        The media description block displays metadata about your product images below the gallery. **Only visible when gallery layout is set to "Grid"** (not available with slider layouts).

        Use this feature to provide technical specifications, material information, or photography credits alongside product images.
      </Accordion>

      <Accordion title="Media description">
        Main heading or introductory text for the media description block.

        Example: "Product Specifications" or "Material & Care Details"
      </Accordion>

      <Accordion title="Description items (1-5)">
        Add up to 5 label/value pairs to display structured information:

        **Each item has two fields**:

        * **Label**: The descriptor (e.g., "Material:", "Dimensions:", "Weight:")
        * **Value**: The corresponding information (e.g., "100% Organic Cotton", "12" x 8" x 4"", "2.5 lbs")

        **Common use cases**:

        * Material composition and care instructions
        * Product dimensions and weight
        * Color accuracy notes
        * Photography credits or model information
        * Manufacturing origin or certifications

        **Item 1**: Label + Value\
        **Item 2**: Label + Value\
        **Item 3**: Label + Value\
        **Item 4**: Label + Value\
        **Item 5**: Label + Value

        Leave unused items blank - they won't display.
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Block settings

Build your product page by adding blocks for different types of content. Blocks can be dragged to reorder.

<Tabs>
  <Tab title="Core Content Blocks">
    <AccordionGroup>
      <Accordion title="Title block">
        Displays the product title/name. Limit 1 per product page.

        No configuration required - automatically pulls from product.title field. Position this block where you want the product name to appear, typically at the top of the product info column.
      </Accordion>

      <Accordion title="SKU block">
        Shows the product SKU (Stock Keeping Unit) code. Limit 1 per product page.

        Automatically displays the selected variant's SKU. Useful for customer reference, inventory tracking, or B2B stores where SKU visibility is important.
      </Accordion>

      <Accordion title="Text block">
        Add custom text content with styling options. Unlimited blocks allowed.

        **Configuration**:

        * **Text**: Enter your content (default: "Text block")
        * **Text style**: Choose appearance:
          * **Link**: Styled as clickable link
          * **Body**: Standard body text
          * **Uppercase**: All caps text
        * **Link to products**: Optionally link to filtered collection:
          * **None**: Plain text
          * **Type**: Links to all products of same type
          * **Vendor**: Links to all products from same vendor

        **Use cases**:

        * Brand name or designer attribution
        * Product category or collection reference
        * Short promotional taglines
        * Custom badges or labels
      </Accordion>

      <Accordion title="Price block">
        Displays product pricing including compare-at prices and sale indicators. Limit 1 per product page.

        **Automatic features**:

        * Regular and sale price display
        * Strike-through for compare-at pricing
        * Discount percentage calculation
        * Currency formatting
        * Unit pricing (when applicable)

        **Note**: If an @app block (like product ratings) is placed directly after the price block, it will be right-aligned alongside the price (except when subscription options are present).
      </Accordion>

      <Accordion title="Product rating block">
        Shows product star rating and review count. Limit 1 per product page.

        **Configuration**:

        * **Rating**: Set default rating (0-5 stars, 0.5 increments, default: 3.5)
          * Set to 0 to hide the default rating display

        **Requirements**: Install a product rating/review app for live ratings. Without an app, displays the configured default rating.

        Popular rating apps: Judge.me, Loox, Stamped.io, Yotpo

        Learn more: [Product rating block documentation](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#product-rating-block)
      </Accordion>

      <Accordion title="@app block">
        Integration point for third-party app blocks. Unlimited blocks allowed.

        Apps that support product page blocks will appear in the block list. Common examples:

        * Review and rating apps (Judge.me, Loox)
        * Wishlist apps
        * Size recommendation tools
        * 3D viewers or AR apps
        * Custom product options apps
        * Subscription apps

        No configuration needed - added automatically when compatible apps are installed.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Purchase Blocks">
    <AccordionGroup>
      <Accordion title="Variant picker block">
        Displays product options/variants (size, color, style, etc.). Limit 1 per product page.

        **Configuration**:

        * **Title**: Internal name for the block (default: "Variant picker") - helps identify it in the block list
        * **Make variants clickable**: When enabled, customers can click sold-out variants
          * Useful for back-in-stock notification integrations
          * Allows customers to select and sign up for alerts on specific variants
        * **Size guide page**: Select a page containing size guide content
          * Opens in a modal popup when customers click the size guide link
          * **Requirement**: Must configure "Size name" in **Theme Settings → Products → Size guide**
          * Create a dedicated page with size chart information

        **Variant display**: Automatically renders all product options as dropdowns, swatches, or buttons based on theme settings.
      </Accordion>

      <Accordion title="Buy buttons block">
        Add to cart button and dynamic checkout options. Limit 1 per product page.

        **Configuration**:

        * **Show quantity**: Display quantity selector (enabled by default)
        * **Show quantity label**: Add "Quantity:" label text above selector
        * **Quantity type**: Layout style:
          * **Inline** (default): Quantity selector integrated with add to cart button
          * **Separate**: Quantity selector on separate line above button
        * **Show dynamic checkout buttons**: Display express checkout options (enabled by default)
          * Shows PayPal, Apple Pay, Google Pay, Shop Pay based on enabled payment methods
          * Customers skip cart and go directly to checkout
          * [Learn more about dynamic checkout](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)
        * **Show recipient information form for gift cards**: Enable gift card scheduling features
          * Allows buyers to schedule gift card delivery
          * Add personal message
          * Specify recipient email
          * Only appears for gift card products
          * [Learn more about gift card recipient fields](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)
      </Accordion>

      <Accordion title="Inventory notice block">
        Display low stock warnings to create urgency. Limit 1 per product page.

        **Configuration**:

        * **Inventory threshold**: Set stock level for notice (1-50 products, default: 5)
          * Shows "Only X left in stock!" when inventory drops below threshold
          * Only displays when inventory is tracked and below threshold
          * Doesn't show for products with inventory not tracked

        **Best practices**:

        * Set threshold based on your typical order volume (5-10 works for most stores)
        * Position near buy buttons to create urgency
        * Honest scarcity messaging builds trust and encourages purchases
      </Accordion>

      <Accordion title="Pickup availability block">
        Show local pickup availability at retail locations. Limit 1 per product page.

        **Configuration**:

        * **Boxed**: Display in boxed visual style

        **Requirements**:

        * Local pickup must be configured in Shopify Settings → Shipping
        * Store locations must be added with inventory

        Automatically displays available pickup locations and current stock levels at each location.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Information Blocks">
    <AccordionGroup>
      <Accordion title="Collapsible row block">
        Create expandable/collapsible sections for product details. Unlimited blocks allowed.

        **Configuration**:

        * **Open by default**: Start expanded (enabled by default)
        * **Hide on Gift card products**: Don't show for gift cards (enabled by default)
        * **Heading**: Section title (e.g., "Shipping Information", "Care Instructions")
        * **Show content from product description**: Pull from product description field
          * Overwrites manual content and page content when enabled
        * **Content from product - Type**: Choose which part of description to use:
          * **All product content**: Everything from product description
          * **Content above the delimiter**: Everything before `----` in description
          * **Content below the delimiter**: Everything after `----` in description
          * Requires adding `----` delimiter in product description field
        * **Content**: Manual rich text content (overridden if using product description)
        * **Content from page**: Pull content from a dedicated page

        **Common uses**:

        * Shipping & Returns policy
        * Size & Fit guide
        * Care Instructions
        * Materials & Sustainability
        * Warranty Information

        **Content strategy**: Use the `----` delimiter in product descriptions to split content between multiple collapsible rows automatically.
      </Accordion>

      <Accordion title="Pop-up block">
        Create clickable link that opens content in modal popup. Unlimited blocks allowed.

        **Configuration**:

        * **Link label**: Text for clickable link (e.g., "Size Guide", "Shipping Details")
        * **Show content from product description**: Pull from product description
        * **Content from product - Type**: Same delimiter options as collapsible rows
        * **Content**: Manual rich text content
        * **Content from page**: Pull from dedicated page

        **Difference from collapsible rows**:

        * Pop-ups open in modal overlay (take focus, dim background)
        * Collapsible rows expand inline (stay in page flow)

        **Use pop-ups for**:

        * Detailed size charts or measurement guides
        * Extensive care or warranty information
        * Content that would disrupt page flow if expanded inline
        * Information that benefits from focused attention
      </Accordion>

      <Accordion title="Related products block">
        Display complementary/recommended products. Limit 1 per product page.

        **Configuration**:

        * **Title**: Heading for related products section (e.g., "You may also like", "Complete the look")

        **Product selection**: Uses Shopify's Recommendations API with complementary products algorithm.

        **Customization**: Products can be customized through the **Search & Discovery** app in Shopify admin.

        * Manually select specific products
        * Adjust algorithm parameters
        * Control recommendation logic

        [Learn more about complementary products](https://help.shopify.com/en/manual/online-store/search-and-discovery/product-recommendations#complementary-products)
      </Accordion>

      <Accordion title="Custom liquid block">
        Add custom Liquid code for advanced customizations. Unlimited blocks allowed.

        **Configuration**:

        * **Custom liquid**: Enter Liquid code or app snippets

        **Use cases**:

        * Embed app snippets that don't have dedicated blocks
        * Create custom product badges or labels
        * Display metafields or custom product data
        * Build unique product page features
        * Add tracking or analytics code

        **Requirements**: Understanding of Liquid templating language and Shopify's product object structure.

        [Liquid documentation](https://shopify.dev/docs/api/liquid)
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Optimize gallery layout" icon="image">
    Use Grid layout when showcasing detailed product features with media descriptions. Use Slider for traditional e-commerce clean look with many images.
  </Card>

  <Card title="Enable sticky product info" icon="thumbtack">
    Keep this enabled so add to cart button stays visible while customers scroll through product images. Significantly improves mobile conversion.
  </Card>

  <Card title="Strategic video autoplay" icon="play">
    Use "First video" autoplay sparingly for critical product demos. Avoid "All videos" due to performance impact. Always enable loop with autoplay.
  </Card>

  <Card title="Organize with collapsible rows" icon="bars-staggered">
    Use 3-5 collapsible rows for detailed information (Shipping, Returns, Care, Materials, Warranty). Start with most important open by default.
  </Card>

  <Card title="Leverage product description delimiter" icon="scissors">
    Add `----` in product descriptions to split content across multiple collapsible rows automatically. Reduces manual content entry per product.
  </Card>

  <Card title="Position blocks strategically" icon="layer-group">
    Standard order: Title → Price → Rating → Variant Picker → Buy Buttons → Collapsible Rows. Drag to reorder based on your priorities.
  </Card>

  <Card title="Use inventory notices wisely" icon="triangle-exclamation">
    Set threshold to 5-10 items. Too high seems inauthentic, too low may not trigger often enough. Position near buy buttons for maximum urgency.
  </Card>

  <Card title="Provide size guides" icon="ruler">
    Add size guide page for apparel. Reduces returns significantly. Use popup instead of collapsible row for detailed charts requiring focus.
  </Card>

  <Card title="Enable dynamic checkout" icon="bolt">
    Keep dynamic checkout buttons enabled. Customers using PayPal/Apple Pay prefer direct checkout. Improves conversion for express checkout users.
  </Card>

  <Card title="Configure related products" icon="link">
    Use Search & Discovery app to curate complementary products. Manual curation performs better than algorithm alone for cross-selling.
  </Card>
</CardGroup>