# Collection tabs

This section is ideal for highlighting different product categories, such as seasonal collections or bestsellers, while maintaining an organized and visually appealing layout. It provides easy access to multiple collections in a compact format.

<figure><img src="/files/HQEs3lRN7YHrZYVQTZT3" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Collection tabs** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/P5ed42TnScIVHrKtp8oj" alt=""><figcaption></figcaption></figure>

### 2, Section settings

* **General settings**
  * **Maximum products to show:** Specify the maximum number of products to display per collection: from **2** to **12** product&#x73;**.**
  * **Products per row on desktop:** Define how many products are displayed per row on desktop: from **2** to **4** produtcs
* **“View all” card:**
  * **Enable "View all" link if collection has more products than shown**: When enabled, a **View all** card appears at the end of the product list if the collection contains more products than displayed. Clicking the **View all** card redirects users to the full collection page.
  * **Image overlay opacity**: Adjust the transparency of the overlay on the **View all** card for better visibility of text.
  * **Overlay style**: Choose the overlay style to enhance text readability and overall design: **Gradient from bottom, Gradient from top, Full image darken.**
* **Product card settings:**
  * **Image ratio**: Select the aspect ratio for product images: **Portrait, Square & Adapt to image.** Ensure product images use a uniform aspect ratio for a polished look.
  * **Show product rating**: Enable to display the product’s rating (requires product rating integration).
  * **Show color swatches**: Display available color swatches beneath product images for easy browsing.
  * **Enable quick add button**: Activate a **Quick add** button for users to view product details and add to their cart without navigating to the product page.
* **Mobile layout:**
  * **Products per row on mobile :** Specify how many products appear per row on mobile devices: 1 product or 2 products.
  * **Enable swipe on mobile:** If enabled, products exceeding the row limit will be displayed in a swipeable carousel format.

### **3,** Collection **block settings:**

* **Collection:** Choose a specific collection to display in the carousel.
* **Heading:** Enter a custom heading for the selected collection. If left blank, the default collection name will be displayed.
* **Hide unavailable products:** Enable to hide products that are out of stock or unavailable (e.g., price = 0).


---

# 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://help.byinspiredlabs.com/section/collection-tabs.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.