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

> Customize the layout and features of your product pages.

Product pages display detailed information about individual products, including images, descriptions, pricing, and purchasing options. You can customize the gallery layout, thumbnails, navigation, sticky elements, and content blocks to enhance the shopping experience and make it easier for customers to find and buy products.

## What this section controls

This section manages the product gallery, media display, thumbnails, variant selection, purchase options, and all content blocks that appear on individual product pages.

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Navigate to Products">
    In the left sidebar, click **Products** then select **Default product**.
  </Step>

  <Step title="Configure settings">
    Adjust gallery layout, media options, and add or remove content blocks as needed.
  </Step>

  <Step title="Preview changes">
    Use the preview to see how your product page looks on different devices before publishing.
  </Step>
</Steps>

## Key settings

<Tabs>
  <Tab title="Gallery">
    ### Gallery layout

    Control how product media displays across devices and how customers interact with your product images.

    <AccordionGroup>
      <Accordion title="Layout on desktop" icon="desktop">
        Choose how product media are displayed on desktop devices:

        * **Grid** - Display media in a grid format
        * **Slideshow** - Show one media item at a time with navigation controls
        * **Carousel** - Display media in a sliding carousel format
      </Accordion>

      <Accordion title="Layout on mobile" icon="mobile">
        Choose how product media are displayed on mobile devices:

        * **Slideshow** - Show one media item at a time with navigation controls
        * **Carousel** - Display media in a sliding carousel format
      </Accordion>

      <Accordion title="Aspect ratio" icon="expand">
        Choose how product media are displayed:

        * **Fit viewport** - Media are resized to fit the viewport
        * **Auto** - Display media in their original aspect ratio without being cropped
        * **Custom options** - Select from predefined aspect ratio options

        <Note>Fit viewport works only with slideshow and carousel layouts on desktop.</Note>
      </Accordion>

      <Accordion title="Media object fit" icon="image">
        Choose how product media fit within their containers:

        * **Cover** - Media fill the container, cropping if necessary
        * **Contain** - Media are fully visible within the container, with possible empty space

        <Note>This setting is not effective with the gallery aspect ratio set to Auto.</Note>
      </Accordion>

      <Accordion title="Slider auto height" icon="arrows-up-down">
        Enable to adjust the slider height automatically for each slide's media. Use only if product media have different aspect ratios, as it overrides your set aspect ratio settings.
      </Accordion>

      <Accordion title="Transparent background" icon="droplet">
        Enable to make product media backgrounds transparent. Backgrounds will automatically match the background color defined in the Gallery color scheme setting.
      </Accordion>

      <Accordion title="Zoom behavior" icon="magnifying-glass">
        Choose how zoom works on product media:

        * **None** - Zoom functionality is disabled
        * **On click** - Customers can click on a media to see a zoomed-in view
        * **Button** - A button appears to trigger the zoom functionality
      </Accordion>

      <Accordion title="Video controls" icon="play">
        Enable playback controls for product videos. Works only for uploaded videos, not YouTube or Vimeo embeds.

        <Tip>Enable video controls to allow customers to pause, play, and control video playback directly.</Tip>
      </Accordion>

      <Accordion title="Adaptive ratio & auto height" icon="up-down-left-right">
        Optimize gallery sizing for different image ratios:

        * **None** - Fixed height for all media
        * **Adaptive ratio** - Adjusts to image proportions to prevent letterboxing
        * **Auto height** - Dynamic height based on content

        <Tip>Use adaptive ratio when your product images have varying aspect ratios.</Tip>
      </Accordion>

      <Accordion title="Image vertical alignment" icon="up-down">
        Control the vertical positioning of product images in the gallery:

        * **Top** - Align images to the top
        * **Center** - Center images vertically
        * **Bottom** - Align images to the bottom
      </Accordion>

      <Accordion title="Media gallery pagination" icon="ellipsis">
        Show image pagination dots on mobile devices:

        * **None** - No pagination display
        * **Over gallery** - Overlaid on images
        * **Under gallery** - Below images

        <Note>This setting applies to mobile view only.</Note>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Thumbnails">
    ### Thumbnail settings

    Configure how thumbnail images appear alongside the main product gallery.

    <AccordionGroup>
      <Accordion title="Display thumbnails" icon="images">
        Choose whether to display:

        * **None** - Thumbnails are not displayed
        * **Desktop** - Thumbnails appear next to the main media on desktop devices
        * **Mobile** - Thumbnails appear below the main media on mobile devices
        * **Both** - Thumbnails appear on both desktop and mobile devices
      </Accordion>

      <Accordion title="Thumbnail image ratio" icon="square">
        Choose the aspect ratio for thumbnail images:

        * **Auto** - Display thumbnails in their original aspect ratio
        * **Custom options** - Select from predefined aspect ratio options
      </Accordion>

      <Accordion title="Thumbnail image object fit" icon="crop">
        Choose how thumbnail images fit within their containers:

        * **Cover** - Thumbnails fill the container, cropping if necessary
        * **Contain** - Thumbnails are fully visible within the container, with possible empty space

        <Note>This setting is not effective with the thumbnail image ratio set to Auto.</Note>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Navigation">
    ### Navigation controls

    Manage how customers navigate through product media.

    <AccordionGroup>
      <Accordion title="Display arrows" icon="arrows-left-right">
        Choose whether to display:

        * **None** - Arrows are not displayed
        * **Desktop** - Arrows appear on desktop devices
        * **Mobile** - Arrows appear on mobile devices
        * **Both** - Arrows appear on both desktop and mobile devices
      </Accordion>

      <Accordion title="Display pagination" icon="circle">
        Choose the pagination style:

        * **None** - Hide pagination
        * **Dynamic**, **Dots**, **Line** - Show pagination controls in the selected style

        <Note>Pagination is available only on mobile. It is disabled when thumbnails are shown, and enabled when neither arrows nor thumbnails are active to maintain accessibility.</Note>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Layout">
    ### Layout & positioning

    Control the overall layout structure and spacing of the product page.

    <AccordionGroup>
      <Accordion title="Sticky content" icon="thumbtack">
        Enable to keep product details (such as title, price, and purchase options) visible while scrolling through product media on desktop devices.
      </Accordion>

      <Accordion title="Sticky add to cart bar" icon="cart-shopping">
        Enable to keep the add to cart bar visible at the top of the screen when the main add to cart button is out of view.
      </Accordion>

      <Accordion title="Gallery width" icon="ruler-horizontal">
        Choose the width of the product gallery on desktop (S, M, L). The gallery is automatically optimized for mobile.
      </Accordion>

      <Accordion title="Gallery position" icon="left-right">
        Choose the position of the product gallery on desktop:

        * **Start** - Display the gallery before the product details
        * **End** - Display the gallery after the product details

        <Note>The gallery is automatically optimized for mobile.</Note>
      </Accordion>

      <Accordion title="Space between gallery and content" icon="arrows-left-right-to-line">
        Choose the spacing between the product gallery and product details on desktop:

        * **No** - No extra space
        * **S, M, L, XL** - Increasing levels of spacing between the gallery and content
      </Accordion>

      <Accordion title="Bottom spacing unit" icon="grip-lines">
        Set the spacing below each block. Value is in rem units (e.g., 1.6 = 1.6rem).
      </Accordion>

      <Accordion title="Content alignment" icon="align-center">
        Choose how the content inside the section is aligned:

        * **Start** - Align content to the start
        * **Center** - Align content to the center
        * **End** - Align content to the end
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Features">
    ### Additional features

    Configure special features and color schemes for the product gallery.

    <AccordionGroup>
      <Accordion title="Media gallery info" icon="circle-info">
        Enter info text to display over the media gallery. This text can provide additional context or details about the product media.
      </Accordion>

      <Accordion title="As seen on metafield" icon="tag">
        Enter the namespace and key for a product metafield to display images as 'As seen on' content. Example: `theme.as_seen_on`
      </Accordion>

      <Accordion title="Gallery color scheme" icon="palette">
        Choose a color scheme for the media gallery from your theme's predefined options. This setting affects elements like background color, text color, and button styles within the gallery.
      </Accordion>

      <Accordion title="Show tags on mobile" icon="tags">
        Display product tags on mobile devices. This helps mobile users discover related products and categories.
      </Accordion>

      <Accordion title="Breadcrumbs" icon="right-long">
        Show navigation breadcrumbs on desktop devices. Breadcrumbs help customers understand their location within your store and improve navigation.

        <Note>Breadcrumbs are displayed on desktop only by default.</Note>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Section">
    ### Section-level settings

    Control the overall appearance and spacing of the product page section.

    <AccordionGroup>
      <Accordion title="Section width" icon="left-right">
        Maximum width of the product section:

        * **Page** - Contained width (standard page width)
        * **Fluid** - Wider container
        * **Full** - Full browser width
      </Accordion>

      <Accordion title="Color scheme" icon="palette">
        Select the color scheme for the product page section. Choose from your theme's predefined color schemes (e.g., scheme-1, scheme-2).
      </Accordion>

      <Accordion title="Spacing top" icon="arrow-up-to-line">
        Padding above the product section:

        * **No** (0), **S** (1), **M** (2), **L** (4), **XL** (6)
      </Accordion>

      <Accordion title="Spacing bottom" icon="arrow-down-to-line">
        Padding below the product section:

        * **No** (0), **S** (1), **M** (2), **L** (4), **XL** (6)
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Block settings

Each block type offers unique configuration options to control how content appears on your product pages. Add, remove, or reorder blocks to customize the product page layout.

<Tabs>
  <Tab title="Basic blocks">
    Essential blocks for displaying core product information.

    <AccordionGroup>
      <Accordion title="Back button" icon="arrow-left">
        Add a button that allows customers to navigate back from the product page.

        **Available settings:**

        * **Button style** - Choose the button style: Filled or Text
        * **Button label** - Enter the text to display on the button (default: "Go Back")
        * **Display on mobile** - Choose whether the button appears on mobile devices: Top bar or On media
        * **Show on** - Choose the devices where the button is shown: Desktop, Mobile, or Both
      </Accordion>

      <Accordion title="Breadcrumbs" icon="right-long">
        Add a breadcrumb navigation trail to help customers understand their location within your store.
      </Accordion>

      <Accordion title="Title" icon="heading">
        Display the product title on the product page.

        **Available settings:**

        * **Heading size** - Choose the size of the product title: XS, S, M, L, XL
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Price" icon="dollar-sign">
        Display the product price on the product page.

        **Available settings:**

        * **Show tax information** - Display product tax details next to the price
        * **Show shipping information** - Display product shipping details next to the price
        * **Show additional information** - Enter any extra information you'd like to display next to the price
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Description" icon="align-left">
        Display the product description or variant-specific content.

        **Available settings:**

        * **Behaviour** - Choose how the description is displayed: Plain or Collapsible
        * **Heading** - Overwrite the default heading of the block with a custom heading
        * **Text truncate line limit** - Set the number of lines before the text is truncated (set to 0 to disable)
        * **Icon** - Choose an icon (e.g., theme-box). Leave blank to hide the icon
        * **Custom icon** - Upload a custom image to replace the icon
        * **Metafield for product variant** - Enter the related metafield namespace and key to display variant-specific content
        * **Show block content after variant specific content** - Enable to display the block content below the variant-specific content
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="SKU" icon="barcode">
        Display the product SKU (Stock Keeping Unit) on the product page.

        <Note>SKU must be added to the product in Shopify admin to appear here.</Note>

        **Available settings:**

        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Divider" icon="minus">
        Add a visual separator line between blocks to improve content organization and readability.

        **Available settings:**

        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Ratings">
    Blocks for displaying product ratings and reviews.

    <AccordionGroup>
      <Accordion title="Product rating" icon="star">
        Display the product rating and number of reviews. To display a rating, add a product rating app. [Learn more](https://help.shopify.com/en/manual/online-sales-channels/shop/product-reviews).

        **Available settings:**

        * **Rating** - Set default rating value (1-5) if no reviews are available
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Feature rating" icon="chart-simple">
        Display a feature rating with customizable labels and styles.

        **Available settings:**

        * **Heading** - Add an optional heading above the feature rating
        * **Rating** - Set the rating value as a number (e.g., 7)
        * **Scale max** - Define the maximum value of the scale (e.g., 10)
        * **Rating type** - Choose how the rating is displayed: Progress or Single
        * **First label** - Add a label for the lowest point on the scale (e.g., Small)
        * **Middle label** - Add a label for the midpoint on the scale (e.g., Medium)
        * **Last label** - Add a label for the highest point on the scale (e.g., Large)
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Purchase">
    Blocks related to product variants, purchasing, and checkout.

    <AccordionGroup>
      <Accordion title="Variant picker" icon="list-check">
        Let customers select product variants.

        **Available settings:**

        * **Make variants clickable** - Allow out-of-stock variants to remain clickable

        **Variants display:**

        * **Display as** - Choose how variants are displayed: Dropdowns or Buttons
        * **Variant options with thumbnails** - Enable to show variant options as thumbnails when the option name includes keywords like "Color", "Material", etc.

        **Gift card settings:**

        * **Show gift card prices in options** - Display prices for gift card denominations in variant picker. Applies only to gift card products

        **Size guide:**

        * **Size guide content** - Display the content of a specific page in a popup for size guidance
        * **Size option label** - Define which variant option triggers the size guide popup (e.g., Size)
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL

        <Tip>Use buttons for 2-5 variants. Switch to dropdowns for products with many options to avoid overwhelming the page.</Tip>
      </Accordion>

      <Accordion title="Purchase options" icon="credit-card">
        Display purchase and subscription options for the product.

        **Subscription info settings:**

        * **Show subscription title on info** - Display the subscription title within the info section
        * **Show subscription information** - Enter additional subscription details
        * **Show subscription policy link** - Display a link to the subscription policy

        <Note>To display subscription information, a subscription plan must be selected first.</Note>

        **Available settings:**

        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Buy buttons" icon="cart-plus">
        Display the add to cart button, quantity selector, and optional checkout features.

        **Available settings:**

        * **Show quantity** - Display a quantity selector next to the add to cart button
        * **Quantity and buttons layout** - Choose how the quantity selector and buttons are arranged: Inline or Separate
        * **Show dynamic checkout buttons** - Display accelerated checkout options (e.g., PayPal, Apple Pay) based on the customer's available payment methods. [Learn more](https://help.shopify.com/en/manual/payments/accelerated-checkout)
        * **Show recipient information form for gift cards** - Allow buyers to schedule gift card delivery and include a personal message for gift card products. [Learn more](https://help.shopify.com/en/manual/products/gift-card-products)
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL

        <Tip>Enable dynamic checkout to increase conversions with one-click payment options.</Tip>
      </Accordion>

      <Accordion title="Inventory notice" icon="box">
        Display stock availability information on the product page.

        **Available settings:**

        * **Inventory threshold** - Set the exact stock level (e.g., 15) at which the inventory notice is shown. When stock drops to or below this number, the notice appears
        * **Notice just text** - Hide the exact stock quantity and display only the low-stock message for urgency without revealing specific numbers
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL

        <Tip>Set inventory threshold to create urgency without revealing exact stock levels that might discourage purchases.</Tip>
      </Accordion>

      <Accordion title="Pre-order" icon="clock">
        Display a pre-order option on the product page when enabled.

        <Note>See [pre-order setup](/themes/release/products/pre-order) for details on configuring pre-orders.</Note>

        **Available settings:**

        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Pickup availability" icon="store">
        Display pickup availability information for products when enabled in your store.

        <Warning>Pickup availability requires **Local pickup** to be turned on in your Shopify settings.</Warning>

        **Available settings:**

        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Badges" icon="award">
        Display [product badges](/themes/release/products/product-badges) such as custom labels, discounts, or sold-out status.

        **Available settings:**

        * **Show custom badges** - Display custom product badges
        * **Show discount badges** - Display discount badges when a product is on sale
        * **Show sold out badges** - Display a badge when a product is out of stock
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Content">
    Flexible content blocks for additional product information and media.

    <AccordionGroup>
      <Accordion title="Complementary products" icon="layer-group">
        Display complementary product recommendations.

        <Note>Complementary products are customizable through the Shopify Search & Discovery app. [Learn more](https://help.shopify.com/en/manual/online-store/storefront-search/search-and-discovery-recommendations).</Note>

        **Available settings:**

        * **Heading** - Set a custom heading for the block (e.g., You may also like)
        * **Icon** - Choose an icon (e.g., theme-box). Leave blank to hide the icon
        * **Max products to show** - Set the maximum number of complementary products displayed (e.g., 4)
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Content grid" icon="grid">
        Display a grid of content items with optional heading and icon.

        **Available settings:**

        * **Heading** - Set a heading for the content grid (e.g., Free climate compensated shipping)
        * **Icon** - Choose an icon (e.g., theme-box). Leave blank to hide the icon
        * **Custom icon** - Upload a custom image to replace the default icon
      </Accordion>

      <Accordion title="Content block" icon="square">
        Add a block with heading, text, icon, or content from a page or metafield.

        **Available settings:**

        * **Heading** - Set a heading for the content block
        * **Text** - Add custom text content
        * **Icon** - Choose an icon (e.g., theme-box). Leave blank to hide the icon
        * **Custom icon** - Upload a custom image to replace the default icon
        * **Page** - Select a page to display its content inside the block
        * **Metafield for product variant** - Enter the related metafield namespace and key to display variant-specific content
        * **Show block content after variant specific content** - Enable to display the block content below the variant-specific content
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Content tabs" icon="folder">
        Organize content into tabbed sections on the product page. Supports up to 3 tabs.

        **Available settings:**

        * **Default active tab** - Define which tab is active by default (e.g., 1)
        * **Tab description** - Choose where the product description appears as a tab: None, Start, or End
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL

        **Tab settings** (for each tab):

        * **Heading** - Set the heading for the tab
        * **Icon** - Choose an icon (e.g., theme-box). Leave blank to hide the icon
        * **Custom icon** - Upload a custom image to replace the default icon
        * **Text** - Add custom text content
        * **Page** - Select a page to display its content inside the tab
      </Accordion>

      <Accordion title="Rich text" icon="text">
        Add a block of formatted text to the product page.

        **Available settings:**

        * **Text** - Add custom text content
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Text" icon="font">
        Add text content with optional icons, links, and variant-specific content.

        **Available settings:**

        * **Text** - Add custom text content
        * **Text before link** - Add text that appears before the type or vendor links
        * **Icon** - Choose an icon (e.g., theme-check). Leave blank to hide the icon
        * **Link to products** - Choose how to link to products (e.g., by type or vendor):
          * **Text only** - No link to products, display plain text
          * **Type** - Provide links to filter collection results by product type
          * **Vendor** - Provide links to filter collection results by product vendor
        * **Secondary animated text** - Add animated secondary text. Works only when Text only option is selected
        * **Metafield for product variant** - Enter the related metafield namespace and key to display variant-specific content
        * **Show block content after variant specific content** - Enable to display the block content below the variant-specific content
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>

      <Accordion title="Custom liquid" icon="code">
        Add app snippets or Liquid code to create advanced customizations.

        <Warning>Custom code can affect layout and performance. Test changes in a draft theme before publishing.</Warning>

        **Available settings:**

        * **Custom liquid** - Add Liquid/HTML code or render app snippets. Supports Shopify objects and filters
        * **Bottom spacing** - Choose the bottom spacing of the block: No, S, M, L, XL
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Common use cases

Product pages serve different needs based on your product type. Here are proven configurations for common scenarios:

<Tabs>
  <Tab title="Fashion & Apparel">
    **Recommended setup for clothing, shoes, and accessories:**

    * **Gallery:** Carousel layout with thumbnails on both devices
    * **Variant picker:** Button style with thumbnail options for colors
    * **Blocks:** Size guide, variant picker, buy buttons, content tabs for care instructions
    * **Features:** Sticky content enabled, zoom on click for fabric details

    This setup showcases product details while keeping purchase options accessible as customers browse multiple angles.
  </Tab>

  <Tab title="Electronics">
    **Recommended setup for tech products and gadgets:**

    * **Gallery:** Grid layout with thumbnails for product shots and diagrams
    * **Variant picker:** Dropdowns for configurations (storage, color, model)
    * **Blocks:** SKU display, content tabs for specifications, pickup availability
    * **Features:** Under gallery pagination, collapsible description for technical details

    Organized layout that presents technical information clearly without overwhelming customers.
  </Tab>

  <Tab title="Subscription Products">
    **Recommended setup for products with recurring purchases:**

    * **Gallery:** Slideshow layout (fewer images needed)
    * **Variant picker:** Buttons for subscription intervals
    * **Blocks:** Purchase options block with subscription details, custom text for benefits
    * **Features:** Subscription policy link enabled, detailed recurring payment messaging

    Clear communication of subscription terms and benefits to reduce customer confusion.
  </Tab>

  <Tab title="Gift Cards">
    **Recommended setup for digital gift cards:**

    * **Gallery:** Single image or simple slideshow
    * **Variant picker:** Show gift card prices in options, dropdown for denominations
    * **Blocks:** Recipient form enabled, custom messaging about delivery
    * **Features:** Minimal layout, focus on purchase flow

    Streamlined experience that guides customers through gift card selection and personalization.
  </Tab>

  <Tab title="Pre-order Items">
    **Recommended setup for upcoming products:**

    * **Gallery:** High-quality showcase (grid or carousel)
    * **Blocks:** Pre-order block prominent, inventory notice, custom availability date text
    * **Features:** Badge blocks for "Coming Soon", complementary products for alternatives
    * **Layout:** Large media width to emphasize visuals

    Builds anticipation while setting clear expectations about availability and delivery.
  </Tab>

  <Tab title="High-value Items">
    **Recommended setup for premium or luxury products:**

    * **Gallery:** Large media width, grid layout, zoom enabled
    * **Blocks:** Rating block, detailed description (collapsible), content tabs for authenticity
    * **Features:** Sticky content enabled, trust badges via text blocks
    * **Layout:** Generous spacing, center alignment for premium feel

    Professional presentation that builds trust and justifies premium pricing.
  </Tab>

  <Tab title="Variable Products">
    **Recommended setup for products with many options:**

    * **Gallery:** Variant options with thumbnails for visual variants
    * **Variant picker:** Mixed approach (buttons for colors, dropdowns for sizes)
    * **Blocks:** Variant-specific descriptions via metafields, content grid for features
    * **Features:** Make variants clickable, size guide for measurements

    Helps customers navigate complex options without confusion or decision fatigue.
  </Tab>

  <Tab title="Multi-location Stores">
    **Recommended setup for businesses with physical locations:**

    * **Gallery:** Standard carousel or grid
    * **Blocks:** Pickup availability block prominent, inventory notice per location
    * **Features:** Location-based inventory display, breadcrumbs for navigation
    * **Layout:** Sticky add-to-cart bar for convenience

    Clear inventory visibility across locations improves customer confidence and reduces inquiries.
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Optimize gallery layout" icon="images">
    Use Grid layout on desktop for products with multiple angles. Slideshow works better for products with fewer, high-quality images.
  </Card>

  <Card title="Enable sticky content" icon="thumbtack">
    Keep purchase options visible while customers scroll through product images on desktop to reduce friction in the buying process.
  </Card>

  <Card title="Organize blocks logically" icon="list">
    Place essential information (title, price, variants) at the top. Add supplementary content (tabs, rich text) below purchase buttons.
  </Card>

  <Card title="Use thumbnail navigation" icon="grid-2">
    Display thumbnails on both desktop and mobile for products with multiple images to improve navigation and user experience.
  </Card>

  <Card title="Leverage zoom functionality" icon="magnifying-glass">
    Enable zoom for products where details matter (jewelry, clothing, electronics). Use "On click" for cleaner interface.
  </Card>

  <Card title="Size guides matter" icon="ruler">
    Always add size guides for apparel products. Link to a dedicated page with detailed measurements to reduce returns.
  </Card>

  <Card title="Show inventory wisely" icon="box">
    Set inventory threshold to create urgency (e.g., 10 items) without revealing exact stock levels that might discourage purchases.
  </Card>

  <Card title="Test variant display" icon="list-check">
    Use buttons for 2-5 variants. Switch to dropdowns for products with many options to avoid overwhelming the page.
  </Card>
</CardGroup>

<Warning>
  Transparent backgrounds work best with professional product photography on solid colors. Test thoroughly to ensure backgrounds don't appear inconsistent across images.
</Warning>

## Related guides

<CardGroup cols={2}>
  <Card title="Product badges" icon="award" href="/themes/release/products/product-badges">
    Configure custom labels, discount badges, and sold-out indicators
  </Card>

  <Card title="Pre-order setup" icon="clock" href="/themes/release/products/pre-order">
    Enable and configure pre-order functionality for upcoming products
  </Card>

  <Card title="Product groups" icon="layer-group" href="/themes/release/products/product-groups">
    Group related products and manage product collections
  </Card>

  <Card title="Theme settings" icon="palette" href="/themes/release/theme-settings">
    Customize global theme colors, typography, and layout options
  </Card>
</CardGroup>