Product cards

How to adjust product card image ratio and add-ons in Zest theme
In this article:
  1. 1.
    In the theme editor (Customize), click Theme settings.
  2. 2.
    Locate Product cards.
  3. 3.
    Make necessary changes.
  4. 4.
A screenshot of product cards settings position in theme settings
You can control the product image ratio, content, buttons, and badge to show on the product cards.

1. Product image

Choose the image ratio of the product cards:
  • Adapt to image
  • Square (1:1)
  • Portrait (3:4)
  • Landscape (4:3)

2. Content

Decide what to show on your product cards, including:
  • Show second image on hover
  • Show color swatches
  • Show vendor
  • Show product rating

3. Button and Badges

In the Button Settings, you can enable or disable to show:
  • Quick add button: to let customers add items to their cart without actually completing the payment (for products that don't have any variants).
For products that have variants, the button will become a "Choose options" button.
  • Quick view button: to let customers preview the detailed product information without actually going to the product page.
  • "Choose options" action: to set the action for the Quick add button on products with variants either as opening a simplified popup modal or going to the product page.
The popup opened when selecting the "Choose options" button includes the basic information of the product, namely:
  • product title;
  • product price;
  • variants;
  • quantity selector;
  • buy buttons.
The "Choose options" action setting is available on Zest version 5.0.0 and above.
In the Badges Settings, you can choose to display or hide:
  • Sold out badge:
An example of sold out badge on product cards
  • Sale badge:
An example of sale badge on product cards
Choose your sale badge type as text, percentage, or a fixed amount.