Product Information
Last updated
Last updated
The Product Information section governs your product page’s main content: images/media, title, pricing, variant selectors, add-to-cart controls, and a host of optional blocks (reviews, FAQs, recommendations, etc.). Below is a breakdown of its key parts, settings, and available blocks.
These global options control layout, loading behavior, and sticky functionalities:
Section Width Choose between container, fluid, or full-width layouts.
Padding Top and bottom padding to control spacing around the section.
Sticky Content on Desktop Locks the product title, price, and add-to-cart in view as you scroll.
Skeleton Loading Displays placeholder “skeleton” screens while images and data load for a smoother experience.
Define how product media (images, video, 3D models) behave:
Desktop Media Width Percent width of the media column (e.g., 40–60%).
Desktop Layout Position of thumbnails (left, bottom, stacked) or hide them entirely.
Image Zoom Options include none, lightbox, inner zoom (circle or square), or external zoom.
Video Looping & Autoplay Toggle looping and automatic play for product videos.
Customize sale and discount badges alongside pricing:
Badge Background & Text Color Your choice of hex color codes.
Margin & Text Adjust spacing and choose between discounted percentage or the word “SALE.”
Set the color for:
Product Title
Vendor Name
Price & Compare-at Price
Each can be independently styled for brand consistency.
Control how customers choose options and quantities:
Variant Swatches Border radius, colors for selected/unselected, and hover states.
Quantity Selector Background, border, plus/minus button colors, and border radius.
Zoom Icon Background, border color, and radius for the magnifier icon.
Sticky Add-to-Cart Bar Enable on desktop/mobile, with background colors and optional gradient; stays fixed at the bottom.
Define mobile-specific thumbnail display and padding:
Show or hide thumbnails
Side padding (in rem units)
Mobile padding overrides for a tighter, thumb-friendly layout.
You can drag and drop these blocks in the theme editor, each with its own settings:
Title
Displays vendor link + product title
Price
Renders current and compare-at price + discount badge
Review & Sold
Shows star ratings and “Sold X items in Y hours” indicator
Buy Buttons
Add to Cart, Checkout buttons, wishlist, gift-card recipient field
Live View
“X people are viewing this product” live counter with update interval
Variant Picker
Swatches or dropdown for selecting product options (with optional size guide link)
Collapsible Row
Accordion sections for custom content or product description
Modern Collapsible
Updated accordion style with smoother animation
Product Add-Ons
Share links, “Ask a Question” CTA, custom CSS/JS can be injected
Short Description
Displays a truncated custom metafield description
Model Size
Shows model’s measurements (height, weight, bust/waist/hips) and optional avatar image
Pickup Availability
Displays local pickup stock status via Shopify’s pickup-availability component
Complementary Products
“Frequently Bought Together” carousel based on a metafield list
Product Grouped
Displays a custom group of related products using a metafield
More Colors
Shows additional color variant thumbnails with configurable size
Custom Liquid
Insert any custom Liquid code
Text
Simple rich-text block for headings and paragraphs
Product Meta
Lists SKU, barcode, availability, collections, tags, and product type
Behind the scenes, the section:
Groups media by variant color if a specific metafield (use_variants_image_group) is enabled.
Captures 3D models and loads the necessary styles/scripts only when models exist.
Initializes PhotoSwipe or Drift zoom libraries based on zoom settings.
Outputs JSON data for variants, “bought together,” and schema.org structured data for SEO.
Sticky Add-to-Cart
A separate <sticky-add-cart> component renders at the bottom with mini product info and buy controls.
Frequently Bought Together
If enabled and populated via metafield, renders a <product-bought-together> carousel.
The Product Information section is your store’s primary conversion engine. With dozens of settings and flexible blocks, it lets you:
Showcase media in multiple layouts
Highlight pricing and discounts
Provide social proof (reviews, live viewers, sold counts)
Offer rich, collapsible content for details and FAQs
Drive sales with sticky add-to-cart and cross-sell components
