Product information
The Product information section is the core layout on every product page. It displays your product’s images, videos, details, buy buttons, variants, and supporting information.
This section ensures shoppers can clearly view product imagery while quickly accessing all essential buying details.
How to navigate to the Product information section
Steps:
In the theme editor (Customize), open the template selector.
Locate Products, and select a product template you want to make changes to.
On the left sidebar, select the Product information section.
Make necessary changes and Save.
How to edit the Product information section
Section settings
Container
Choose Full width or Fixed (Page width) layout.
Media position
Display product media on the left or right side of the details.
Equal columns
Makes the media and details columns equal width.
Gap
Adjust spacing between the media and details columns.
Color scheme
Apply a color scheme to this section. Learn more
Block settings
The Product information section is made up of 2 static block groups:
1. Media
This block automatically includes the full Product media gallery, such as images, videos, 3D models, and a thumbnails carousel.
You cannot remove this block, but its layout depends on your settings.
📐 Layout
Style: Select your preferred desktop layout for product media. On mobile, the media is displayed as a carousel.
If the style is grid, set:
Grid layout: If using grid, choose 1-column, 2-column, or grid-with-thumbnail layout.
Grid gap: Spacing between media items when using a grid layout.
If the style is carousel, set:
Thumbnail: None/ Inside/ Outside.
Thumbnail aspect ratio: Control cropping of small thumbnail items separately.
🖼️ Media display
Media aspect ratio: Control how the main media is cropped (square, portrait, landscape, auto).
Border radius: Round the corners of media items. This applies to the thumbnails as well.
Extend media to screen edge: Makes visuals extend horizontally when container = “page” (great for immersive layouts).
🎥 Video & zoom options
Video autoplay
Automatically plays product videos (muted) in the gallery.
Enable zoom
Enables image zoom interaction on desktop.
🧬 Variant-aware display
Hide unselected variant media: When enabled, the gallery only shows media for the selected variant, cleaning up the viewer.
2. Product details
This block includes all core product detail components. You can manage the sub-blocks of the Product details area in the Product details section of the theme editor.
Breadcrumbs
Breadcrumb is a type of secondary navigation scheme that reveals the customers’ location on the website.
By default, breadcrumbs display the name of the collection that comes first in alphabetical order (if that product is included in multiple collections).
Product title
Display the product title. Change the Text preset and HTML tag as you want for it.
Learn more about Typography preset.
Product price
Display the product price.
It automatically updates when shoppers select different variants and can also display compare-at price, installment options, and tax/shipping notices depending on your settings.
💰 Pricing options
Show installments
Shows Shop Pay installment messaging under the price (if set up in Shopify admin).
Show tax info
Displays tax and duties information based on your
store settings.
Description
Display the product description.
✍️ Not sure how to add a description to your product? See our tutorial here.
Variant picker
The Variant picker block allows shoppers to choose between product variants directly on the product page. It updates the selected variant, price, media gallery, availability, and add-to-cart button automatically.
🎨 Variant styles
Style
Choose how each variant option is displayed.
Dropdown
Buttons
Show swatches
Converts color options into color/pattern circles or squares. ✍️ Learn how to add color swatches using category metafields in Shopify
Show variant image
Shows variant preview images inside the swatch (if available).
Swatch shape
Choose circle or square swatches.
Circle shape:
Square shape:
Swatch width / height
Adjust the size of each swatch.
📏 Size chart
Size chart title
Enter the product option name where you want to the size chart button to appear.
Size chart page
Select a Shopify Page that opens in a popup.
This is especially useful for apparel, accessories, and shoes.
Buy buttons
The Buy buttons block powers all purchase actions on your product page. It includes the Add to Cart button, quantity selector, accelerated checkout buttons (Shop Pay, Apple Pay, Google Pay…), and optional gift card recipient form (if the product is a gift card).
The Buy buttons include 3 private static blocks:
Quantity: display a quantity selector inside the Buy buttons area. It allows shoppers to choose how many items they want to add to cart.
Add to cart: display the main action button that adds a selected variant to the customer’s cart.
Accelerated checkout: display fast-checkout buttons depending on the customer’s device and Shopify Payments configuration. Learn more about Accelerated checkout buttons
Product badges
The Product badges block lets you display key status labels, such as Sold out, On Sale, or your own custom badges, on the product page. These badges help customers quickly understand product availability and promotions, improving clarity and boosting conversions.
The block automatically pulls product information to display badges such as:
Sale badge — appears when a product has a compare-at price.
Sold out badge — appears when selected variant is unavailable.
Custom badges — shows custom badges you've set for the products.
Sale badges can also show percentage or fixed amount discount depending on your selected type.
Change your badges' colors in the Theme settings > Colors.
Learn how to set up Custom badges: Product badges
Product inventory
The Product inventory block displays real-time stock status for the currently selected variant. This helps shoppers understand availability, creates urgency, and improves trust.
The block automatically reads the inventory data from the selected product variant (When the "Track inventory" is enabled):
In stock — inventory quantity is above the threshold
Low stock — inventory quantity is at or below your defined threshold
Out of stock — no inventory and the product cannot continue selling
In stock (continue selling) — inventory is 0, but “Continue selling when out of stock” is enabled, or the "Track inventory" is disabled.
The block also supports optional quantity display, for example:
“Only 3 items in stock!”
⚙️ Block settings
Inventory threshold
Quantity level that triggers the “Low stock” status. Example: set to 10, and any variant with 10 or fewer units will show a low-stock warning.
Show inventory quantity
When enabled, it displays the exact remaining quantity. When disabled, it shows a general message (“Low stock”).
Edit the message content anytime in the Edit default theme content section.
Product recommendations
The Product recommendations block automatically suggests relevant or complementary products on your product page. It uses Shopify’s built-in recommendation engine to increase product discovery, boost average order value, and help customers find items they’re more likely to buy.
Customize suggested products with Search & Discovery app. Learn more
⚙️ Block settings
Recommendation logic
Type
Choose Related (similar items) or Complementary (add-on items).
Product count
Number of products to show (1–10).
Layout
Desktop columns
Display 1–3 columns on large screens.
Horizontal gap
Adjust spacing between product cards.
Mobile swipe
Enable swipe navigation on mobile for better UX.
Mobile columns
Show 1 or 2 products per row.
Product card display
Controls what appears inside each recommended product card.
Show vendor
Display product vendor/brand.
Show product type
Show the product type.
Show badges
Show “Sale”, “Sold out”, or custom badges.
Show swatches
Show color swatches.
Quick view
Allow customers to open a modal preview. Learn more: Quick add drawer
Quick add
Show “Add to cart” button directly in the card.
Pickup availability
Quickly see whether the selected product variant is available for in-store pickup at any of your retail locations.
To show pickup locations, you must first enable Local pickup in your Shopify admin.
➡ See Shopify’s official setup guide: https://help.shopify.com/en/manual/fulfillment/setup/delivery-methods/pickup-in-store#set-up-pickup
The block will automatically hide itself if:
The selected variant has no pickup-enabled locations, or
Pickup is not set up in your Shopify store
Share
The Share block lets customers quickly share your product page across social platforms or copy the link to send to friends, family, or colleagues.
Set up which social media to share on in Theme settings > Sharing options
The Share block automatically:
Generates a share URL based on the selected product variant
Applies the correct product image and page metadata
Displays a set of share icons (Facebook, X/Twitter, Pinterest, email, etc.)
Optionally shows a Help Desk button with your custom label and link
⚙️ Block settings
Share label
Label
Text that appears before the share icons (e.g., “Share”, “Spread the word”).
Help desk options
Show help desk
Enables a support button beside the share icons.
Help desk label
Custom text for the button (e.g., “Need help?”).
Help desk link
URL to your support page, chat, or contact form.
Last updated