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. Media Image Padding:

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

2. 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.

3. Image transition on hover

   • Supported options are Fade and Push.

4. Display Vendor:

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

5. 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.

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.