Product card

How to adjust product card image ratio and add-ons in Zest theme

Steps

1. In the theme editor (Customize), click Theme settings.

2. Locate Product cards.

3. Make necessary changes.

4. Save.

You can control the product image ratio, content, buttons, and badge to show on the product cards.

Image settings

Choose the image ratio of the product cards:

• Adapt to image

• Square (1:1)

• Portrait (3:4)

• Landscape (4:3)

Content

Content alignment can be set as Left/ Center/ Right.

Decide what to show on your product cards, including:

• Show video as featured image (when the video is set first in the Shopify Products > Media list);

• Show second image on hover;

• Show color swatches (See Color swatches 🔥);

• Show vendor;

• Show product rating.

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:

• Sale badge:

Choose your sale badge type as text, percentage, or a fixed amount.

Mobile layout

You can set to hide the Quick add button and the Quick view button on mobile view.