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.
Image zoom: Select the zoom effect style for product images.
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.
Displays vendor and product rating.
To show rating, please install and configure a review app.
Title color depends on the active color scheme.
Go to the selected Color Scheme → change Text color.
Product title uses the main text color.
Price color depends on the active color scheme.
It uses the text color (slightly lighter).
There is also an option to change the Sale Price color.
3 display styles: Full, Read more, Collapsible.
Content is pulled from the product description in Shopify.
Displays countdown and promo code to create urgency.
Remember to create the discount code in Shopify.
The variant picker is where product variants are displayed.
It supports multiple styles such as swatch, block, dropdown, etc.
To configure color/image swatches, please follow this document.
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.
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
The Icon with Texts block can be displayed either in a scrolling layout or in a column layout, depending on your preference.
Allows you to display complementary or related products on the product page.
Please follow this document to learn how to configure this feature properly.
This block allows you to add a Share option and an Ask a Question feature, so customers can easily contact you and send their inquiries.
This block allows you to add accordion-style content to the product information column, helping you organize additional product details in a clean and user-friendly way.
If you would like to customize content using Liquid code, you can use this block to add your own custom Liquid.
Add external button links, affiliate links, referral links, or even internal links to your store.
Line item properties are used to collect customization details for a product when it is added to the cart.
You can use three types of input:
Text
Option
Checkbox
When you click on the text, a pop-up will appear. The content of the pop-up is taken from the page you select.
This block displays the SKU of the product if a SKU is available.
You will need to add a shipping policy in the Shopify settings for this block to work properly.
Allows you to display badges on the product page.
Please make sure to enable the badges you want to show in the Theme Settings.