# Products Grid

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FCELzcm4SGuNKLs80KJY5%2Fproducts-grid.jpg?alt=media&#x26;token=9c025cdd-5680-4c48-831c-dcb237f26707" alt=""><figcaption><p>preview products grid</p></figcaption></figure></div>

{% hint style="success" %}
**Steps:**

* In the theme editor, click **Theme settings**
* Locate **Products Grid,**
* Make necessary change and click save.
  {% endhint %}

### <mark style="color:blue;">**Grid Style**</mark>

**Grid Style:** Choose from 6 different style. [<mark style="color:orange;">**Click here**</mark>](https://vogal-demo.myshopify.com/pages/grid-style) to see all grid style

**Button stretched?:** Enabling this option display button fullwidth in grid for grid style 4

**Grid Spacing:** Set space between two grid box for desktop view.

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FZUp6StSEtE3gbSsvkSpq%2Fproducts-grid2.jpg?alt=media&#x26;token=4a7ddb05-0e51-42ed-babd-35900c879846" alt=""><figcaption></figcaption></figure></div>

**Grid Spacing(mobile):** Set space between two grid box for mobile view.

### <mark style="color:blue;">**Grid Images**</mark>

**Ratio :** Set products grid images ratio to landscape, portrait or square based on your image dimension.

**Border Radius :** Set product grid images corner to rounded.

### <mark style="color:blue;">Color Swatch</mark>

Enable to show color swatch on products grid. Choose swatch type to Color Swatch Or Variant Swatch.

**For Color Swatch,** make sure you have define all custom colors. Custom colors can be add from Sections -> Scroll down to Custom Color section.  You can find Custom Color section next to footer section.

**For Variant Swatch,** Please make sure you have uploaded variant images From **Shopify admin** > **Products** > **Select** product to add variants > Scroll down to **Variants.**&#x20;

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FHLptU2ky9y5qPrJTAuZI%2Fvariant-swatch.jpg?alt=media&#x26;token=90cd938c-9109-49c7-a031-ccb9b6a1601f" alt=""><figcaption></figcaption></figure></div>

**Variant Image Position:** Set variant image position. Set variant image position. Either you can set to display it from center or top.

**Swatch Size:**  Select swatch size to small, medium or large.

**Border Radius:** Set rounded corner for swatch.

Set Swatch border and active swatch border color.

### <mark style="color:blue;">**Products Title**</mark>

Set font size, font weight, text case and title color for product title in grid.

**Title reduced to one line?** You can enable this option to display the product title in one line if the title occupies two or three lines. With this, title text will be truncated.

### <mark style="color:blue;">**Products Price**</mark>

Set font size, font weight, price color and format for the price to be displayed products grid.

### <mark style="color:blue;">Grid Buttons</mark>

**Enable Quick Shop :** Enabling this option offer direct shop from products grid rather than to jump to product page.

**Add to Cart, Wishlist, Quickview Icon** : Set Icon color, background color and border radius for icons display in products grid

### <mark style="color:blue;">Countdown Timer</mark>

Enable this option to display countdown timer on products grid. You can enable count timer to promote items on sale. Set text and background colors.

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2F8huQ2Lywwsgnl3x1JBkR%2Fcountdown.jpg?alt=media&#x26;token=91236230-70c5-4356-a517-a910d6e8b834" alt=""><figcaption></figcaption></figure></div>

### <mark style="color:blue;">Product Labels</mark>

Enable to highlight products or display sale or sold-out label on items. [<mark style="color:orange;">**Click here**</mark>](https://www.adornthemes.com/knowledge-base/how-to-set-product-labels-2/) to know how to add sale label.

**Style:** Select label style to rectangle, rounded or radius. Set font size and text color.

**Sale Label?** Enable to display sale label on products.  Show when compare price is greater than regular price.

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FHBdIz2YNdMHKUrFHHYSm%2Fsale-item.jpg?alt=media&#x26;token=2eec9d60-fe6e-48ec-9dd8-d8b0d4243305" alt=""><figcaption></figcaption></figure></div>

**Style:** Select how you want to display sale label. Text based or in percentage.

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FR08rDqsKaH7l6q50J6Xn%2Fsale-label-style.jpg?alt=media&#x26;token=28829454-596c-4c10-bb82-f91d12232d3f" alt=""><figcaption></figcaption></figure>

**Soldout Label?** Enabling this option display sold out label on product when product is out of stock.

Add text for label 1 to label 5 and set colors.

{% embed url="<https://youtu.be/n_-KnzZgs1s>" %}