Placebo 1.0.0 / Documentation

Product page

The product page is one section, Product information, with regions that hold blocks. This page explains the structures, the gallery, each block and the buy bar.

How the page is built#

Open any product in the theme editor. The Product information section has five fixed regions. You add, remove and reorder blocks inside them.

Region	What goes in it
Gallery panel	A panel that opens over the gallery from a button at its foot, with up to four Tab blocks. Use it for a nutrition label, a size chart or a certificate.
Gallery slides	Extra slides shown after the product's own media: a figure, a text over a picture, an image, a video, a 3D model or a picture with points.
Apps on the gallery	App blocks placed on a corner of the gallery, such as a wishlist button.
First screen	The blocks that sit beside the gallery when the page opens: usually the heading, the price and the buy buttons.
Below the first screen	The blocks that scroll in the same column while the gallery stays in view.

Blocks that have a Placement setting can also leave the column and run at the full width of the page, under the gallery. See Placement.

Structure and size#

Product information settings
Setting	What it does
Structure	Pinned: the gallery holds the screen while the page scrolls beside it; choose its side below. Wide: the gallery spans the page, its height follows the size, and full-width blocks carry the content. Grid: every picture in two columns for products with many. Compact: a small square gallery for simple products. On mobile the gallery always comes first. Choices: Pinned gallery beside the column, Wide gallery above a centered column, Picture grid beside a pinned column, Compact gallery beside the column. Default: Pinned gallery beside the column.
Size	Small is a compact product: a square stage that scrolls with the page, no previews, the title at the regular size. Medium is the standard page. Large gives the gallery more room, the title one step up and more air between groups. With the wide gallery the size sets its height. Choices: Small, Medium, Large. Default: Medium.

Pinned gallery beside the column is the standard page: the gallery holds the screen while the column scrolls.
Wide gallery above a centered column suits one product with strong pictures. Use full-width blocks to carry the content.
Picture grid beside a pinned column shows every picture in two columns, for products with many images.
Compact gallery beside the column is a small square gallery for simple products.

On mobile every structure shows the gallery first, then the column.

Gallery#

Product information settings
Setting	What it does
Position on desktop	Choices: Left, Right. Default: Left.
Width on desktop	Choices: Follow the section size, Small, Medium, Large. Default: Follow the section size.
Grid tile ratio	Choices: Adapt to each media, Square, Portrait. Default: Portrait.
Show the first media at full width	Checkbox. Off by default.
Height on mobile	Choices: Compact, Square, Tall. Default: Compact.
Media fit	Choices: Fill the frame, Show the whole image. Default: Fill the frame.
Show previews	Checkbox. On by default.
Enable image zoom	Opens images in a full-screen sheet. Checkbox. On by default.
Show media for the selected variant only	Mark in the alt text: end a media's alt text with a hash and an option value, like #red, to show it only for that value. Variant image: each variant shows its own image and the media placed after it, up to the next variant's image. Media without a mark, or placed before the first variant image, show for every variant. Choices: Off, Group by a mark in the alt text, Group by variant image. Default: Off.
Tagline on the first media	A few words written over the picture. Leave empty to use the product metafield custom.tagline, or connect another metafield. A media can carry its own: add a vertical bar and the words to its alt text, or fill the list metafield custom.media_taglines. Text.
Tagline position	Choices: Top, Bottom. Default: Top.
Play product videos as silent loops	A silent loop plays muted without controls while it is on stage and in view, with a small pause button. Other videos open as a player: a poster with a play button, then the video's own controls with sound. YouTube and Vimeo videos always open as a player. Choices: Never, Videos under 15 seconds, Always. Default: Videos under 15 seconds.
Enable looping in the player	Checkbox. Off by default.
Panel button label	Opens the gallery panel. Add tabs to the gallery panel block to show it. Text.

The gallery supports images, Shopify-hosted videos, YouTube and Vimeo videos, and 3D models. A 3D model loads when the visitor asks for it and offers a view in the visitor's own space on devices that support it.

Media for the selected variant only#

By default every media file is shown for every variant, and choosing a variant moves the gallery to that variant's image. Show media for the selected variant only hides the media that belong to other variants. It has two modes.

Group by variant image needs no writing. In your Shopify admin, order the product media so each variant's own image comes first, followed by the media that belong to that variant. Media placed before the first variant image are shown for every variant.

Group by a mark in the alt text ties a media file to an option value. At the very end of the media's alt text, add a hash and the option value:

Front view #red shows the media only when Red is selected.
Write the value in lowercase with hyphens for spaces: Navy Blue becomes #navy-blue.
Several marks are allowed: Front view #red #large.
Media without a mark are shown for every variant.

The marks are removed from the alt text that screen readers announce.

Taglines on pictures#

A tagline is a few words written over a picture. For the first picture, type it in Tagline on the first media, or leave the setting empty to use the product metafield custom.tagline. Any media can carry its own tagline: add a vertical bar and the words to its alt text, for example Black box of sticks | Nothing else, ever. The words after the bar are removed from the alt text that is read out.

Videos#

Play product videos as silent loops decides which videos play by themselves. A silent loop plays muted, without controls, while it is on stage and in view, and always has a pause button. Other videos open as a player with a poster and a play button. YouTube and Vimeo videos always open as a player.

Badges on the picture#

Product information settings
Setting	What it does
Position on the picture	Badges float on the first picture as glass and stay clear of the previews and the zoom button. With the arch media shape they sit centered under the crown. Choices: None, Top left, Top right, Bottom left. Default: Top left.
Badges for every product on this template	One per line. Useful to try badges before adding metafields or tags, or for a word that is true of every product, like Made in Italy. Text, several lines.

Badges come from your prices and inventory, from Theme settings > Product badges, and from optional product data. See Badges.

Gallery panel#

The Gallery panel opens over the gallery from a button at its foot. The button's words are set with Panel button label in the section. Add Tab blocks to the panel. A tab with nothing written is not shown. With one tab there is no tab bar, and with none the button is hidden.

Tab settings
Setting	What it does
Label	Text.
Type	Each type draws the same fields its own way. A tab with nothing written does not show; with one tab left there is no tab bar; with none, the button and the panel are not shown. Choices: Regulated label (nutrition, supplement facts), Ingredients or composition, Dimensions and weight, Size chart, Care instructions, Certificate or lab report, Warranty terms, Rows and text. Default: Regulated label (nutrition, supplement facts).
Heading	Text.
Lines above the rule	Regulated label only. One line each. Typed here, or connected to a multi-line text metafield. Text, several lines.
First column heading	Regulated label only. Text.
Second column heading	Text.
Rows	One row per line, typed here or connected to a multi-line text metafield. Label, certificate, dimensions, warranty: Name: value (a hyphen first indents a row, three hyphens draw a thick rule). Composition: Name: 60%. Size chart: cells separated by commas, first line is the header. Care: icon \| instruction, with an icon such as drop, sun, recycle, clock. Composition and care left empty list the product's category metafields. Text, several lines.
Rows in the second unit	Size chart only. The same chart in the other unit system. When filled, a switch between the two units shows. Text, several lines.
First unit	Text.
Second unit	Text.
Notes	Rich text.
Image	A scan of the certificate, or a small drawing for dimensions or a size chart. 760 x 1000px .jpg recommended Image.
File link	Certificate only. Link to a file uploaded in Content, Files, or connected to a file metafield of the product. Link.
File link label	Text.
Repeat as text for screen readers	The panel is closed until its button is pressed. Keep this on when the tab holds facts customers must be able to read, such as nutrition or safety information. Checkbox. On by default.

How to write Rows for each Type:

Type	One row per line, written as
Regulated label (nutrition, supplement facts), Certificate or lab report, Dimensions and weight, Warranty terms, Rows and text	`Name: value`. Start a line with a hyphen to indent the row. A line of three hyphens draws a thick rule.
Ingredients or composition	`Name: 60%`. Left empty, the tab lists the product's composition from Shopify's category metafields when the product has them.
Size chart	Cells separated by commas. The first line is the header. Fill Rows in the second unit to show a switch between two unit systems.
Care instructions	`icon \| instruction`, with an icon name such as `drop`, `sun`, `recycle` or `clock`. Left empty, the tab lists the product's care instructions from Shopify's category metafields when the product has them.

To show different facts on each product, connect Rows to a multi-line text product metafield with the dynamic source icon beside the field.

Keep Repeat as text for screen readers on when a tab holds facts that customers must be able to read, such as nutrition or safety information.

Heading, price and description#

Product heading#

Product heading settings
Setting	What it does
Size	Choices: Large, Regular. Default: Large.
Heading level	Choices: Heading 1, Heading 2, Heading 3. Default: Heading 1.
Subheading	One line that says what is in the box. Connect a product metafield to change it per product. Text.
Note	A small line for a lot number, a certification, or an origin. Text.
Show vendor	Checkbox. Off by default.
Show product rating	Stars, the average and the number of reviews, from the standard product rating metafields that review apps keep up to date. Nothing shows for a product without reviews. Links to the reviews block. Checkbox. On by default.
Link to the product page	Checkbox. Off by default.
Badges
Show badges under the title	The product's own badges: the metafield custom.badges, tags that start with badge:, and the list below. A badge with an explanation opens a bubble on hover, focus and tap. Sold out and sale are written beside the price. Checkbox. On by default.
Badges	One per line. Add an explanation after a vertical bar: Vegan \| No animal ingredients. Text, several lines.

Price#

Shows the price, the compare-at price, the unit price and the saving. Sold out and sale are written beside the price.

Price settings
Setting	What it does
Text after the price	For example: a box, a month, each. Text.
Terms	Say what is charged today and what happens next. Shown in the buy bar too. Text.
Show tax and shipping information	Checkbox. On by default.

Description#

The product description as reading text. The block can also show a first sentence and a list of highlights before or after the description.

Description settings
Setting	What it does
The product description as reading text. Headings, lists, quotes and tables written in the description are set in the theme's reading styles.
Heading	Text.
Description	Hide it to show only the first sentence and the highlights. Choices: Show, Hide. Default: Show.
Text color	Headings and bold words stay in the text color. Choices: Text, Secondary text. Default: Secondary text.
Line length	The widest a line of reading text gets, in characters. Range: 36 to 60 characters. Default: 52 characters.
Lines shown before a read more button	Set to 0 to show the whole description. Range: 0 to 20. Default: 0.
First sentence and highlights
Use product metafields	Reads the first sentence from custom.short_description and the highlights from custom.highlights (a list of single line texts) when the product has them. Checkbox. On by default.
First sentence	Typed here for every product on this template, or connected to a product metafield. Text.
Highlights	One per line, up to 8. Used when the product has no custom.highlights metafield. Text, several lines.
Highlights position	Choices: Before the description, After the description. Default: Before the description.
Placement	Full width moves the block under the gallery and the column, in the order of the blocks. Heading beside keeps the heading in view on the left while the content scrolls on the right. Applies on the product page. Choices: In the product column, Full width, heading beside, Full width, heading above. Default: In the product column.

Variant picker#

Options can be shown in two places: inside the buy buttons, or in the Variant picker block.

In the buy buttons#

The Variant picker setting of the Buy buttons block has three modes:

In the buy row, round suits a product with one option of up to three short values, such as 5 g and 10 g. The selected value sits in a circle inside the buy row. Longer values get a pill.
Above the buy row, large shows every option as segments above the buttons. Remove the Variant picker block when you use this mode.
In the variant picker block leaves options to the block.

Products that do not fit the chosen mode fall back to the Variant picker block, so keep the block in the template unless every product has one short option.

The Variant picker block#

Variant picker settings
Setting	What it does
Hide when the buy buttons show the option	Products with one option of up to 3 values show it as a switch in the buy buttons. Checkbox. On by default.
Style	Automatic uses a switch for up to 3 values, pills for more, and a dropdown for long lists. Choices: Automatic, Switch, Pills, Dropdown. Default: Automatic.
Largest option shown as pills	Applies to the automatic style. Options with more values use a dropdown. Range: 4 to 24. Default: 12.
Show swatches	Uses the colors and images set on your product options. Checkbox. On by default.
Swatch shape	Choices: Round, Square. Default: Round.
Size guide
Page	Page.
Option name	Text.
Link label	Text.
Style by option name
Options shown as swatches	Uses Shopify's swatch data when the option has it, else the variant image, else the value read as a color name (Black, Navy, Olive). Text.
Options shown as pills	Text.
Options shown as a dropdown	Text.

With Automatic, an option with up to three values is a switch, an option with more values is a row of pills, and a long list becomes a dropdown. To force a style for one option, type the option's name, for example Color, in Options shown as swatches, Options shown as pills or Options shown as a dropdown.

Swatches use the colors and images you set on the product option in your Shopify admin. Variants that are sold out stay selectable and are marked as unavailable.

Buy buttons#

The Buy buttons block holds the option switch, the quantity selector, add to cart and the dynamic checkout button in one well.

Buy buttons settings
Setting	What it does
One well holds the option switch and the buttons. When an express payment method is available, add to cart becomes a small white button and the express button takes the row.
Variant picker	Round suits one option of up to 3 short values, such as S, M and L: the selected value sits in a circle. Longer values get a pill. Large shows every option as segments above the buttons: remove the variant picker block when you use it. Other products fall back to the variant picker block. Choices: In the buy row, round, Above the buy row, large, In the variant picker block. Default: In the buy row, round.
Line under each value	Choices: None, Price. Default: None.
Quantity selector	Minus and plus around the number, in the same well as the buttons. In the buy row it takes the place of the option switch, which suits products with a single variant; with a switch it moves to its own line. Follows the quantity rules and volume pricing of the variant. Remove the quantity selector block when you use it. Choices: None, In the buy row, Above the buy row. Default: None.
Show pickup availability	Checkbox. On by default.
Show recipient form for gift cards	Checkbox. On by default.
Show pre-order on the button	For variants that are out of stock and set to continue selling when out of stock. Uses the real inventory of products tracked by Shopify. Checkbox. On by default.
Add-on
Add-on product	Complementary products are set in the Shopify Search and Discovery app. Without one, the product picked below is offered, else the first product of the metafield custom.pairs_with. Choices: None, First complementary product, The product picked below. Default: None.
Product	Product list.
Words before the product name	Text.
Checkout
Show dynamic checkout buttons	Customers see their preferred payment method, like Shop Pay or Apple Pay. On: the express button takes the row and add to cart sits beside it as a small white button. Off, or when the store offers no express method: add to cart takes the whole row. Never shown with the gift card recipient form. Checkbox. On by default.
Show Shop Pay Installments	Shop Pay Installments terms under the buttons, when the store offers them. Checkbox. On by default.
Show payment icons	The payment methods enabled in your payment settings. Checkbox. Off by default.
Stock and delivery date
Stock level	Shown for variants whose inventory is tracked. A variant that keeps selling when out of stock reads as available on backorder; a sold out variant with a transfer on its way shows the expected date. Choices: Never show, Only when stock is low, Always show. Default: Never show.
Low stock threshold	Range: 1 to 20. Default: 5.
Show estimated delivery dates	Dates are counted from the delivery days, cut-off time and working days in theme settings, Delivery and returns, and name the country the visitor is shopping in. Nothing shows until those settings are filled. Checkbox. Off by default.
Under the buttons
Use the delivery and returns theme settings	Off: only the lines typed below are shown. Checkbox. On by default.
Show the guarantee line	Checkbox. On by default.
Delivery line	Replaces the automatic line. Typed here, or connected to a product metafield with the dynamic source icon. Text.
Returns line	Replaces the automatic line. Typed here, or connected to a product metafield. Text.
Trust statements	One per line, up to four. To add an explanation shown on hover, focus or tap, write it after a vertical bar: Label \| Explanation. Text, several lines.
Sit close to the block above	Checkbox. On by default.

Dynamic checkout#

With Show dynamic checkout buttons on, customers see their preferred accelerated payment method, such as Shop Pay or Apple Pay. The express button takes the row and add to cart sits beside it. When the store offers no express method, add to cart takes the whole row. Payment buttons keep the colors of their payment method. Dynamic checkout is never shown together with the gift card recipient form.

Quantity#

The Quantity selector setting of the Buy buttons block places minus and plus buttons in the same well as the buttons. The separate Quantity selector block does the same in its own row and can also show quantity rules and volume pricing. Use one or the other.

Quantity selector settings
Setting	What it does
Show quantity rules	The minimum, the maximum and the increment set for the variant. Checkbox. On by default.
Show volume pricing	Checkbox. On by default.

Add-on#

The add-on is one extra product offered with a checkbox directly under the buy row, such as a refill or a gift box. When it is checked, add to cart adds both products in one press. The add-on is sold at its own price: the theme applies no discount. It is not offered when it is sold out, sold by subscription only, or a gift card. Set Add-on product to First complementary product to use the complementary product from the Shopify Search and Discovery app, or to The product picked below.

Stock and delivery date#

Stock level shows inventory for variants whose inventory is tracked by Shopify. The count is your real inventory. The theme does not show invented stock numbers. Show estimated delivery dates needs the delivery days in Theme settings > Delivery and returns.

Lines under the buttons#

With Use the delivery and returns theme settings on, the block writes a delivery line, a returns line and a guarantee line from the theme settings. Type your own text in Delivery line or Returns line to replace one. Trust statements adds up to four short pills, one per line. To add an explanation shown on hover, focus or tap, write it after a vertical bar: Label | Explanation.

Purchase options and subscriptions#

The Purchase options block shows the selling plans of a product: one-time purchase first, then one tile for each plan group. It works with the Shopify Subscriptions app and with any subscription app that creates selling plans. A product without selling plans shows nothing.

Purchase options settings
Setting	What it does
Purchase options from the store's selling plans, shown as tiles in the same well as the buy buttons, directly above them: one-time, then one tile for each plan group. The chosen tile opens to show how often it delivers and its benefits. Works with any subscription app that creates selling plans.
Selected when the page opens	Products sold only by subscription always open on their first plan. Choices: One-time purchase, Subscription. Default: One-time purchase.
Delivery frequency	When a plan group has several frequencies: segments in a switch (up to 4), or rows. Choices: Segments up to 4 plans, rows beyond, Segments, Rows. Default: Segments up to 4 plans, rows beyond.
Plan label	Frequency only shows the plan's option, such as 2 weeks, where the app provides one. Choices: Plan name, Frequency only. Default: Frequency only.
Heading	A short label above the options. Leave empty for none. Text.
One-time purchase label	Text.
Subscription label	Text.
Show the saving	A red badge with the percentage saved, computed from the plan's real price. Checkbox. On by default.
Show billing details	For prepaid plans and deposits: what is billed today, what is due later, and a price that changes after a number of orders. Checkbox. On by default.
Show group names	Group names always show when the product has more than one group. Checkbox. Off by default.
Benefits	Up to 5, one per line, shown with a check inside the chosen plan. State only what your subscription terms allow. A product can carry its own list in the metafield custom.plan_benefits (list of single line text). Text, several lines.
Show the description of the selected plan	Checkbox. On by default.
Subscription terms	One line under the plans, such as how to skip, pause or cancel. Text.
Subscription policy page	Opens in a panel from a link beside the terms. Page.
Link label	Text.

Place the block directly above Buy buttons. State only what your subscription terms allow in Benefits. See Apps for setup.

Facts and labels#

Product label#

The description as a label: ruled rows with dotted leaders, closed behind one row that carries two statements. Type the rows in Typed items and Typed rows, or set Source of the items and Source of the rows to a product metafield so each product shows its own. See Custom data.

Product label settings
Setting	What it does
The description as a label: ruled rows with dotted leaders, closed behind one row with two statements.
Heading	Text.
Show open by default	Checkbox. Off by default.
Statements
Use the delivery and returns theme settings	Checkbox. On by default.
First statement	Text.
First explanation	Text.
Second statement	Text.
Second explanation	Text.
In the box
Source of the items	Product metafield reads custom.box_contents on the product of the page. Accepted types: list of single line text written Name \| Quantity; multi-line text with one item per line; or a list of metaobject entries with the fields name, quantity, note, image, icon. A product without it shows the items typed below. Choices: Items typed below, Product metafield (custom.box_contents). Default: Items typed below.
Typed items	One item per line, written Name: quantity. To add a note under the name, write it after a vertical bar: Name: quantity \| Note. Text, several lines.
Show the selected options	Checkbox. On by default.
Show SKU	Checkbox. Off by default.
Show barcode	Checkbox. Off by default.
Show vendor	Checkbox. Off by default.
Show product type	Checkbox. Off by default.
Second group
Second group heading	Text.
Source of the rows	Product metafield reads custom.facts on the product of the page. Accepted types: list of single line text written Label \| Value; multi-line text with one row per line; or a list of metaobject entries with the fields label, value, note. A product without it shows the rows typed below. Choices: Rows typed below, Product metafield (custom.facts). Default: Rows typed below.
Typed rows	One row per line. Separate the label and the value with a colon. Text, several lines.
Sit close to the block above	Checkbox. On by default.

Product facts#

A short table of facts about the product, such as SKU, vendor and your own rows.

Product facts settings
Setting	What it does
Heading	Text.
Show SKU	Checkbox. On by default.
Show barcode	Checkbox. Off by default.
Show vendor	Checkbox. Off by default.
Show product type	Checkbox. Off by default.
Show units in stock	Shows the real inventory count for products tracked by Shopify. Checkbox. Off by default.
Source of the rows	Product metafield reads custom.facts on the product of the page. Accepted types: list of single line text written Label \| Value; multi-line text with one row per line; or a list of metaobject entries with the fields label, value, note. A product without it shows the rows typed below. Choices: Rows typed below, Product metafield (custom.facts). Default: Rows typed below.
Typed rows	Add one row per line. Separate the label and the value with a colon. Text, several lines.

Ingredient list, Evidence list, Question list and Story#

Four blocks hold longer product content as rows: Ingredient list, Evidence list, Question list and Story. Each has a Source setting. It starts on the content typed in the block, which is then the same for every product that uses the template. Switch it to the product metafield to let each product bring its own. See Custom data.

Marks#

Marks settings
Setting	What it does
A row of small badges for what the product is made of or stands for, such as Organic cotton, Recycled or Vegan. They are statements: they open nothing. A mark with an explanation shows it in a bubble on hover, focus and tap.
Heading	A short label above the row. Leave empty for none. Text.
Marks	The product metafield is custom.marks: a list of single line text, or a list of metaobject entries with the fields label, tone, tooltip. Up to 12 marks are shown. Choices: Product metafield, else the list below, Product metafield only, The list below only. Default: Product metafield, else the list below.
List	One mark per line. Add an explanation after a vertical bar: Recycled \| Made from recovered material. Text, several lines.
Show explanations	Checkbox. On by default.

Detail cards#

Detail cards are small cards that each open a panel. On the product page they usually sit at the foot of the first screen and hold the long content: how to use the product, what it is made of, delivery and returns. Each Detail card accepts blocks inside its panel, such as Figure, Text and Collapsible row.

Detail cards settings
Setting	What it does
Cards that each open a panel with the full story. Keep the page light and let people go deep where they choose to.
Heading	Text.
Layout on desktop	On mobile the cards are always rows. Choices: Tiles side by side, Rows. Default: Tiles side by side.
Columns on desktop	Range: 2 to 4. Default: 3.
Large cards	Larger windows, names and spacing. Off, the cards keep their standard size. Checkbox. Off by default.

Settings of Detail card

Detail card settings
Setting	What it does
A card that opens a panel: a sheet from the bottom on mobile, a panel on the right edge on desktop. Use the Detail cards block to set several side by side.
Heading	Text.
Line under the heading	Text.
Icon	Choices: None, Alert, Arrow, Arrow down and 98 more. Default: None.
Porthole image	A small round window on the card. 480 x 480px .jpg recommended. Without an image or a video, the window holds the icon. Image.
Porthole video loop	A short loop without sound, played while the card is on screen. Visitors can pause it, and it never starts when they ask for reduced motion. A square video of 480 x 480px, under 20 seconds, works best. Video.
Link	With a link, the card goes there and opens no panel. Leave empty to open the panel. Link.
Panel
Content	Delivery and returns writes itself from the theme settings and your store policies. Product metafield reads one entry of custom.detail_cards on the product of the page: a list of single line text written Title \| Text, or a list of metaobject entries with the fields title, subtitle, icon, image, body. The entry's title replaces the card heading. A product without it shows the blocks inside this card. Choices: Blocks inside this card, A page, Product metafield (custom.detail_cards), Delivery and returns settings. Default: Blocks inside this card.
Page	Page.
Entry to show	The position of the entry in the product metafield: 1 is the first. Range: 1 to 6. Default: 1.
Text before the content	Rich text.
Panel label	Uses the card heading when empty. Text.
Panel heading	Uses the card heading when empty. Text.
Show the porthole beside the heading	Checkbox. On by default.
Use the full height	Keeps the panel the same size when rows open and close. Checkbox. On by default.
Side on desktop	Choices: Right, Left. Default: Right.

Recommendations#

Often purchased with#

Often purchased with settings
Setting	What it does
Products that go with this one. They come from the complementary products you set in the Search and Discovery app, then from the product metafield custom.pairs_with, then from the products picked here. Prices and totals are the products' own prices.
Heading	Text.
Text	Rich text.
Style	Rows suit accessories added one at a time. The chain shows this product with its companions, a total and one button for the set. The row of cards suits browsing. Choices: Rows with a checkbox and add, Bought together, pictures in a chain, A row of product cards. Default: Rows with a checkbox and add.
Source	Choices: Complementary products, then the products below, Only the product metafield or the products below. Default: Complementary products, then the products below.
Products	Used when the product has no complementary products and its metafield custom.pairs_with is empty. Product list.
Maximum products to show	Range: 1 to 6. Default: 3.
Let customers add the set together	Shows the total of the checked products and one button that adds them all. Sold out products are left out of the total. Checkbox. On by default.
Include this product in the set	Left out for gift cards and for products sold only by subscription. Checkbox. On by default.
Placement	Full width moves the block under the gallery and the column, in the order of the blocks. Heading beside keeps the heading in view on the left while the content scrolls on the right. Applies on the product page. Choices: In the product column, Full width, heading beside, Full width, heading above. Default: In the product column.

Complementary products#

Complementary products settings
Setting	What it does
Rows in one card. Choose complementary products with the Search and Discovery app.
Heading	Text.
Maximum products to show	Range: 1 to 6. Default: 3.
Placement	Full width moves the block under the gallery and the column, in the order of the blocks. Heading beside keeps the heading in view on the left while the content scrolls on the right. Applies on the product page. Choices: In the product column, Full width, heading beside, Full width, heading above. Default: In the product column.

Related products settings
Setting	What it does
Recommendations in the page's column, so the gallery stays in view. They improve as your store gets orders.
Heading	Text.
Layout	Choices: Two columns of cards, Rows in a card. Default: Two columns of cards.
Maximum products to show	Range: 2 to 8. Default: 4.
Placement	Full width moves the block under the gallery and the column, in the order of the blocks. Heading beside keeps the heading in view on the left while the content scrolls on the right. Applies on the product page. Choices: In the product column, Full width, heading beside, Full width, heading above. Default: In the product column.

Recently viewed settings
Setting	What it does
Shows the products this visitor opened before, kept in their browser only. It stays hidden until there is one to show.
Heading	Text.
Maximum products to show	Range: 1 to 6. Default: 3.
Placement	Full width moves the block under the gallery and the column, in the order of the blocks. Heading beside keeps the heading in view on the left while the content scrolls on the right. Applies on the product page. Choices: In the product column, Full width, heading beside, Full width, heading above. Default: In the product column.

Sibling products#

Use sibling products when a color or a flavor is sold as its own product and you want the products to read as one option row. See Sibling products for the metafields.

Sibling products settings
Setting	What it does
Shows separate products as one option row, for example a color sold as its own product. The products come from the product metafield custom.siblings (a list of products). A store that keeps the group in one place can fill custom.product_group instead: one metaobject entry with the fields label and products. Without either, the block prints nothing.
Label	Leave empty to use the label field of custom.product_group, when the product has one. Text.
Style	A swatch takes its color or image from the sibling's metafields, then from Shopify's color data, then from its picture. Choices: Swatches, Pills, Pictures. Default: Swatches.
Maximum products to show	Range: 2 to 24. Default: 12.

Bundles#

The theme has two bundle blocks. They do different things.

Bundle contents#

Lists what a bundle holds, for a product created with the Shopify Bundles app or another bundle app. Shopify gives themes the components of a bundle only in the cart, so the product page needs the list from you: pick the products in the block, or fill the product metafield custom.bundle_items.

Bundle contents settings
Setting	What it does
Lists what a bundle holds, for products made with Shopify Bundles or any bundle app. Fill the product metafield custom.bundle_items (a list of products or variants) and, for quantities, custom.bundle_quantities (a list of whole numbers in the same order), or pick the products here.
Heading	Text.
Products	Used when the product metafield custom.bundle_items is empty. Connect a product list metafield with the dynamic source icon to change it per product. Product list.
Quantities	For the products picked above, in the same order, separated by commas: 2, 1, 1. Left empty, each counts once. Text.
Link each item to its product page	Checkbox. On by default.
Show the price of each item	Checkbox. Off by default.
Show the items' prices added up	Compares the sum of the items' own prices with the price of the bundle. A saving is written only when the bundle really costs less. Checkbox. Off by default.
Placement	Full width moves the block under the gallery and the column, in the order of the blocks. Heading beside keeps the heading in view on the left while the content scrolls on the right. Applies on the product page. Choices: In the product column, Full width, heading beside, Full width, heading above. Default: In the product column.

Bundle builder#

Lets customers build their own set from a pool of products, or step by step, and add it to the cart in one press.

Bundle builder settings
Setting	What it does
Customers build their own set and add it to the cart in one press. Pick the products here for one pool, or add steps to guide the choice. The total is the sum of the products' prices: to give the set a discount, create an automatic discount in Shopify and it shows in the cart.
Label	Text.
Heading	Text.
Text	Rich text.
Products	One pool of products to choose from. Leave empty when you use steps. Product list.
Collection	Used when no products are picked above. Shows up to 24 products. Collection.
Fewest items in the bundle	Range: 1 to 12. Default: 2.
Most items in the bundle	0 sets no limit. Steps add their own limits. Range: 0 to 24. Default: 4.
Summary position on desktop	Choices: Pinned on the right, Under the products. Default: Pinned on the right.
Button label	Text.
Note under the button	For example, how a discount set up in Shopify applies in the cart. Text.
Grouping in the cart
Property name	Text.
Property value	The name of this bundle on the cart line. Left empty, the heading is used. Text.
Placement	Full width moves the block under the gallery and the column, in the order of the blocks. Heading beside keeps the heading in view on the left while the content scrolls on the right. Applies on the product page. Choices: In the product column, Full width, heading beside, Full width, heading above. Default: Full width, heading above.

Settings of Bundle step

Bundle step settings
Setting	What it does
Heading	Text.
Text	Text.
Products	Product list.
Collection	Used when no products are picked above. Shows up to 24 products. Collection.
Fewest items to choose in this step	Range: 0 to 12. Default: 1.
Most items to choose in this step	0 sets no limit. Range: 0 to 12. Default: 1.

What to know before you use it:

The builder adds each chosen product to the cart as its own line. The lines are grouped by a line item property named by Property name.
The total is the sum of the products' own prices. The builder does not create a discount. To discount the set, create an automatic discount in your Shopify admin. It then shows in the cart.
Inventory is tracked per product, as usual.

Reviews and quotes#

Rating#

Rating settings
Setting	What it does
Stars and the number of reviews, read from the standard product rating metafields. Review apps keep them up to date. Nothing shows for a product without reviews.
Size	Sets the size of the stars and of the text beside them. Choices: Small, Medium, Large. Default: Medium.
Show the number of reviews	Checkbox. On by default.
Write the count in words	212 reviews, in place of (212). Checkbox. Off by default.
Link to the reviews block	Checkbox. On by default.
Sit close to the block above	Checkbox. On by default.

Reviews#

Reviews settings
Setting	What it does
A frame for your review app. Add the app's block inside this one: the heading and the summary come from the theme, the reviews from the app. The summary reads the standard product rating metafields, which review apps keep up to date.
Heading	Text.
Show the rating summary	The average as a figure, the stars and the number of reviews. Turn it off when the app's block shows its own summary. Checkbox. On by default.
Text	Rich text.
Set the content in a card	Checkbox. Off by default.
Placement	Full width moves the block under the gallery and the column, in the order of the blocks. Heading beside keeps the heading in view on the left while the content scrolls on the right. Applies on the product page. Choices: In the product column, Full width, heading beside, Full width, heading above. Default: Full width, heading beside.

Add your review app's block inside the Reviews block. See Review apps.

Selected quotes#

Selected quotes settings
Setting	What it does
A few quotes you chose, shown as your selection. For every review with its rating, use the Reviews block with your review app.
Heading	Text.
Label	Says plainly that these quotes were chosen. Text.
Use the product's own quotes	Entries of the product metafield custom.quotes (quote, author, detail) come first, then the quotes typed here. Checkbox. On by default.
Layout	Choices: Cards, A row that scrolls, A list on rules. Default: Cards.
Placement	Full width moves the block under the gallery and the column, in the order of the blocks. Heading beside keeps the heading in view on the left while the content scrolls on the right. Applies on the product page. Choices: In the product column, Full width, heading beside, Full width, heading above. Default: In the product column.

Other blocks#

Share: one small button that opens the device's share sheet where there is one and copies the link elsewhere.
Creator videos: vertical videos as small tiles that open a full-screen player.
Full-width group: holds any blocks and shows them under the gallery at the full width of the page.
Any theme block listed in Sections and blocks, plus app blocks and Custom Liquid.

Placement#

Blocks such as Description, Related products, Often purchased with, Reviews and Bundle builder have a Placement setting with three choices:

In the product column: the block stays in the column beside the gallery.
Full width, heading beside: the block moves under the gallery and the column. Its heading stays in view on the left while its content scrolls on the right.
Full width, heading above: the block moves under the gallery and the column, with its heading above its content.

Full-width blocks appear in the order of the blocks in the editor.

Buy bar#

The buy bar is a floating bar with the product name, the price and the buy buttons. It appears once the buy buttons have scrolled out of view and steps away at the footer, while a panel is open and for sold out products.

Product information settings
Setting	What it does
Show buy bar	Checkbox. On by default.
Show on	The bar appears once the buy buttons have scrolled out of view above, and steps away at the footer, while a panel is open and for sold out products. Choices: Desktop and mobile, Desktop only, Mobile only. Default: Desktop and mobile.
On mobile	With the bar only, the price and the buy buttons in the page step aside and the bar is the place to buy, so it shows from the top of the page. Choices: Buy from the bar only, Buy from the page and the bar. Default: Buy from the bar only.
Show dynamic checkout button	On: the express button takes the row in the bar and add to cart sits beside it. Off, or when the store offers no express method: add to cart takes the row. Checkbox. On by default.
Quantity selector	Mirrors the quantity selector of the buy buttons block: the two always show the same number. On mobile it is left out when the bar also holds an option switch. Choices: None, In the bar. Default: None.
Show product rating	Stars and the number of reviews from the standard product rating metafields that review apps fill. Links to the reviews block. Checkbox. Off by default.
Text after the price	Text.
Terms	Text.

Product templates#

The theme ships several product templates so different products can have different pages. Assign a template to a product in your Shopify admin, on the product's page under Theme template.

Templates
Template	Sections it starts with
`product.bundle`	Product information
`product.catalog`	Product information
`product.full`	Product information
`product.gift-card`	Product information
`product.hero`	Product information
`product`	Product information
`product.simple`	Product information
`product.subscription`	Product information