> For the complete documentation index, see [llms.txt](https://vshop.gitbook.io/vshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vshop.gitbook.io/vshop/theme-sections/product-normal.md).

# Product Normal

The Product Normal section displays products in a grid layout from a selected collection. You can adjust the layout, number of items, and display options for an organized and clean product showcase.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F3zlTV4ZvkyceTv32iGUF%2Fimage.png?alt=media&amp;token=8aa66891-433f-45d9-a520-37e10b2ffd6e" alt=""><figcaption></figcaption></figure>

To customize the Product slider in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Product Normal**
3. **Save**
   {% endhint %}

### **Section Header**

* **Show “Section header”:** Enable to show a title and description above the product grid.
* **Heading:** Add the main title (e.g., *Trending Product*).
* **Description:** Write a short introduction for the product section.
* **Text alignment:** Choose *Left*, *Center*, or *Right* alignment.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FaVHpXtKlya1SbrLClHuJ%2Fimage.png?alt=media&amp;token=4b111886-b7fd-472b-b9f1-ad36a8bead44" alt=""><figcaption></figcaption></figure>

***

### **General**

* **Layout:** Select how the section layout appears (e.g., *Default*).
* **Color scheme:** Choose a color theme that matches your store style.
* **Collection:** Select a product collection to display.
* **Products to show:** Set how many products are displayed in total.
* **Number of columns on desktop:** Choose how many product columns appear per row.
* **Columns on tablet:** Set the number of columns per row on tablets.
* **Columns on mobile:** Set the number of columns per row on mobile (1 or 2).
* **Gap item:** Adjust spacing (px) between products.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FXqCOyrrFrGrjJBHxRQ7a%2Fimage.png?alt=media&amp;token=da195ab7-5ba5-4875-b840-fcf88d7e1bf1" alt=""><figcaption></figcaption></figure>

***

### **Load More Settings**

* **Show “Load more”:** Enable a button to load additional products dynamically.
* **Button action:** Choose between *Redirect to collection page* or *Load more products*.
* **Products per page:** Set how many products load each time (active only when *Load more products* is selected).
* **Button label:** Customize the text for the button (e.g., *View more*).
* **Button type:** Choose button style (e.g., *Primary* or *Secondary*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FuM3fVHzVcIMl4ivi4zyo%2Fimage.png?alt=media&amp;token=bda34daa-b235-4f6b-a209-780acf1e374f" alt=""><figcaption></figcaption></figure>

***

### **Section Padding**

* **Padding top:** Adjust the top spacing (px).
* **Padding bottom:** Adjust the bottom spacing (px).
* **Remove default space between sections:** Enable to remove the default spacing between sections.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F6k2Pbk9CZVPfI4pzRD6h%2Fimage.png?alt=media&amp;token=8dbeea69-bc89-46c1-b563-b816b6064837" alt=""><figcaption></figcaption></figure>