Product sections

Techno has three sections for putting products on any page. They differ in how much a shopper can do without leaving the page.

All three can be added to any template. None can be added to the header or footer.

Product cards

Featured collection, Product recommendations, collection pages and search results all use the same product card. Each card shows:

• The product's featured image, with a "Sale" badge when the price is below the compare-at price, or a "Sold out" badge when nothing is available
• The SKU and product type, in small monospace type
• The title, linked to the product page
• The first 18 words of the description
• The price, shown as "From" the lowest price when variants have different prices
• A stock label: "In stock", "Low stock: 3 left" or "Sold out"

Cards read everything from the product in Shopify admin. To change what a card shows, edit the product: its type, SKU, description or featured image. Collection pages also have "Show vendor", and Theme settings › Product cards adds controls to every card, everywhere cards appear. They're all off by default.

Second image on hover

With "Show second image on hover" on, pointing at a card with a mouse, or tabbing to its title, shows the product's second image in place of the featured one. Moving away brings the featured image back. When the second media is a video or 3D model, its preview image is shown.

• Only on devices with a mouse or trackpad. Phones and tablets always show the featured image.
• Products with one image don't change.
• The second image is only downloaded the first time a shopper points at the card, so pages load no extra images.
• It fades in, except for shoppers who have reduced motion turned on.
• With "Show swatches" on, it doesn't show while the pointer is over the swatches, or after a swatch other than the one the card was shown with has been chosen, so it never covers a swatch's image.

Quick add

With "Show quick add button" on, each card gets the button that fits its product:

• Add to cart, for a product that can be bought as it is: one variant, not a gift card, and no subscription it can only be sold with. It adds the product and opens the cart drawer. For a B2B buyer whose catalog sets a minimum, it adds that minimum and reads "Add 6 to cart". If Shopify refuses the add, for example because the product sold out since the page loaded, its message shows under the button.
• Choose options, for a product with options, one sold only with a subscription, or a gift card, which needs the recipient's details. It opens the product in quick view, on its first available variant.
• Nothing, for a sold-out product. The card's "Sold out" badge and stock label already say so.

With both buttons on, a card shows "Add to cart" and "Quick view", or just "Choose options", which already opens quick view.

Without JavaScript, "Add to cart" still adds the product and takes the shopper to the cart page, and "Choose options" opens the product page.

Quick add doesn't see the Product section's pre-order settings. A product your product page shows as a pre-order is added without the "Pre-order" line item property, as it is from quick view.

Swatches

With "Show swatches" on, a card whose product has an option with swatches, such as Color, shows that option's swatches in a row under the card. Techno uses the first option whose values have a swatch color or image. To give an option swatches, see FAQ › How do I show color swatches?. A product whose options have no swatch data shows no row. A product with a single variant shows its one swatch when that variant's option, such as Color, has swatch data.

• The row shows up to the "Swatches before "+" count" number of swatches, then "+2", a link to the product page. The value the card shows is always among them, even when it comes later in the product's list: it takes one extra place, and "+2" counts the rest.
• Choosing a swatch, by click, tap or the arrow keys, switches the card to that variant: its image if the variant has one of its own, the card's link, and its SKU and stock label. "Quick view" and "Choose options" then open on that variant.
• A value that can't be bought is crossed out, and screen readers hear "Bone, Sold out".
• With a mouse, pointing at a swatch previews its image without changing anything else.
• A variant's image is only downloaded when it's shown, so a grid of 36 cards loads no extra images.
• Without JavaScript, the swatches are shown but can't be chosen, and the card opens the product page as usual.

When the chosen color has no variant with the card's other options, the card links to the product page and hides its SKU and stock label rather than show the previous color's.

Quick view

With "Show quick view button" on, every product card gets a "Quick view" button. It opens a panel over the page with:

• The product's full media gallery: images, videos, YouTube and Vimeo videos, and 3D models, with the "View in your space" cube button on phones and tablets that support augmented reality
• The price, the stock label and the variant picker
• The buy box: quantity, purchase options, the gift card recipient form, Add to cart, accelerated checkout and Shop Pay Installments
• A "View full details" link to the product page, for the variant chosen

On desktop the panel is 960 px wide, with the gallery beside the buy box. On a phone it's full width, with the gallery first. Choosing a variant updates the panel but never the address bar. Adding to cart closes the panel and opens the cart drawer. Escape, the close button or a click outside the panel closes it, and keyboard focus goes back to the card's "Quick view" button.

Nothing is loaded until a shopper opens it: the panel fetches the product's current price, stock and media each time. Without JavaScript, and on a Ctrl-click, Cmd-click or middle click, "Quick view" opens the product page.

What the panel shows is fixed rather than set per template:

• The buy box always uses the Buy buttons block's defaults: the quantity selector, purchase options, accelerated checkout and installments are shown, and there's no returns note. It doesn't follow the Buy buttons settings in your product template.
• The Product section's pre-order settings don't reach it. A variant your product page shows as a pre-order reads "Add to cart" in the panel.
• There's no image zoom in the panel. "View full details" leads to the product page, which has it.

Featured collection

A heading, a "Full index" link to the collection, and a grid of product cards. A newly added Featured collection section starts with the heading "Top of stack".

The grid fits as many cards per row as the page width allows: four at the "Narrow" and "Medium" page widths, five at "Wide". See Typography, layout & brand.

• With no collection chosen, the live store shows example cards and the theme editor shows a prompt to choose one.
• A chosen collection with no products is hidden on the live store, so an empty collection never leaves a gap.

Featured product

A product's full media gallery beside its details, buyable in place. It uses the same blocks as the product page, so a variant change updates the price, stock and buy buttons.

With a combined listing (Shopify Plus), picking a value that belongs to another product of the listing shows that product in the section, without changing the page's address. On the page of one of the listing's products, a Featured product section set to the listing shows that product.

Blocks

New Featured product sections start with Title, Price, Inventory, Variant picker, Description and Buy buttons. You can add:

You can also use Generate to create a block. See AI-generated blocks.

Featured product differs from the product page in two ways:

• Choosing a variant doesn't change the page's web address.
• Description is shortened to 48 words. Add a Product link block so shoppers can read the rest.

You can use more than one Featured product on a page. Each one works independently.

Kits

Prebuilt bundles shown side by side. Each kit is a panel with a tier label, image, title, tagline, price, contents list and an add-to-cart button. A newly added Kits section starts with the heading "Someone already made the decisions for you." and three kits labeled "Tier 01", "Tier 02" and "Tier 03".

Kit blocks

When the kit's price is below its compare-at price, the panel header shows the saving, for example "Save $40.00". Set the compare-at price to the price of the items bought separately to use this.

For a B2B buyer whose catalog sets a minimum for the kit product, Add to cart adds that minimum instead of 1, and the rule shows under the price. See B2B.

The button adds the kit product's first available variant to the cart and opens the cart drawer, unless another drawer is already open. Kits are designed for single-variant products. If a kit product has variants, shoppers can't choose one here; link them to the product page instead.

When a kit product sells out, its button changes to "Sold out" and is disabled.

Until a kit has a product, the live store shows an example card with the kit's tier label, a sample product drawing and no add-to-cart button. Each kit in the row gets a different drawing. A kit whose product has no image shows a sample drawing in the same place, so it lines up with the kits beside it.

Recipes

Two collection rows

• Add section: Featured collection › "Heading": "New", "Collection": New arrivals, "Products to show": 4
• Add section: Featured collection › "Heading": "Best sellers", "Collection": Best sellers, "Products to show": 4

Tiered bundles with savings

• In Shopify admin, create "Starter rig", "Daily driver" and "Full stack" as single-variant products, each with a compare-at price equal to the parts bought separately
• Kits › Kit block × 3 › "Product": each bundle, "Tier": "Tier 01" to "Tier 03"
• Kit › "Kit contents": connect a product metafield of type multi-line text

See also

• Product page: the blocks Featured product shares
• Cart drawer & cart page: what happens after add to cart
• Collection pages: the full collection grid