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.
Breadcrumbs: To enable or disable Breadcrumbs, please go to the General settings of the Product Page section and toggle the option there.
Sticky add to cart: Sticky add to cart will only appear when you scroll past the Add to Cart button.
This feature is available from version 2.1.0 and later.
In the Media section, you can choose to display images on the left or right side based on your preference.
By default, the theme automatically applies the sticky behavior to either the Media or Information column. The column with shorter content will remain sticky while scrolling.
The Media section supports both Grid and Carousel layouts, and also includes an image zoom feature for a closer view of product images.
Allows you to display badges on the product page.
Please make sure to enable the badges you want to show in the Theme Settings.
Displays the product vendor. When clicking on the vendor name, it will open the collection page showing all products from that vendor.
Displays the product title that you have added for the product in Shopify.
Displays the product price that you have added for the product in Shopify.
Displays the product description that you have added for the product in Shopify.
There are three description display options available: full description, read more, and collapsible.
The Variant Picker allows you to display product variants in multiple formats, including Block, List, Dropdown, Variant image, and Color swatches.
To display variants as Color swatches, please follow this document for proper setup and configuration.
Within the Variant Picker, you can also configure a Size Chart. The size chart can be displayed using one of the following sources: An image or a page.
Please follow this document to configure the size chart.
The Buy Buttons block includes:
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 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.
Enables the contact form, allowing users to send messages or request information through the website.
Social share is a feature that allows users to share content from your website to various social media platforms.
Allows you to display complementary or related products on the product page.
Please follow this document to learn how to configure this feature properly.
To display the installments banner, your store needs to support Shop Pay Installments. Please follow this guide.
The Inventory Status block supports four different display styles.
For pre-order products, the inventory will appear in yellow and will not show a quantity.
For low-stock threshold products, the inventory status will be displayed in red and include the quantity.
For out-of-stock products, the inventory will appear in red and will not show a quantity.
For in-stock products, the inventory status will be displayed in green and include the quantity.
Line item properties are used to collect customization information when a product is added to the cart.
Supported input types include:
Text field
Checkbox
Options
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.
Please follow Shopify’s official guide to set this up.
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 insert custom Liquid code, app snippets, or other code to implement advanced customizations for the website.
Example:
<span class="icon">
<svg width="24" height="24" color = "#E3A82D" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor">
</svg>
</span>