Product information

What it does

The main section of the product page. On the left, the gallery: all media of the product as a large image with thumbnails below or to the left, or as a grid, with badges over the image and a swipe row with a thumbnail strip on a phone. On the right, the buy box: a column of blocks in a color scheme of its own, on a card or on the page. Sticky product information keeps the buy box in view while the gallery scrolls.

Everything a visitor reads and clicks in the buy box is a block. Add the ones you need, drop the ones you do not, and drag them into the order that sells your product. Blocks marked Show below product media move under the gallery instead.

When to use it

It is on the product template already. To give one group of products a buy box of its own, duplicate the product template in the theme editor and assign it in the admin under the product’s Theme template. Build one template per product type, not per product.

Blocks

Identity and proof:

• Vendor: the brand name, optionally linked to the vendor collection.
• Label: a small kicker such as Bestseller or New formula.
• Product title: the h1 of the page.
• Rating: stars and count from a review app’s rating metafields. Shows nothing without them.
• Trusted by: three small customer portraits, their names and a line such as “and 20,000+ others trust us”. Use real figures; the review checks.

Price and choice:

• Price: the price of the selected variant with compare at price, and a small badge: price per serving (needs Servings per pack and a Serving name) or saving in percent.
• Variant picker: the product’s options as buttons or swatches.
• Bundle row: two or three pack cards instead of a plain option list. Each Bundle tier names the option value it stands for (such as 90-day), a badge (Most popular), a note (Best value), the number of units for the per unit price, and a feature list. The cards are built from real variants, so the cart and the order stay correct.
• Low stock: “Only 3 left” from the real inventory of the selected variant, shown from a threshold down. Never shown for products that do not track inventory.
• Quantity: a quantity field with plus and minus.

Buying:

• Buy buttons: add to cart and the accelerated checkout button, with the price in the button if you want it, and a note shown while the selected variant is sold out.
• Shop Pay Installments: Shopify’s installment line, where available.
• Add-on: one product offered beside the buy button with a check box to add it.
• Gift card recipient: the recipient form, shown on gift card products only.
• Payment icons: the icons of the payment methods your store accepts.

Reassurance:

• Benefits: three or four key points in boxes or as a plain list, with a heading.
• Trust pills: short promises as pills from a comma separated list.
• Delivery estimate: “Order within 2:14 h and get it by Monday, May 4”, worked out from your cutoff hour, shipping days and delivery time. It counts down from real settings and never resets to invent urgency.
• Pickup availability: whether the selected variant can be picked up at a location.
• Share: share buttons for the product.

Detail:

• Description: the product description from the admin.
• Text: a free paragraph.
• Collapsible row: a title that opens to an answer, for ingredients, shipping and returns, how to use. Connect the content to a product metafield to write it per product.
• Video testimonials: a row of short customer clips that open in a lightbox, with its own heading. Best under the gallery.
• Spacer: extra space or a line between two blocks.
• Custom Liquid and App blocks: for app snippets and anything the blocks do not cover.

Setting it up

1. Choose Gallery layout and Image ratio. Square for packshots on a tile, Portrait for bottles.
2. Pick the Buybox color scheme and Buybox spacing.
3. Add and order the blocks. Start with the default order in the tips and remove what you do not need.
4. For a product with pack sizes, add a Bundle row, then one Bundle tier per size and type the option value exactly as in the product’s options.
5. Mark Description, Collapsible rows and Video testimonials Show below product media.
6. Fill Delivery estimate with your real cutoff and shipping days, or remove it.