# Quick view

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/STZjq2nIhJMH3q4LzeEU/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-03-21%20%D0%B2%2014.03.35.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/3VgH3eLWjyG3gaTt22Zd/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-03-21%20%D0%B2%2014.04.47.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/DuOwXi80ZLIIbj3E0UFN/Untitled%20(13).png" alt=""><figcaption></figcaption></figure>

This block of settings is intended for general settings of the **Quick view** on the site.

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

## **Quick view settings**

### General

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/uac1N8qxfY0RFCwdm4E6/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-03-06%20%D0%B2%2017.41.21.png" alt=""><figcaption></figcaption></figure>

1. **`Show badges`** - the setting allows you to display or not display badges;
2. **`Show SKU`** - the setting allows you to display or not display SKU;
3. **`SKU Text` -** text displayed with the SKU;
4. **`Show vendor`** - the setting allows you to display or not display vendor;
5. **`Make vendor link to collection` -** the setting allows you to make vendor text a link to the collection;
6. **`Show additional payment buttons`** - the setting allows you to display or not display dynamic checkout buttons;
7. **`Show message of taxes included`** - the setting allows you to display text if taxes are included;
8. **`Button style`** - the setting allows you to choose the style of the "Add to cart" button;
9. **`Button ‘Buy it now’ style`** - the setting allows you to choose the style of the "Buy it now" button;
10. **`Variant picker`** - select a view of variant options type. **Note:** if you have enabled a color swatch option then the option that is related to color swatch will be like a button. You can select “**Buttons**” or “**Dropdown**”
11. **`Object fit image`** - setting allows you to set the value for the object-fit property of the image.

### **Countdown timer**

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/GcDwTQdJ3D3ye05UOV8t/Untitled%20(14).png" alt=""><figcaption></figcaption></figure>

1. **`Show`** - if checked - the countdown timer will be shown;
2. **`Text`** - Text before countdown timer;
3. **`Icon`** - Image before countdown timer. (Recommended size 48x48);
4. \*\*`Text color**` - Text before countdown timer color;
5. **`Timer text color`** - Timer cells text color;
6. **`Timer background color`** - Timer cells background color.

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/5OUpeF0EJ3QPFqH1WSF9/Untitled%20(15).png" alt=""><figcaption></figcaption></figure>

**To show the countdown timer:**

* Create product metafield with **Name**: “Promo time”, **Namespace and key**: **`custom.promo_timer_date`**. **Content type** must be **`Date and time`**;

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/Vy7GjfE9E8NP2UGvj6il/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-03-06%20%D0%B2%2017.51.21.png" alt=""><figcaption></figcaption></figure>

* Add promo time to the product

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/pRpPgPXxpTdnaTnvnOYz/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-03-06%20%D0%B2%2017.51.48.png" alt=""><figcaption></figcaption></figure>

## Product Settings

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/aTIVOl5Pxe0zIYzt8XGj/Untitled%20(16).png" alt=""><figcaption></figcaption></figure>

### General

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/uH3XUKqWgRpldVx5J06A/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-03-06%20%D0%B2%2017.53.04.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/oTYj695Ce9BjKG3efDwP/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-03-06%20%D0%B2%2017.53.38.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 the `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`.