CALIPRY

How to arrange the product page

Last checked against Splash 1.0.0 / 2026-08-15

The product page is built from blocks you drag into the order you want. Everything a shopper acts on sits in the buy column beside the gallery; everything they read sits in full-width bands underneath it.

Open Online Store, then Themes, then Customize. Change the template dropdown at the top of the editor to Products, and pick a product to preview. The section named Product in the left-hand list is the whole page above the recommendations.

How the page is laid out

From 990px wide the page is two columns: the gallery on the left, slightly wider, and the buy column on the right. The gallery stays in place while the buy column scrolls past it. Below 990px the gallery sits above the buy column in one column.

Three of the blocks do not stay in the buy column at all. The Full description, Specification table and Shipping and returns blocks are collected and drawn as full-width bands beneath both columns, because reference material reads better across the page than squeezed into half of it. Dragging one of those three changes the order of the bands, not where they appear.

The block list

Click the Product section to see its blocks, then drag them to reorder. Every block except Custom Liquid is limited to one per section. App blocks are accepted too, wherever you drop them.

Block What it prints Where it lands
Vendor The product's Product type, in small capitals above the title. It falls back to the Vendor field only when the product has no type, and prints nothing when both are empty. Buy column
Title The product title, as the page's main heading. Buy column
SKU The selected variant's SKU. It is hidden on a variant with no SKU, and it rewrites itself when the shopper changes variant. Buy column
Price Price, a struck-through compare-at price when there is one, unit price where the variant has a measurement, and the line "Taxes and shipping calculated at checkout." Buy column
Variant picker One labelled group of buttons per option, showing a colour or image swatch wherever the option's values carry one. It prints nothing on a product with a single variant. Buy column
Description The product description under a small "Description" label. The Full description band changes what it shows, which is covered below. Buy column
Rating A line reading "Rated 4.8 out of 5 from 24 reviews". It appears only when a review app has written the two metafields named in Theme settings. Buy column
Spec bars Up to three specifications drawn as proportional bars, so the shape of the product reads before the numbers do. Buy column
Package contents A per-product list read from a metafield, inside a disclosure headed "Package includes". Buy column
Add-ons Up to four accessories with their own Add to cart buttons. Buy column
Buy buttons Stock line, quantity stepper, Add to cart, accelerated checkout, the gift card recipient form, the back-in-stock form and the sticky bar. Buy column
Pickup availability Up to three locations and whether the selected variant can be collected there. Buy column
Custom Liquid Whatever you put in it. This is the one block you can add more than once. Buy column
Full description The whole description, with its own caption and heading. Band
Specification table Up to eight metafield rows, drawn as two ruled tables side by side. Band
Shipping and returns Your shipping and returns terms, taken from Theme settings. Band

The theme ships with fifteen blocks in place, everything above except Custom Liquid, in this order: Vendor, Title, SKU, Price, Description, Rating, Variant picker, Buy buttons, Spec bars, Pickup availability, Package contents, Add-ons, Full description, Specification table, Shipping and returns.

Note The arrangement applies to every product using this template. To give one group of products a different arrangement, use the template dropdown at the top of the editor to create a second product template, then assign it to those products under Theme template on the product page in Shopify admin.

Blocks that need something set up first

Spec bars, Specification table, Package contents

All three read product metafields you create yourself. Nothing appears until the metafields exist and a product carries a value. See how to show your specifications.

Rating

Needs a review app writing a rating value and a rating count into product metafields, and both keys entered under Theme settings, then SEO and structured data, then Ratings. Do not type ratings in by hand.

Pickup availability

Needs local pickup switched on for at least one location in Shopify admin. With no pickup-enabled location the block prints nothing.

Shipping and returns

Driven entirely by Theme settings, then SEO and structured data. With both master switches off the band prints nothing on the storefront, though the editor shows a hint telling you where to fill it in. See shipping, returns and search engine details.

Buy buttons

This block carries four settings, all on by default.

Show dynamic checkout buttons

Shop Pay, PayPal, Google Pay and the rest. They are hidden automatically whenever the selected variant is sold out, and they are absent entirely on a store with no accelerated payment provider set up, whatever this setting says. Shopify's instalments message is separate: it shows whenever your store offers instalments, and it is hidden on a sold-out variant too, but this checkbox does not control it.

Show gift card recipient form

Adds a "Send as a gift" disclosure with recipient email, name, message and a send date. It appears on gift card products only. On every other product the setting has no effect.

Show back-in-stock request when sold out

Adds an email field under the disabled Add to cart button on a sold-out variant.

Show sticky buy bar

Repeats the product title, price and buy button at the foot of the screen.

What the back-in-stock request actually does

It is Shopify's own contact form. When a shopper submits it, an email arrives at your store notification address naming the product, the variant they were looking at, and the page they sent it from. The shopper sees a confirmation reading "Thanks. We'll email you when this is back in stock."

Limit Nothing is automated. A theme cannot watch your inventory or send mail on your behalf, so you are the one who replies when the product returns. If a back-in-stock app already handles this, turn the setting off so shoppers are not offered two routes.

When the sticky bar appears

It stays out of the way until the shopper has scrolled the real Add to cart button up behind the header, so it never offers an action that is still on screen. It hides again as soon as the footer comes into view. On a quote-only product the bar carries "Price on request" and the quote button instead.

The long-form bands

Full description, Specification table and Shipping and returns are drawn together below the two columns. How they are drawn is one setting: select the Product section itself, not one of its blocks, and set Product information display.

Tabs

The default. One band shows at a time behind a strip of tabs. Arrow keys move between them.

Stacked

Every band is drawn down the page, one after another, each with its own caption and heading.

Three things override the choice, and all three fall back to Stacked:

  • Only one band has content. A single tab is a label pretending to be a control, so it is drawn as a plain band instead.
  • A band resolves to nothing and drops out, leaving one behind. A Specification table whose rows are all empty on this product is not a tab with nothing behind it, it is absent.
  • The visitor has JavaScript turned off. Every band is in the page either way, so nothing is ever unreachable.

Tab label and Caption

Each of the three band blocks carries both. Tab label is what the tab strip prints. Caption is the small line above the heading in the stacked layout.

Note The Caption field is hidden on the storefront whenever Product information display is set to Tabs, because the tab already names the band. Switch to Stacked if you want captions to show. The field stays editable either way.

Block Tab label Caption Heading
Full description Overview Overview About this product
Specification table Specifications Specifications Full technical data
Shipping and returns Shipping and returns Terms Shipping and returns

Two behaviours of the description worth knowing

The Description block in the buy column and the Full description band both read the same product description, so the theme keeps them from repeating each other.

Adding the Full description block trims the buy column

While that block is present, the Description block above the buy button shows only the first paragraph of the description. A description written as a single paragraph has no break to cut at, so it is cut to its first 40 words instead, with any bold or links dropped. Remove the Full description block and the buy column shows the whole thing again. Nothing tells you this in the editor, so if your buy-column description suddenly looks short, check whether the band is there.

The Full description band hides itself on a short description

A description that is a single paragraph of 40 words or fewer is already shown in full in the buy column, so the band would only repeat it. It stays out of the page, and there is no Overview tab. Write a second paragraph, or more than 40 words, and it appears.

If you would rather the buy column said something other than that trimmed opening, the Description block has a Short description metafield setting, shipped as custom.short_description. A product with a value there shows that text in the buy column instead, untrimmed, and the full description still fills the band. See how to show your specifications for creating the metafield.

There is no separate thumbnail strip and nothing to configure. The first image is the large 4:3 stage. Every other image is a square thumbnail on the row beneath it, four across at every screen width. Clicking a thumbnail promotes it to the stage and the picture that was on the stage takes its place in the row, so the row never changes length.

A product with a single image gets no controls at all, because there is nothing to select between. Videos, external videos and 3D models sit in the same gallery. A 3D model is never cropped to fill its frame.

The order is the media order on the product in Shopify admin, so change the stage by dragging a different image first there.

What an empty product shows

A product with no media uploaded draws labelled slots rather than a grey box, so you can see what the page is asking for. The lead slot is captioned "Product photograph" and states 1600 x 1200px. The four square slots below it are captioned "View 1" through "View 4" and expect 800 x 800; they are too small to print the measurement.

Add-ons

The Add-ons block is the finish-the-order list: up to four accessories in a disclosure in the buy column, each with its own Add to cart button. Adding one posts to the cart in the background and opens the cart drawer over the product the shopper is still reading.

Heading

Defaults to "You may need".

Products

Up to four, chosen by hand.

Show description line

On by default. Prints the first sentence of each accessory's own description under its title.

Open by default

On by default. The disclosure is expanded when the page loads.

Limit This is a template setting, not a per-product one, so the same four accessories appear on every product using the template. The theme does drop the product being viewed from its own list, so a pump never advertises itself as its own accessory, and a list holding only that product renders nothing at all.

If you want different accessories on different products, create a second product template and give it its own Add-ons list. If you want automatic pairings rather than a fixed list, use the Complementary recommendations section further down the page instead.

An accessory that is itself tagged quote-only shows a Request a quote link rather than an Add to cart button, so the row never offers to sell work that has to be scoped first.

Note The block ships pointing at the demo store's three products, with handles lumen-p4, helm-controller and halo-landscape-set. Those do not exist on your store, so the block renders nothing until you choose your own. In the editor it shows the line "Choose products to show here."

Product recommendations

Two of these sections ship on the product template, one above the other, so you can run a complementary row and a related row together. Each has three settings.

Heading

Leave it blank and the section uses "Pairs with" for complementary and "Related products" for related.

Recommendation type

Related, which Shopify chooses for you from what shoppers do, or Complementary, which shows only the pairings you set.

Products to show

2 to 8, defaulting to 4.

Requires Complementary recommendations come from Shopify's free Search & Discovery app. Install it, open its Product recommendations tab and set pairings per product. With no pairings set, a Complementary section is absent from the page.

Recommendations are fetched after the page has loaded, and they need JavaScript. If Shopify has too few products to recommend, the section is absent rather than empty. They can only be placed on the product template.

Limit Neither Product recommendations nor Quick view can be added back from the editor. They have no entry in the Add section list, so deleting one is not reversible. Duplicate the theme before you remove either.

Product details, an optional extra section

If the buy column and the three bands do not cover what you need to say, add the Product details section from Add section on the product template. It is a numbered stack of disclosures, 01, 02, 03, for content that is read rather than acted on: compatibility notes, installation, care, warranty wording.

Caption and Heading

The small line and the heading above the stack. Heading defaults to "Product details". Clearing it hides the heading but keeps the section.

Layout

Accordion or Tabs, defaulting to Tabs. Tabs need at least two items and fall back to the accordion when scripts are off.

Up to eight blocks, in any mix:

Block Content How many
Description The description from the product's own page in Shopify admin. 1
Specification table Eight more metafield rows, for the values that did not earn a place beside the price. 1
Metafield content Any product metafield, entered as namespace.key. Multi-line text becomes one row per line, a list type becomes a list, rich text keeps its formatting. Several
Text Rich text you type once, printed the same on every product using the template. Several

Every block carries a Heading and an Open by default checkbox. Open by default opens the item on load in the accordion layout, and chooses the starting tab in the tabs layout.

Note An item with no heading, or with nothing to show on this product, is left out of the storefront entirely rather than drawn as an empty panel. In the editor it stays visible as a line telling you what it still needs, and it does not take a number, so the published sequence never skips from 01 to 03.

To put a working buy box on a page that is not a product page, add the Featured product section. It can go on any template: home, a page, a blog. Choose the product in the section settings, and give it a Caption and Heading if you want a section title above it.

It carries a shorter block list than the product template: Vendor, Title, SKU, Price, Description, Buy buttons, Custom Liquid and app blocks. A few differences worth knowing before you use it:

  • The Description block truncates to 40 words rather than printing the whole description.
  • The variant buttons are part of the Buy buttons block, not a separate block.
  • Choosing a variant here never rewrites the address bar. Only the product template does that.
  • Buy buttons has one setting, Show dynamic checkout buttons. There is no sticky bar, no back-in-stock form and no gift card recipient form.
  • The gallery shows up to four images with no stage and no selection.

With no product chosen the section shows "Choose a product to feature." in the editor and nothing on the storefront.

Quote-only products

A product tagged for quotes replaces its whole buy stack with a quote panel: no price, no quantity, no Add to cart, no accelerated checkout, no pickup. The Price block prints "Price on request" instead. You do not arrange this separately, it follows from the tag. See how to turn a product into a quote-only product, and why the theme quotes rather than carts.

One arrangement decision does belong here: a quoted service has no delivery time, so remove the Shipping and returns block from the template that quoted products use, or give them a product template of their own.

Something wrong here If a step does not match what you see, say so and it gets fixed. Documentation goes stale, which is why the line under the title carries a date.