Introduction
Product page displays detailed information about individual products, including images, descriptions, pricing, and purchasing options. Customizing the product page layout and features can enhance the shopping experience, making it easier for customers to find and buy products.
PATH: Online Store > Themes > Customize > Template Selector > Products > Default product
Settings
Gallery settings
| Setting | Description |
|---|
| Gallery 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.
|
| Gallery 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.
|
| Gallery 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. |
| Gallery 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 Auto. |
| Enable 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. |
| Enable 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.
|
Thumbnails settings
| Setting | Description |
|---|
| Display thumbnails | 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.
|
| Thumbnail image ratio | Choose the aspect ratio for thumbnail images:- Auto: Display thumbnails in their original aspect ratio.
- Custom options: Select from predefined aspect ratio options.
|
| Thumbnail image object fit | 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.
* This setting is not effective with the thumbnail image ratio Auto. |
Navigation settings
| Setting | Description |
|---|
| 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. |
Features settings
| Setting | Description |
|---|
| Media gallery info | Enter info text to display over the media gallery. This text can provide additional context or details about the product media. |
| Metafield for ‘As seen on’ | Enter the namespace and key for a product metafield to display images as ‘As seen on’ content. eg. 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. |
Layout & General settings
| Setting | Description |
|---|
| Enable sticky content on desktop | Enable to keep product details (such as title, price, and purchase options) visible while scrolling through product media on desktop devices. |
| Enable sticky add to cart bar | 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. |
| Product gallery width | Choose the width of the product gallery on desktop (S, M, L).
The gallery is automatically optimized for mobile. |
| Product gallery position | 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.
The gallery is automatically optimized for mobile. |
| Space between gallery and content on desktop | 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.
|
| Bottom spacing unit for the blocks | Set the spacing below each block. Value is in rem units (e.g., 1.6 = 1.6rem). |
| Content alignment | 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.
|
Blocks
Add a button that allows customers to navigate back from the product page.
| Setting | Description |
|---|
| Button style | Choose the button style: Filled or Text. |
| Button label | Enter the text to display on the button. Default is “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.
| Setting | Description |
|---|
| 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 |
Product rating
Display the product rating and number of reviews. To display a rating, add a product rating app. Learn more here.
| Setting | Description |
|---|
| 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.
| Setting | Description |
|---|
| 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 |
Price
Display the product price on the product page.
Setting
Description
Block bottom spacing
Choose the bottom spacing of the block: No, S, M, L, XL
Show tax information
Display product tax details below the price.
Show shipping information
Display product shipping details below the price.
Show additional information
Display any extra information below the price.
| Setting | Description |
|---|
| 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.
| Setting | Description |
|---|
| 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 (e.g., 3). Set to 0 to disable truncation. |
| 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 (e.g., theme.variant_metafield) to display variant-specific metafield 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 |
Variant picker
Let customers select product variants.
| Setting | Description |
|---|
| 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. |
| 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 |
Purchase options
Display purchase and subscription options for the product.
| Setting | Description |
|---|
| Subscription info settings | To display subscription information, a subscription plan must be selected first. |
| 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. |
| Bottom spacing | Choose the bottom spacing of the block: No, S, M, L, XL |
| Setting | Description |
|---|
| 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. Learn more. |
| Bottom spacing | Choose the bottom spacing of the block: No, S, M, L, XL |
Inventory notice
Display stock availability information on the product page.
| Setting | Description |
|---|
| Inventory threshold | Set the stock level (e.g., 15) at which the inventory notice is shown. |
| Don’t show quantity | Hide the exact stock quantity and display only the low-stock message. |
| Bottom spacing | Choose the bottom spacing of the block: No, S, M, L, XL |
Pre-order
Display a pre-order option on the product page when enabled.
| Setting | Description |
|---|
| Bottom spacing | Choose the bottom spacing of the block: No, S, M, L, XL |
Pickup availability
Display pickup availability information for products when enabled in your store.
Pickup availability requires Local pickup to be turned on in your Shopify settings.
| Setting | Description |
|---|
| 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.
| Setting | Description |
|---|
| Bottom spacing | Choose the bottom spacing of the block: No, S, M, L, XL |
Badges
Display product badges such as custom labels, discounts, or sold-out status.
| Setting | Description |
|---|
| 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 |
Complementary products
Display complementary product recommendations.
Complementary products are customizable through the Shopify Search & Discovery app. Learn more
here.
| Setting | Description |
|---|
| 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 |
Content grid
Display a grid of content items with optional heading and icon.
| Setting | Description |
|---|
| 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. |
Content block
Add a block with heading, text, icon, or content from a page or metafield.
| Setting | Description |
|---|
| 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 (e.g., theme.variant_metafield) 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 |
Content tabs
Organize content into tabbed sections on the product page. Supports up to 3 tabs.
| Setting | Description |
|---|
| 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 | Each tab includes the following options |
| 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. |
Rich text
Add a block of formatted text to the product page.
| Setting | Description |
|---|
| Text | Add custom text content. |
| Bottom spacing | Choose the bottom spacing of the block: No, S, M, L, XL |
Text
Add text content with optional icons, links, and variant-specific content.
| Setting | Description |
|---|
| 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 (e.g., theme.variant_metafield) 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 |
Custom liquid
Add app snippets or Liquid code to create advanced customizations.
Custom code can affect layout and performance. Test changes in a draft theme before publishing.
| Setting | Description |
|---|
| 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 |
