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.
This section manages the product gallery, media display, thumbnails, variant selection, purchase options, and all content blocks that appear on individual product pages.
Control how product media displays across devices and how customers interact with your product images.
Layout on 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
Layout on 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
Aspect ratio
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
Fit viewport works only with slideshow and carousel layouts on desktop.
Media object fit
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
This setting is not effective with the gallery aspect ratio set to Auto.
Slider auto height
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.
Transparent background
Enable to make product media backgrounds transparent. Backgrounds will automatically match the background color defined in the Gallery color scheme setting.
Zoom behavior
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
Video controls
Enable playback controls for product videos. Works only for uploaded videos, not YouTube or Vimeo embeds.
Enable video controls to allow customers to pause, play, and control video playback directly.
Adaptive ratio & auto height
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
Use adaptive ratio when your product images have varying aspect ratios.
Image vertical alignment
Control the vertical positioning of product images in the gallery:
Manage how customers navigate through product media.
Display arrows
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
Display pagination
Choose the pagination style:
None - Hide pagination
Dynamic, Dots, Line - Show pagination controls in the selected style
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.
Configure special features and color schemes for the product gallery.
Media gallery info
Enter info text to display over the media gallery. This text can provide additional context or details about the product media.
As seen on metafield
Enter the namespace and key for a product metafield to display images as ‘As seen on’ content. Example: theme.as_seen_on
Gallery color scheme
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.
Show tags on mobile
Display product tags on mobile devices. This helps mobile users discover related products and categories.
Breadcrumbs
Show navigation breadcrumbs on desktop devices. Breadcrumbs help customers understand their location within your store and improve navigation.
Breadcrumbs are displayed on desktop only by default.
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.
Basic blocks
Ratings
Purchase
Content
Essential blocks for displaying core product information.
Back button
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
Breadcrumbs
Add a breadcrumb navigation trail to help customers understand their location within your store.
Title
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
Price
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
Description
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
SKU
Display the product SKU (Stock Keeping Unit) on the product page.
SKU must be added to the product in Shopify admin to appear here.
Available settings:
Bottom spacing - Choose the bottom spacing of the block: No, S, M, L, XL
Divider
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
Blocks for displaying product ratings and reviews.
Product rating
Display the product rating and number of reviews. To display a rating, add a product rating app. Learn more.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
Feature rating
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
Blocks related to product variants, purchasing, and checkout.
Variant picker
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
Use buttons for 2-5 variants. Switch to dropdowns for products with many options to avoid overwhelming the page.
Purchase options
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
To display subscription information, a subscription plan must be selected first.
Available settings:
Bottom spacing - Choose the bottom spacing of the block: No, S, M, L, XL
Buy buttons
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
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
Bottom spacing - Choose the bottom spacing of the block: No, S, M, L, XL
Enable dynamic checkout to increase conversions with one-click payment options.
Inventory notice
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
Set inventory threshold to create urgency without revealing exact stock levels that might discourage purchases.
Pre-order
Display a pre-order option on the product page when enabled.
Use Grid layout on desktop for products with multiple angles. Slideshow works better for products with fewer, high-quality images.
Enable sticky content
Keep purchase options visible while customers scroll through product images on desktop to reduce friction in the buying process.
Organize blocks logically
Place essential information (title, price, variants) at the top. Add supplementary content (tabs, rich text) below purchase buttons.
Use thumbnail navigation
Display thumbnails on both desktop and mobile for products with multiple images to improve navigation and user experience.
Leverage zoom functionality
Enable zoom for products where details matter (jewelry, clothing, electronics). Use “On click” for cleaner interface.
Size guides matter
Always add size guides for apparel products. Link to a dedicated page with detailed measurements to reduce returns.
Show inventory wisely
Set inventory threshold to create urgency (e.g., 10 items) without revealing exact stock levels that might discourage purchases.
Test variant display
Use buttons for 2-5 variants. Switch to dropdowns for products with many options to avoid overwhelming the page.
Transparent backgrounds work best with professional product photography on solid colors. Test thoroughly to ensure backgrounds don’t appear inconsistent across images.
