The product page section in a Shopify theme is a core component that displays detailed information about a specific product. This section supports displaying a variety of elements such as images, variations, prices, descriptions, add to cart buttons, and other relevant information.
Below are some general settings to configure the media section on the product page:
Show first media: Displays the first product media by default.
Select variants from carousel images: Select a variant by navigating carousel images. ( Available from version 2.2.0 onwards)
Enable video autoplay: Automatically plays product videos.
Enable video looping: Repeats the video continuously.
Image ratio: Adjust the image ratio as needed. If you don’t want the image to be cropped, select Adapt to image.
Width: Adjust the width of the media column.
Space between media and product info: Control the spacing between the media column and the product information column.
Position: Set the media column to the left or right side.
Type: Choose between Grid or Carousel layout for product media.
Carousel: Displays thumbnail images in a slideshow.
Pagination: Defines the navigation style for the thumbnails: Dots (displays navigation dots) or Thumbnails (displays slide preview images).
Position: Defines where the pagination is displayed: Left, Bottom, or Right.
Mobile pagination: Defines the navigation style on mobile devices: Dots (displays navigation dots) or Thumbnails (displays slide preview images).
Stamp: Allows you to add a text or image stamp, rotate it, and display it in the top-right corner of the media.
Image zoom: Controls how customers zoom and view product images, including:
Image zoom: Defines how images are zoomed or opened - Hover zoom, Click to open lightbox, Hover zoom and click to open lightbox, or No zoom.
Image hover zoom type: Defines the zoom style with the options as Inner, Magnifier, or External.
Zoom level of zoom hover: Modify the magnification level when hovering.
Max zoom level of lightbox: Edit the maximum magnification when viewing images in the lightbox.
Zoom is not available for videos or 3D models.
Carousel navigation: Controls the navigation arrows for the carousel, including Navigation style (Default or Group). You can also Enable custom color to set the Background and Color.
Navigation is hidden on mobile devices.
In the Media part, you can add a Testimonial block to display it below the media column.
From version 2.2.0 onwards, you can add avatars for testimonials.
Vendor: Displays the vendor of the product.
Rating: Controls the display of the product’s customer rating and review information. To display ratings, a product rating app must be added.
Title color depends on the active color scheme. To change the color, you can go to the selected Color Scheme → Text color.
Price depends on the active color scheme and uses the text color (slightly lighter). You can also customise the sale price via Color Scheme → Sale Price color
It is a visual element used to divide different sections of product information. It may appear as a horizontal line between sections to make the product page easier to read.
Displays the product description that you have added for the product in Shopify, with options including:
Full: Shows the entire description.
Read more: Shows a shortened description with a Read more option.
Collapsible: Allows the description to be expanded or collapsed.
Drawer: Opens the description in a side drawer.
Displays a countdown for limited-time promotions, including the Heading (sets the title), Coupon code (displays the discount code), and Countdown (sets the offer’s end date and time).
Remember to create the discount code in Shopify & Display 999 days max.
The variant picker is where product variants are displayed. It supports multiple styles such as swatch, block, dropdown, etc.
Swatch: To configure color/image swatches, please follow this document.
Size chart: You can also customize the size chart. Please refer to this document for setup instructions.
The Buy Buttons block includes:
Quantity selector
Add to cart button
Dynamic checkout button
The dynamic checkout button allows customers to go directly from the product page to checkout and pay immediately for that product. It also supports accelerated checkout methods such as Shop Pay, Apple Pay, and Google Pay.
The branded buttons display depending on the payment methods that you've activated in your payment settings. If no third-party accelerated checkout methods are enabled in your store, only the unbranded Buy it now button will be displayed.
Please refer to this document to learn more about the dynamic checkout button.
Displays the current stock availability of a product and provides optional low-stock indicators to create a sense of urgency.
This feature allows customers to pick up online orders at a physical store location. To display pickup availability, you need to configure in-store pickup in your Shopify admin. Document
Please follow Shopify’s official guide for more details
Displays icons with short text descriptions, with basic settings for controlling the layout, style, scrolling speed, and direction.
Shows related products that can be purchased together, with settings for the heading, products to show, rotation, and card appearance.
This block allows you to add a Share option and an Ask a Question feature, making it easy for customers to share products or send inquiries. It mainly provides settings for the contact form and social sharing, including their position and available input options.
This block allows you to add accordion-style content to show additional product details, with settings for the layout as Collapsible and Drawer, heading, row content, and dividers.
Open collapsible by default — available from version 2.3.0
If you would like to customise content using Liquid code, you can use this block to add your own custom Liquid.
This block allows you to add a link to an external or internal page, with settings for the link label, URL, text style, button style, and whether to open the link in a new tab.
This block allows you to collect additional customisation information from customers for a product, with settings for the input type (Text/Checkbox/Option), required fields, character limit, and whether the information appears in the cart and checkout.
The Popup block lets you add clickable text that opens a pop-up containing content from a selected Shopify page.
Kindly make sure that the Shopify page has the content.
Displays the product SKU when a SKU is available.
Displays tax and shipping information on the product page. A shipping policy must be added in Shopify settings for this block to work properly.
Allows you to display product badges on the product page. Make sure the desired badges are enabled in the Theme Settings.
If you would like to customize different badges via metafields, feel free to check the guideline further here.
Allows customers to sign up for a notification when a sold-out product becomes available again. Restock emails are not sent automatically, so you will need to manually review the subscriber list and send the notifications.
Available from version 2.2.2
The Trust Badge section supports two options:
Use your store's payment icons – it will automatically display the payment methods enabled on your Shopify store.
Use a custom image – you can upload your own trust badge image if you prefer a custom design.
You can choose whichever option best suits your store.
It will add empty space between elements on a page. It is mainly used to control vertical spacing and improve the overall layout and appearance.
