Product cards

This setting allows you to globally configure the display of product cards, ensuring that product presentation aligns with your brand style and enhances the user experience.

Basic Settings

1. Display Vendor:

   • Enabling this option will display the vendor name on the product card, helping users learn more about the product’s origin.

2. Limit Title Length:

   • When this option is enabled, the card product title length is limited to 30 characters.

3. Enable Quick Add Button:

   • When enabled, a quick add-to-cart button will appear on the product card, allowing users to directly add products to their cart, improving the shopping experience's convenience.

   • You can set the add button icon with the following options:

     • Eye

     • Cart

     • Bag

Product image settings

1. Media fit：

   • The available fill options are: Cover (stretched to fill the entire space) and Contain (maintains the original image ratio).

2. Media Image Padding:

   • Use the slider to adjust the padding around the product images, controlling the white space to achieve optimal visual appeal.

3. Media Image Background Opacity:

   • The background color of the media image matches the text color. This option allows you to adjust the background color's opacity, which is suitable for use when product images have transparent backgrounds.

4. Hover to Display Second Image:

   • When enabled, hovering over a product image will display the second product image. This feature allows users to view a different angle or color of the product without leaving the current page.

5. Image transition on hover

   • Supported options are Fade and Push.

Color/Image Sample Settings

1. Enable Color/Image Samples:

   • When enabled, the product card will display the first variant associated with the color metafield, providing users with a visual sample.
2. Variant Image Preview Type:

   • When enabled, the product card will show images for product variants, offering a preview of different options.
   • Note: Ensure that variant images are added for each variant in the product edit page.

Product Rating Settings

1. Display Product Ratings:

   • When enabled, product ratings will be shown on the product card, helping users make informed purchasing decisions.

   • Note: The product rating feature requires the installation of a third-party review app, and the product must have customer reviews to display the rating. Recommended review apps include Alireview, Loox Review, and Judge.me. Ensure that these apps are properly installed and configured to display rating information on product cards.

2. Star Size:

   • Set the size of the rating stars, with small, medium, and large options available to ensure the rating fits the page design.

3. Display Rating Value:

   • When enabled, the numeric rating value will be displayed alongside the stars, providing users with more reference information about the product.