Product

Written in stage 2

What this is for, when to use it, its layouts, screenshots and examples. Everything below is generated from the theme’s schema, so it always matches the theme editor.

Where you can add it

Not in the Add section list: it comes with its template or section group.

Blocks

• Vendor
• Product title
• Product rating
• Product price
• Product badges
• SKU
• Inventory status
• Product siblings
• Variant picker
• Buy buttons
• Pickup availability
• Complementary products
• Product bundle
• Popup
• Ask a question
• Specifications
• Share
• Product description
• Icon with text
• Facts
• Secure checkout
• Custom Liquid
• Accordion
• Any theme block
• App blocks — blocks from installed apps
• Media — part of this section; fixed: always present, can’t be removed or moved
• Below media — part of this section; fixed: always present, can’t be removed or moved

Media

Setting	Type	Default	Options and range
In the quick view the gallery follows the sheet’s layout. Choose Thumbnails or Scrub in the Quick view section’s settings.
The gallery’s layout, style and ratio are set in the section settings.
Layout
Desktop layout Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Select	Grid, first image large	Stacked Grid Grid, first image large Thumbnails beside Thumbnails below Carousel
Mobile layout Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Select	Carousel	Carousel Stacked
Mobile navigation Thumbnails show under the carousel on mobile. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty and Mobile layout is Carousel.	Select	Counter	Dots Counter Progress bar Thumbnails
Text on glass Auto picks dark or light text for each glass element from the brightness of the photo behind it. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Select	Auto	Auto Light Dark
Media aspect ratio Adapt keeps each image’s own aspect ratio. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Select	Portrait	Adapt to media Square Portrait Landscape
Image fit Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty and Media aspect ratio is not Adapt to media.	Select	Fill	Fill Fit
Space between media Between images in a grid or a stack. A carousel shows one image at a time. Shown when the section’s qv_gallery is empty and Mobile layout is Stacked or Desktop layout is Grid or Desktop layout is Grid, first image large or Desktop layout is Stacked.	Range	8 px	0–32 px, step 4
Corner radius Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Range	24 px	0–40 px, step 2
Deep first corner Rounds the top corner of the first image more deeply on tablets and desktops. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Checkbox	On
Full width on mobile Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Checkbox	On
Badges One badge shows at a time, in this order: Sold out, New, then the sale.
Sale badge Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Select	Percentage saved	None Sale Percentage saved Amount saved
Show “Sold out” label Shown on the media when no variant can be bought. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Checkbox	On
Show “New” badge For products with the tag set in Theme settings > Product card. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Checkbox	On
Behavior
Selected variant media Only variant media shows the selected variant’s image and the images after it, up to the next variant’s image. Order your product media to match. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Select	Show all media	Show all media Only variant media
Zoom Magnify shows a lens on hover with a mouse. Touch devices always use the lightbox. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Select	Lightbox and magnify	None Lightbox Lightbox and magnify
Entrance How the media after the first appears when the page loads. The first image always shows right away. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Select	Theme default	Theme default Wipe Zoom Rise None
Loop videos	Checkbox	On
Autoplay videos Videos play muted when they’re in view. They never autoplay when reduced motion is on. Shown when the section’s qv_gallery is empty and the section’s fp_layout is empty.	Checkbox	Off

Below media

Accepts: Any theme block, App blocks.

Setting	Type	Default	Options and range
Blocks here appear under the media on desktop and after the product information on mobile.

Settings

Setting	Type	Default	Options and range
Product layout
Media position Start places the media on the left in left-to-right languages and on the right in right-to-left languages.	Select	Start	Start End
Media width Applies to desktop. Tablets always show two equal columns.	Select	Large	Small Medium Large Extra large
Space between columns	Range	48 px	16–96 px, step 8
Sticky column Auto keeps the shorter column in view while the longer one scrolls.	Select	Auto	Auto Media Product information None
Product information width	Select	Fill the column	Fill the column Narrow
Sticky add-to-cart bar
Show on Appears once the main add to cart button scrolls out of view. On products with options, the bar asks customers to choose them first.	Select	Mobile only	Off All devices Desktop only Mobile only
Bar color scheme Shown when Show on is not Off.	Color scheme	Scheme 1
Show quantity selector Desktop only. Shown when Show on is All devices or Show on is Desktop only.	Checkbox	Off
Settings every section has — Layout, spacing, motion and visibility — the same in every section. Not in this section: Section width.