Product elements bind your layout to Shopify product data. Open Insert → Shopify → Product to add a complete Product card or any individual product field.
Product card
The Product card preset drops in a ready-made block: a featured image, the product title, the price, and an Add to cart button. It's a good starting point for collection grids, recommendation rows, and featured-product sections.
After inserting it, connect the card to a product with Shopify content, or place it inside a Repeat on container (such as collection products) so each repeated card shows a different product automatically.
Customize the card by editing its child elements — change the typography, swap the button's action, or add a badge with conditional visibility (for example, show "Sale" when a compare-at price exists).
Individual product fields
The Product group also includes single-purpose elements you can arrange freely:
Title — the product name.
Description — the product description.
Image — the product's featured image.
Quantity select — a quantity stepper tied to the product form.
Price — the current price, with styling for sale and compare-at prices.
Button — an add-to-cart control for the connected product.
Checkout — a button that goes straight to Shopify checkout.
Stock alert — inventory messaging (see Stock alerts).
Payment icons — your store's payment method icons.
Gallery — a media gallery with thumbnails (see Product galleries).
Build a custom buy box by combining these fields inside Column or Grid containers instead of using the full card preset.
Connect Shopify content
Select the container that holds your product fields and connect it to a product with Add Shopify content in the Design panel. On product templates you can skip this step — the template is always connected to the product the shopper is viewing, and the resource you pick in the builder is only a preview.
Elements inherit the product of their nearest connected container, so connect one container and build inside it. Use Layouts & layers to check which container holds the product context before editing child fields. See Connect Shopify content to a layout.
Repeat and conditional display
Wrap product fields in a container and set Repeat on to collection products, related products, or complementary products to build catalog and recommendation rows. Each repeated instance uses that row's product. See Repeat elements over data.
Apply conditional visibility to child elements to hide or show them per product — for example, hide the Button when a product isn't available for sale.