> 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-tab.md).

# Product Tab

Displays multiple product collections within one section, allowing customers to switch between tabs easily for a smoother shopping experience.

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

{% hint style="success" %}
Steps

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

**Section Header**

* **Show “Section header”** – Enable or disable the section title.
* **Heading** – Main title of the section.
* **Description** – Short description of the product area.
* **Text alignment** – Align text (*Left / Center / Right*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F4f9XgB8lf85wlQy3rJxp%2Fimage.png?alt=media&amp;token=df46a99c-e84b-49ab-9a80-ff525e263a4f" alt=""><figcaption></figcaption></figure>

***

**General**

* **Layout** – Choose the section layout (*Default*).
* **Color scheme** – Select the desired color scheme.
* **Collections** – Choose the product collections to display in tabs.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2Fui2XYNZBUDaZZNz0av7Z%2Fimage.png?alt=media&amp;token=38951d6a-f67d-4341-87f9-cfaaf97cd937" alt=""><figcaption></figcaption></figure>

***

**Settings Button Tab**

* **Layout button** – Select tab button style (*Layout 1 / Layout 2*).
* **Products to show** – Set the number of products shown per tab (e.g., *8*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FH3UHGT0a6LTzr6bDpxWW%2Fimage.png?alt=media&amp;token=baa8af42-3e1e-4656-84d3-a1758a2f3b66" alt=""><figcaption></figcaption></figure>

***

**Grid Settings**

* **Desktop columns** – Number of columns on desktop (3–6).
* **Tablet columns** – Number of columns on tablet (1–4).
* **Mobile columns** – Number of columns on mobile (1–2).
* **Text button** – Label for the “View more” button (e.g., *View more product*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FmrJUm6sN6n9AHtAsB3OG%2Fimage.png?alt=media&amp;token=a581ff03-730e-4874-9ce6-33f8208846eb" alt=""><figcaption></figcaption></figure>

***

**Section Padding**

* **Padding top** – Adjust the space above the section (*px*).
* **Padding bottom** – Adjust the space below the section (*px*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FF6k3UasJb1xXY0MLdAxa%2Fimage.png?alt=media&amp;token=3c9677b2-0a8e-4c1f-94e6-3880b1f7425d" alt=""><figcaption></figcaption></figure>

***

💡 **Tips:**

* Use this section for key collections like *New Arrivals*, *Best Sellers*, or *On Sale*.
* Keep the display clean — 6–8 products per tab is ideal for a balanced layout.