# Products Grid

<div align="left"><figure><img src="/files/xPJVtsQLLiZInKgOdYT3" 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="/files/5EdXsEbZWoJVjadYz1iL" 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="/files/PMImDcEhMLuV0mZaZOhk" 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="/files/VgALTZP2jo7hvuFTGDN8" 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="/files/Xpw2jeGRPQFsyQM03z8I" alt=""><figcaption></figcaption></figure></div>

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

<figure><img src="/files/pMICEy7z0FIyXeubiVPg" 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>" %}


---

# 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://adornthemes.gitbook.io/vogal-theme/theme-settings/products-grid.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.