Product page

Product

The main product page: gallery and product details. Every part of the details column is a block you can add, remove and reorder.

Building the product page

In the theme editor, open a product template and select Product. The left side is the gallery; the right side is a stack of blocks.

A typical order is Breadcrumb, Vendor, Title, Rating, Price, Variant selector, Quantity selector, Add to cart, Shipping info, Collapsible rows.

Different templates for different products

Create extra product templates (for example product.bundle) and assign them in the product's admin page under Theme template.

Settings

Layout

Setting	What it does
Page widthDropdown	Full widthDefaultCustom
Custom widthSlider	Shown only when it applies to the options chosen above.

Color scheme

Setting	What it does
Use the store's default color schemeToggle	Toggle
Color schemeColour scheme	Shown only when it applies to the options chosen above.

Columns

Setting	What it does
Column gapSlider	Slider
Media positionDropdown	LeftRight
Sticky product infoToggle	Product info column stays fixed while you scroll
Sticky mediaToggle	Media column stays fixed while product info scrolls

Gallery layout

Setting	What it does
Layout styleDropdown	Standard (main + thumbnails)Stacked2-column grid3-column gridMixed (large + grid)Two per row

Thumbnails

Setting	What it does
Thumbnail positionDropdown	BelowLeftRight Shown only when it applies to the options chosen above.
Thumbnail sizeSlider	Shown only when it applies to the options chosen above.

Image settings

Setting	What it does
Image ratioDropdown	Square fits the whole photo in a square frame without cropping it. SquareOriginal
Enable zoomToggle	Lets a shopper click the enlarged photo to magnify and pan it.Shown only when it applies to the options chosen above.
Enable lightboxToggle	Toggle
Show navigation arrowsToggle	Toggle

Mobile media

On phones every layout shows one image at a time, swipeable.

Setting	What it does
NavigationDropdown	DotsThumbnailsNone

Sticky add to cart

Setting	What it does
Show sticky barToggle	Toggle
Sticky bar color schemeColour scheme	Shown only when it applies to the options chosen above.

Collapsible rows

Setting	What it does
Row styleDropdown	UnderlinedBoxedCard
MarkerDropdown	Plus and minusArrowChevron
Allow several rows open at onceToggle	Toggle

Padding

Setting	What it does
Top paddingSlider	Slider
Bottom paddingSlider	Slider

Blocks

Blocks are the pieces you add, remove and reorder inside the section, under Add block.

Add to cart

Setting	What it does
Add to cart styleDropdown	PrimaryOutlineText only
Button sizeDropdown	SmallMediumLarge
Attention animationDropdown	A slow loop to draw the eye. Stops while the button is working. NoneShineGlowPulse
Show dynamic checkout buttonsToggle	Shop Pay, Apple Pay and other express options. Not shown for gift cards.
Buy it now styleDropdown	Used when no express checkout option is available. PrimaryOutlineText only Shown only when it applies to the options chosen above.

Pre-order

Setting	What it does
Tag a product with the tag below and its Add to cart becomes Pre-order.
Pre-order tagText	Products with this tag show the Pre-order button instead of Add to cart.

Ask about product

Setting	What it does
Button labelText	Text
Button styleDropdown	OutlinePrimaryText only
Modal titleText	Text

Setting	What it does
Show collectionToggle	Toggle
Separator styleDropdown	Arrow (›)Slash (/)Dot (·)

Collapsible row

Setting	What it does
HeadingText	Text
Show product descriptionToggle	Shown above the content below.
ContentRich text	Rich text
Open by defaultToggle	Toggle
Heading iconDropdown	NoneAwardBottleBoxBubblesCalendarChat bubbleCheckand 40 more
Custom iconImage	Replaces the icon above.

Complementary products

Setting	What it does
Section headingText	Text
Number of productsSlider	Slider
Show combined priceToggle	Toggle
Show add all buttonToggle	Toggle
Button labelText	Shown only when it applies to the options chosen above.

Custom Liquid

Setting	What it does
Liquid codeLiquid	Liquid

Custom text

Setting	What it does
ContentRich text	Rich text
Text alignmentDropdown	LeftCenterRight

Customer input field

Setting	What it does
LabelText	Also the name on the order. Without one the field is hidden.
Field typeDropdown	TextMulti-line textDropdownCheckboxDateNumber
Dropdown choicesText	One per line, or separated by commas.Shown only when it applies to the options chosen above.
PlaceholderText	Shown only when it applies to the options chosen above.
Require an answerToggle	Toggle
Character limitSlider	0 for no limit.Shown only when it applies to the options chosen above.
Helper textText	Text

Extra button

Setting	What it does
LabelText	Text
LinkLink	Link
StyleDropdown	PrimaryOutlineText only
Show an iconToggle	Toggle
IconDropdown	AwardBottleBoxBubblesCalendarChat bubbleCheckCheck markand 39 more Shown only when it applies to the options chosen above.
Icon positionDropdown	LeftRight Shown only when it applies to the options chosen above.

Icon with text

Setting	What it does
Icon positionDropdown	HorizontalVertical
Icons per rowDropdown	234

Item 1

Setting	What it does
HeadingText	Leave the heading and description empty to skip this item.
DescriptionText	Text
IconDropdown	AwardBottleBoxBubblesCalendarChat bubbleCheckCheck markand 39 more
Icon sizeSlider	Slider

Item 2

Setting	What it does
HeadingText	Leave the heading and description empty to skip this item.
DescriptionText	Text
IconDropdown	AwardBottleBoxBubblesCalendarChat bubbleCheckCheck markand 39 more
Icon sizeSlider	Slider

Item 3

Setting	What it does
HeadingText	Leave the heading and description empty to skip this item.
DescriptionText	Text
IconDropdown	AwardBottleBoxBubblesCalendarChat bubbleCheckCheck markand 39 more
Icon sizeSlider	Slider

Item 4

Setting	What it does
HeadingText	Leave the heading and description empty to skip this item.
DescriptionText	Text
IconDropdown	AwardBottleBoxBubblesCalendarChat bubbleCheckCheck markand 39 more
Icon sizeSlider	Slider

Image

Setting	What it does
ImageImage	Image
WidthSlider	Set to 0 to use original image size
LinkLink	Link
AlignmentDropdown	LeftCenterRight

Image upload field

Setting	What it does
Field labelText	Text
Accept JPG/JPEGToggle	Toggle
Accept PNGToggle	Toggle
Accept PDFToggle	Toggle
Max file sizeSlider	Slider
Helper textText	Text
Required fieldToggle	Toggle

Inventory status

Setting	What it does
Display styleDropdown	Simple textDetailed countIndicator dot
In stock textText	Text
Low stock textText	Use {count} where the number in stock should appear.
Out of stock textText	Text
Low stock thresholdSlider	Slider

Price

Setting	What it does
Show savings badgeToggle	Toggle
Savings formatDropdown	Fixed amountPercentageBoth Shown only when it applies to the options chosen above.
Price font sizeSlider	Slider
Show tax infoToggle	Shown only when your prices include tax.
Tax info textText	Shown only when it applies to the options chosen above.

Product tags

Setting	What it does
Display styleDropdown	PillPlain textLinked
AlignmentDropdown	LeftCenterRight

Quantity selector

Setting	What it does
StyleDropdown	BoxedMinimal

Rating

Setting	What it does
Show review countToggle	Toggle
Link count to reviews sectionToggle	Toggle

Setting	What it does
Share labelText	Text

Platforms

Setting	What it does
Show FacebookToggle	Toggle
Show X (Twitter)Toggle	Toggle
Show PinterestToggle	Toggle
Show WhatsAppToggle	Toggle
Show copy linkToggle	Toggle

Style

Setting	What it does
Display styleDropdown	Icons onlyIcons with name
Icon sizeSlider	Slider

Shipping info

Setting	What it does
Shipping textRich text	Left empty, nothing is shown.
IconDropdown	NoneAwardBottleBoxBubblesCalendarChat bubbleCheckand 40 more
Icon sizeSlider	Shown only when it applies to the options chosen above.

Delivery

Setting	What it does
Delivery lineDropdown	NoneCustom textEstimated dates
Delivery textText	Shown only when it applies to the options chosen above.
Fastest delivery (business days)Slider	Shown only when it applies to the options chosen above.
Slowest delivery (business days)Slider	Shown only when it applies to the options chosen above.
Order cut-off hourSlider	Store time, 24-hour. Before it, orders ship today. 0 turns the countdown off.Shown only when it applies to the options chosen above.

Short description

Setting	What it does
Character limit (0 = no limit)Slider	Slider
Show read more linkToggle	Shown only when it applies to the options chosen above.
Read more labelText	Shown only when it applies to the options chosen above.
Read less labelText	Shown only when it applies to the options chosen above.

Size guide

Setting	What it does
Content sourceDropdown	Custom HTMLShopify pageImage
Link labelText	Text
HTML contentText	Paste your size chart HTML (tables, styles, etc.)
PagePage	Page
Size guide imageImage	Image

SKU

Setting	What it does
SKU labelText	Text

Stock countdown

Setting	What it does
Display styleDropdown	Progress barText onlyBar and text
Low stock thresholdSlider	Slider
Countdown textText	Use {count} where the number in stock should appear.
Show when stock is above thresholdToggle	Toggle

Title

Setting	What it does
Title sizeDropdown	Visual size only. The product title is always the page's main heading. H1 — largestH2 — mediumH3 — small
Font weightDropdown	LightRegularBold

Trust badges

Badges

Setting	What it does
Add an image, a label, or both. Empty badges are skipped.
Badge 1 imageImage	Image
Badge 1 labelText	Text
Badge 2 imageImage	Image
Badge 2 labelText	Text
Badge 3 imageImage	Image
Badge 3 labelText	Text
Badge 4 imageImage	Image
Badge 4 labelText	Text
Badge 5 imageImage	Image
Badge 5 labelText	Text

Appearance

Setting	What it does
Badge sizeSlider	Slider
AlignmentDropdown	LeftCenterRight
Display styleDropdown	Icons onlyIcons with textText only

Variant selector

Setting	What it does
Set in Theme settings > Product variants.
Show option labelToggle	Toggle
Unavailable variantsDropdown	HideStrikethroughGrayed out
Swatch sizeSlider	Slider
Swatch shapeDropdown	Original image ratio leaves variant images uncropped. CircleSquareOriginal image ratio
Show swatch tooltipToggle	Toggle

Vendor

Setting	What it does
Link to vendor collectionToggle	Toggle

Pickup availability

Setting	What it does
Needs local pickup set up in Settings > Shipping and delivery.

Product

Building the product page

Settings

Layout

Color scheme

Columns

Gallery layout

Thumbnails

Image settings

Mobile media

Sticky add to cart

Collapsible rows

Padding

Blocks

Add to cart

Pre-order

Ask about product

Breadcrumb

Collapsible row

Complementary products

Custom Liquid

Custom text

Customer input field

Extra button

Icon with text

Item 1

Item 2

Item 3

Item 4

Image

Image upload field

Inventory status

Price

Product tags

Quantity selector

Rating

Share buttons

Platforms

Style

Shipping info

Delivery

Short description

Size guide

SKU

Stock countdown

Title

Trust badges

Badges

Appearance

Variant selector

Vendor

Pickup availability