Product and collection grids show each item as a card. You design the card once in the section, and every card in that section follows it.
Where the cards are
- The Product card block is in Featured products, Related products, Search products, and Collection products.
- The Collection card block is in Collections and Sub collections.
In the builder, select the section, then the card block. Each section has its own card, so a change only affects that section. The card block cannot be deleted, but its parts can: hide or delete a part, or add it back with Add new block.
Product card
On the card itself, Use parent color scheme is on by default. Turn it off to give the cards their own Color scheme. Drag the parts to change their order on the card. Its parts are:
- Image: Aspect ratio (Auto, Portrait, Square, or Landscape) and Image fit (Cover fills the frame, Contain shows the whole image). Image fit is hidden with Auto.
- Title: Preset (text style), Line height, Letter spacing, and Max lines (1 to 3, longer names are cut with "...").
- Price: the price, with the old price crossed out on a sale. Savings shows a badge as a Percentage, a Price (the amount saved), or None. It only appears on products with a discounted price.
- Rating: stars and the number of reviews. Products with no reviews show no stars.
- Buy: the button, and the variants.
The Buy part
- Action: Checkout lets shoppers buy from the card. Link opens the product page.
- Label: leave it empty for the default: "View product" with Link, and with Checkout "Add to cart" or "Buy now", following the Checkout method in Checkout settings.
- Style: Primary or Secondary button colors.
- Show variants, with Size and Shape (shape applies to color and image swatches only): shoppers pick an option on the card. Only the first variant group shows on the card. Variants never show with Link.
A product where every option is out of stock shows a disabled "Out of stock" button with Checkout.
Collection card
Card style: Standard puts the text below the image, Overlay puts it on the image. You also get Use parent color scheme. The parts are:
- Image: Aspect ratio, Image fit, and Overlay opacity (with Overlay only, a darker image makes text easier to read).
- Title: Preset, Line height, Letter spacing, Max lines (1 or 2), and Alignment.
- Product count: the number of products in the collection. It has no settings: hide or delete it to remove it.
- Button: Label (empty uses a default label in your store language), Style, and Width (Fit or Fill). It always opens the card's collection.
The collection card always shows its parts in the same order: image, title, product count, then button.
Good to know
- Card corners, borders, and shadows come from your theme. Card colors come from the color scheme.
- No Savings badge? The product needs a discounted price, see How do I set product prices, discounts, and per-market pricing?