# Product Card

## **Product label settings**

<figure><img src="/files/6Q5DPQzzjnY4VmDBVJQ6" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ooPeuT2XIXbIm8Jmh69W" alt=""><figcaption></figcaption></figure>

### Labels

<figure><img src="/files/hAAgUkBc8rUjNb3QeLEP" alt=""><figcaption></figcaption></figure>

1. **`Enable labels`** - the setting is responsible for whether **labels (badges/tags)** will be shown on the product card. For the label to be displayed, a tag must be added to the product, for example, `label_new` is the base label that will display `NEW` with the base color. To change the type of a label, you need to add a `:type`, such as `label__new:primary` or `label__new:secondary`. The number of displayed **labels is limited to 3,** as well as a `soldout` **label** in case the product is not available;
2. For each type of **label,** there are color settings. This way you can change the color for the **label** text: `primary`, `secondary`, `base`, `soldout`;
3. The background is specified for each **label**;
4. The border color is specified for each **label**;
5. Background transparency is specified for each **label** using a range **step** range of 10%. The minimum value is **10%** and the maximum is **100%**.

You can add image labels, like this:

<figure><img src="/files/IXS7q5b2bH56G0oJfLqI" alt=""><figcaption></figcaption></figure>

To do this you need add a metafield to the product.

Go to the Admin panel / Settings/ Custom data

<figure><img src="/files/NXFUAbew8ktrO8MdJ5Nj" alt=""><figcaption></figcaption></figure>

Select “Products” metafield:

<figure><img src="/files/5xJGYJT3WbC9XA9CYAGw" alt=""><figcaption></figcaption></figure>

Click “**Add definition**” button:

<figure><img src="/files/YtUToxKfORQgwDEJgSu6" alt=""><figcaption></figcaption></figure>

Create a metafield with “**Badge image**” name. Check the “Namespace and key” is "**custom.badge\_image**”. Choose the “File” type, “List of values” and accept only the images.

You can add a MAXIMUM 3 logo images.

<figure><img src="/files/1y38LG4lRRrigOUfSBfu" alt=""><figcaption></figcaption></figure>

## **Product card settings**

<figure><img src="/files/NOcrZ9kRHqEyhbTJyXTk" alt=""><figcaption></figcaption></figure>

### General

<figure><img src="/files/FqdAOQho5zxhwV4yeBGy" alt=""><figcaption></figcaption></figure>

1. **`Show vendor`** - the setting is responsible for showing/hiding the product vendor;
2. **`SKU text`** - the setting is responsible for show a SKU of the product;
3. **`Enable quick view`** - the setting is responsible for enabling/disabling quick view. Otherwise, the user will need to go to the product to see other options and add to the cart;
4. **`Quick view button type`** - the setting is responsible for the appearance of the quick view button;
5. **`Show currency code`** - setting responsible for whether the **currency code** will be shown;
6. **`Enable image change on hover`** - the setting is responsible for whether the second image (video) will be shown on **hover**. By default the second product image will be used for the hover. To add an image (video), you need to add the `product_card.hover_image` **metafield**, where `product_card` is the **namespace** and `hover_image` is the **field name**. The `Content type` must be a `file`.
   * If **color swatches** are disabled, then you need to add this field only to the product;
   * If **color swatches** are enabled, you must also add this field to the variant;
   * If **color swatches** are enabled and other options are present, for example, **size**, **material**, etc., then you need to add an image only to the first variant of each color.
7. **`Image aspect ratio`** - aspect ratio of the image. Can be “Square” or “Portrait”.
8. **`Object fit image`** - the setting is responsible for stretching the image. If **Cover(default)** is selected - the image will take all the space available for it, that is, it will stretch as much as possible, and if **Contain** - it will retain its proportions.

### Colors

<figure><img src="/files/6gBdusoMkd6k4uKPFM00" alt=""><figcaption></figcaption></figure>

1. **`Quick buttons background`** - setting allows you to specify the background color of quick buttons;
2. **`Quick buttons border color`** - setting allows you to specify the border color of quick buttons;
3. **`Quick buttons color`** - setting allows you to specify the icon color of quick buttons.

### Text button colors

<figure><img src="/files/y84GZU6YjxNE7OKRUPqn" alt=""><figcaption></figcaption></figure>

1. **`Text`** - the setting allows you to set the color of the button text;
2. **`Background`** - the setting allows you to set the color of the button background color;
3. **`Border`** - the setting allows you to set the color of the button border color;
4. **`Text (hover)`** - the setting allows you to set the color of the button text on hover;
5. **`Background (hover)`** - the setting allows you to set the color of the button background color on hover;
6. **`Border (hover)`** - the setting allows you to set the color of the button border color on hover.

## **Additional information**

1. **Color swatch** settings. **Color swatches** depend on the `Color` option. The name of the color is split, and the last word is taken and substituted into the **CSS palette**. There is a chance that this color will not be in the **CSS palette**, then it will just be a white **swatch**. In this case, you must add an image to **Shopify** files of `50*50` px size in `.png` format with the `swatch-` prefix. For example, the image name for `banana-yellow` would be `swatch-banana-yellow.png`.
2. **Color swatch** settings. For example, if a user has a purely German store, whose color option is called - `Farbe`, thus the user will need to specify the name in the **swatch option** setting. The default value is `Color`.
3. **Labels settings**. For the **label** to be displayed, a tag must be added to the product, for example, `label_new` is the base **label** that will display `NEW` with the base color. To change the type of a **label**, you need to add a `:type`, such as `label__new:primary` or `label__new:secondary`. The number of displayed **labels** is **limited to 3**, as well as a **soldout label** in case the product is not available. Also you can add a 3 images label with metafields.
4. **The second image is on hover** settings. To add an image, you need to add the `product_card.hover_image` metafield, where `product_card` is the **namespace** and `hover_image` is the **field name**. The `Content type` must be a `file`, where only one file is allowed, namely an image.
   * If **color swatches** are disabled, then you need to add this field only to the product;
   * If **color swatches** are enabled, you must also add this field to the variant;
   * If **color swatches** are enabled and other options are present, such as `size`, `material`, etc., then you only need to add an image to the first variant of each color.
5. You can add an extra information about the product:

<figure><img src="/files/T5aF8hkwndRDZHTadCqo" alt=""><figcaption></figcaption></figure>

To do this you need to add a metafield to the product. Add to the product a metafield with a name “**Extra properties**”. Check the “Namespace and key” is "**custom.extra\_properties**”. Choose the “Single line text” type, “List of values”.

Wrap a name of the property to the `<span>` tag. Example: `<span>`DIsplay type`</span>` OLED.

See the example in the screenshot:

<figure><img src="/files/0YBdCelQhtOpEJe2pSRV" alt=""><figcaption></figcaption></figure>


---

# 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://utd-bv.gitbook.io/manual-shopify-theme-ultra/theme-settings/general/product-card.md?ask=<question>
```

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.