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
Enable sticky add to cart
Keep the add to cart section visible while scrolling.
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.
Video testimonials
The Video testimonials block lets you display short customer videos directly on your product page. Shoppers can tap a thumbnail to open a full video viewer — complete with swipeable navigation and a product card overlay — making it easy to build trust and drive conversions through authentic social proof.
This block reads video testimonial data from a Shopify metaobject. You must set up the metaobject and link it to your product before any content appears on the page.
Step 1: Create the metaobject definition
Before adding testimonials to a product, you need to set up a custom metaobject type in your Shopify admin.
In your Shopify admin, go to Settings > Metafields and metaobjects.
Select the Metaobjects tab, then click Add definition.
Name it
video_testimonial(the type handle must be exactlyvideo_testimonial).Add the following two fields:
image
File — Image
video
File — Video
Under Metaobject options, enable Storefronts API access.
Click Save.
Step 2: Create the product metafield definition
This connects the metaobject to your products so the theme can read the data.
In your Shopify admin, go to Settings → Metafields and metaobjects.
Click the Metafields tab, then select Products.
Click Add definition.
Fill in the fields exactly as follows:
Name
Video testimonials
Namespace and key
foxtheme.video_testimonials
Type
List of metaobject references → select Video testimonial
Under Options, enable Storefront API access.
Click Save.
The namespace and key must be exactly foxtheme.video_testimonials — this is what the theme code looks for. Any variation will cause the block not to display.
Step 3: Add testimonial entries
Each entry represents one testimonial — a thumbnail image paired with a video file.
In your Shopify admin, go to Content > Metaobjects.
Select the Video testimonial definition.
Click Add entry.
Upload a thumbnail image (the circular preview shoppers click to open the video) and a video file.
Set the status to Active.
Click Save.
Repeat for every testimonial you want to use. Each entry can be reused across multiple products — all linked products are listed in the References panel of the entry.
Step 4: Link testimonials to a product
Once you have entries, you connect them to a product via a product metafield.
Go to Products and open the product you want to add testimonials to.
Scroll down to the Metafields section.
Find the field
foxtheme.video_testimonialsand click to edit it.Select all the testimonial entries you want to display for this product.
Click Save.
Step 5: Add the block in the theme editor
In the theme editor (Customize), navigate to the product page template.
In the Product details sidebar, click Add block.
Select Video testimonials.
Configure the block settings (see below) and click Save.
Block settings
Content
Heading
Optional title displayed above the testimonial thumbnails (e.g., "What our customers say").
Heading preset
Controls the heading size — choose from H3, H4, H5, or H6.
Video
Aspect ratio
Sets the shape of the video player. Options: Square (1:1), Portrait (4:5), Portrait (3:4), Portrait 9:16. The default 9:16 is ideal for mobile-shot videos.
Media overlay
Adds a color tint over the video, useful for improving text or icon contrast.
Overlay color
Picker for the overlay color and opacity. Only visible when Media overlay is enabled.
Border radius
Rounds the corners of the video player (0–32px).
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
Grid 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.
List layout
Items per page
Display 2 columns across all screen sizes.
Product count
Display 4–6 products for the best UX.
Vertical gap
Adjust spacing between product cards.
Mobile swipe
Enable swipe navigation on mobile for better UX.
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.
Other dynamic blocks
Besides private blocks for products, you can also add other dynamic blocks to showcase the details.
Frequently bought together
The Frequently Bought Together block helps customers quickly add complementary products to their cart, creating a smoother shopping experience and increasing product discovery.
⚙️ Block settings
Products
Select the products to display in the Frequently Bought Together block.
Aspect ratio
Set the aspect ratio of the product cards.
The Frequently Bought Together block supports nested blocks, allowing you to combine multiple smaller content blocks to create a more flexible and customizable product information section.
Learn more: Basic
Last updated