# Product

This settings block is intended for general **Product** settings on the site.

In order to get to the **Product** settings block, you need to go to **`Customizer`** → **`Theme Settings`** → **`Product`**.

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

## **Settings**

### General

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

1. **`Default product image`** - this image will be used when the product has no image;
2. **`Show unit price`** - the setting is responsible for displaying the **Unit price**. More information here - <https://help.shopify.com/en/manual/intro-to-shopify/initial-setup/sell-in-germany/price-per-unit>.

### Swatches

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

1. **`Enable color swatches`** - the setting is responsible for whether **color swatches** will be displayed on the product card. **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 `swatch-` prefix. For example, the image name for **banana-yellow** would be `swatch-banana-yellow.png`;
2. **`Swatch option`** - \*\*\*\*the setting is intended for stores that have a different option for **color swatches** than **color**. For example, a user has a purely German store, whose color option is called - `Farbe`, thus the user will need to specify a name for this setting. The default value is `Color`.

### Labels

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

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

1. **`Enable labels`** - the setting is responsible for whether **labels** 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%**.

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

**HINT**: you can also add an icon to the your labels

To do this you need:

1. Copy the name of the label from the admin product page without color identificator (”:primary”, “:secondary”). For example, if your label is “**label\_\_top:secondary**”, just a copy “label\_\_top”

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

2. Prepare an image file with the name in next format: \[label name].png . Where \[label name] is a name of your label that you copied in the previous step. “PNG” format is important. So your file name must be a “**label\_\_top.png**”. If you have a product tag with few words, like a “label\_\_Top sale:secondary”, you need replace a white space with a “-” symbol. So a file name for the “label\_\_Top sale:secondary” tag will be “**label\_\_Top-sale.png**”. The size of the image must be **40x40 pixels**;
3. Upload an image in the admin panel “Content / Files”.

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

### Swatches

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

1. **`Enable color swatches`** - the setting is responsible for whether **color swatches** will be displayed on the product card. By default, Shopify swatches will be used. Learn more about setup swatches for product options - <https://help.shopify.com/en/manual/products/details/product-category> . If Shopify swatches are not added, then theme swatches will work. **Color swatches** depend on the **Color** option. If the name of the color is split, then 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 `swatch-` prefix. For example, the image name for **banana-yellow** would be `swatch-banana-yellow.png`;
2. **`Swatch option`** - the setting is intended for stores that have a different option for **color swatches** than **color**. For example, a user has a purely German store, whose color option is called - `Farbe`, thus the user will need to specify a name for this setting. The default value is `Color`. **NOTE**: This setting works only for the theme swatches, not for the Shopify swatches.


---

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