# 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FcpXF0qi5XkLdFUhii09y%2FUntitled%20(12).png?alt=media&#x26;token=b609e12e-ea3e-4b8c-be1f-730ea05f4145" alt=""><figcaption></figcaption></figure>

## **Settings**

### General

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FtSNwVyAWzzGxNoFZGg7h%2FUntitled%20(13).png?alt=media&#x26;token=51687d89-205c-40b4-8402-4e806bcb4539" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FCkpUIb54Q6I92MaGIRZj%2FUntitled%20(14).png?alt=media&#x26;token=be5893ec-0139-4149-967c-b2377555e406" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FTGHelxUP2liekIua9KuU%2FUntitled%20(15).png?alt=media&#x26;token=a18ae026-eb2b-43a1-b7cb-3d6eb5338a25" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FcorSskv159XV4Uy35kzD%2FUntitled%20(16).png?alt=media&#x26;token=710c027d-8a93-452a-be55-d0a30e503433" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FZFaW4BUZFlAoNrVKOAaI%2FUntitled%20(17).png?alt=media&#x26;token=347a9963-91e1-497c-b923-031ff48bc480" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F24EQKFs7W8fuiCOomko0%2FUntitled%20(18).png?alt=media&#x26;token=143e91ce-06fd-4248-a9cf-e6b80f2f147c" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fm5aX2uZZPcHiUKWooSNg%2FUntitled%20(19).png?alt=media&#x26;token=74dd2bd4-b2bc-48fa-aca1-93b7703525cd" alt=""><figcaption></figcaption></figure>

### Swatches

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fvjb6sFR3pSP64bVmR3Ri%2FUntitled%20(20).png?alt=media&#x26;token=e650ba30-8785-4922-8def-8854616a9e40" 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.