# 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/zS9UtIb5OGT9Mq56lUih/Untitled%20(12).png" alt=""><figcaption></figcaption></figure>

## **Settings**

### General

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/dxrA2jdWCVgeBCM3WYZf/Untitled%20(13).png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/JCqdZBsPVi2GVLEFXrGh/Untitled%20(14).png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/yW8bRlgow91CsrOVOdbh/Untitled%20(15).png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/IZMbniBKI2OZYQhU4BT0/Untitled%20(16).png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/IFyTu9L61KEQEimpl4be/Untitled%20(17).png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/aGheRHKb1HaVdht7yZtP/Untitled%20(18).png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/8rmzBspLVS2JTNY2jplU/Untitled%20(19).png" alt=""><figcaption></figcaption></figure>

### Swatches

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/uMdBaGbn6Xmd6i8ap4ZS/Untitled%20(20).png" 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.