Product cards

Product cards show in the Products, Featured collection and Image with product sections, and in product and collection blocks. They share one look, so a change in one changes them all. To give a section its own look, untick Same look as the other product sections.

Content tab

Product grid

• Layout: a grid, or a carousel shoppers swipe sideways.
• Swipe through products on phones: a grid on computers, a swipeable row on phones.
• Products per row on computers (1 to 4) and phones (1 or 2), and text alignment.

Product card

• Show text: hidden, the description in 3 lines, or the full description.
• Show money saved ("Save $5") and a Sale badge on products on sale.
• Show vendor, Show product type, Show quantity picker, Hide price.

Images

• Product photo shape: square, portrait, landscape, the original shape, or your own (height compared to width).
• Corner roundness and image fit (fill the frame, or show the whole picture).
• Which image: the chosen variant's, the product's featured image, or its second image.
• More product images: small thumbnails to click through, or a slideshow shoppers swipe.
• Show the second image on hover.

Variants (sizes, colours and other options)

• Dropdown or Boxes to choose before adding to the cart.
• Quick add (over image): buttons on the picture add that variant straight to the cart. On phones they're always showing.
• Hidden: the best-matching variant is added.
• Separate product items: each variant is its own card.
• Show the variant name instead of the product title, and Hide sold-out variants.

Advanced settings

• Open products in a new tab.
• Show only in-stock products (for the whole quiz).
• Hide "Add to cart", and Hide links from product image and title.
• Button text, like "Add to bag".

Style tab

• Product card buttons: colour palette, size, style (solid, outline or text link) and full width.
• Card text: choose the product name, vendor, type, description, price or variant, and set its colour, normal, italic or uppercase, weight, size on computers and phones, and letter spacing. Empty boxes follow your theme.