Product pages
The Product information section is built from blocks. Add, remove, and reorder them in the theme editor on the product template.
Layout
Product media sits on the left and the buying information on the right. Content blocks such as Description, Specifications, Downloads, and Collapsible row have a Placement on large screens setting:
- Next to media: shown in the right-hand column, under the buy buttons.
- Below media: shown under the product images, using the full width of the left column.
On small screens, all blocks stack in the order you set in the editor. Turn on Keep product information visible when scrolling to keep the right-hand column in view while customers scroll through images.
Variants and swatches
The Variant picker block shows each product option as Buttons or a Dropdown. When a customer picks an option, the price, SKU, stock status, images, and buy buttons update without reloading the page. Unavailable combinations stay visible but are marked as sold out.
To show color or finish swatches, add swatches to the option values in the product's Variants card in your admin. Swatches can be a color or an image.
When a variant has its own image, that image is shown first in the gallery.
Specifications
The Specifications block builds a table from product metafields. Set it up in two steps:
- In your admin, go to Settings > Custom data > Products and add a metafield definition for each specification, for example Material (
custom.material) or Thread size (custom.thread_size). Then fill in the values on each product. - In the theme editor, select the Specifications block and list the metafields in Product metafields, one per line, as
Label: namespace.key:Material: custom.material Thread size: custom.thread_size Length: custom.length Finish: custom.finish
Rows with no value on a product are hidden. You can also show the vendor, product type, weight, and barcode with the checkboxes in the block.
The same metafields can appear on product cards in the list layout. See List layout.
Downloads
The Downloads block lists manuals, data sheets, and safety sheets from a file metafield.
- Add a product metafield definition with the type File, and choose List of files if a product can have more than one. For example,
custom.documents. - Upload the PDF files to each product's metafield.
- In the block's File metafield setting, enter
custom.documents.
Use Extra link label and Extra link for a document that applies to every product, such as a warranty page.
Bulk order table
The Bulk order table block lists up to 50 variants of the product, each with its SKU, price, stock, and a quantity field. Customers enter quantities for several variants and add them to the cart in one click. It's ideal for screws, bolts, and fittings sold in many sizes. The block only appears on products with more than one variant.
Volume pricing and quantity rules
When a B2B customer is signed in, the Volume pricing block shows the quantity rules (minimum, maximum, and increment) and price breaks from their B2B catalog. The quantity selector follows the same rules. These come from Shopify B2B, which is available on Shopify Plus. The block stays hidden for customers without a B2B catalog.
Stock status
The Stock status block shows "In stock", "Low stock", or "Out of stock" from your real inventory. Set the number that counts as low stock in Theme settings > Product cards > Low stock threshold. Products that don't track inventory show no stock message.
Pickup availability
When local pickup is turned on for a location in Settings > Shipping and delivery, the Buy buttons block shows whether the selected variant can be picked up and how soon.
Buy buttons
- Show quantity selector adds a quantity field next to the Add to cart button.
- Show dynamic checkout buttons shows accelerated checkout buttons, such as Shop Pay, PayPal, or Apple Pay, depending on what your customer uses.
- Show recipient form for gift cards lets customers send a gift card to someone else, with a message and a delivery date.
Subscriptions and other selling plans from apps appear above the buy buttons automatically. Shop Pay Installments messaging appears under the price when it's available for your store.
Complementary products
The Complementary products block shows items that go with the product, such as drill bits for a drill. Choose them in the Shopify Search & Discovery app under Product recommendations. The Related products section below the product uses Shopify's automatic recommendations.
Media
Product galleries support images, videos, YouTube and Vimeo links, and 3D models. Customers can swipe through media on mobile. For the cleanest catalog look, use product photos on a plain background and keep Media fit set to Show full image.