# 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](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields), 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://en-ascent.webvista.studio/global-settings/product-cards.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.