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

# Tabbed Collections

The Tabbed Collections section lets you show several collections in one place. Customers see a row of tabs (each linked to a collection). Clicking a tab switches the product grid below to that collection’s products, without leaving the page. This is useful for grouping products by category, season, or type (e.g. “New arrivals”, “Bestsellers”, “Sale”) and keeping the layout compact while offering more choice.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2Fe59zg631SNdS5YP88C37%2Fimage.png?alt=media&amp;token=1718dbe8-3da3-47ee-b21d-4861a5541400" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Tabbed Collections**.
3. Make your changes, preview live, then click **Save**.
   {% endhint %}

### Settings

#### Heading

* **Heading**: The main title above the tabs (e.g. “Shop by category”). Leave blank to show only the tabs.
* **Heading size**: Controls the size of the heading. Choose from the size options to match your layout.
* **Underline**: When enabled, adds a line under the heading.
* **Header text position**: Aligns the heading and tabs to the left (Start), center, or right (End). If the heading is empty, this controls only the tabs alignment.

#### Description

* **Show collection description from admin**: When enabled, each tab’s content area can show that collection’s description from Shopify admin (if you don’t set a custom description in the tab block).
* **Header text position**: Aligns the description text for each tab to Start, Center, or End.

#### Tabs

* **Tabs style**: How tabs look. **Text** shows them as text links (often with separators). **Outline button** or **Transparent button** shows them as button-style tabs.
* **Separator**: Only when Tabs style is “Text”. Character between tab labels (e.g. Comma, Dot, Pipe, Bullet, Dash, Diamond, Heart, Star). Leave as-is if you don’t use text-style tabs.

#### Layout

* **Full width**: When enabled, the section uses the full width of the screen.
* **Color scheme**: Sets the section’s color palette. Card colors can be set in theme settings.

#### Slider

* **Product count**: Number of products to show per collection (2–25).
* **Columns**: Number of product columns on desktop (1–6).
* **Slider buttons position**: **Above the cards** or **Over the cards** for the previous/next slider arrows.
* **Show progress bar**: When enabled, a progress bar indicates position in the slider.
* **Progress bar position**: **Top** or **Bottom** of the slider area.

#### Mobile slider

* **Columns**: Number of columns on mobile: **1** or **2**. Extra products appear in a swipeable slider.
* **Show progress bar**: When enabled, the progress bar is shown on mobile as well.

#### View all button

* **Show "View all" button**: When enabled, a “View all” link or button appears when the collection has more products than shown.
* **"View all" style**: **Link**, **Outline button**, **Solid button**, or **Transparent button**.
* **View all button position**: **Top** or **Bottom**. The “Top” option applies only when the style is “Link”.

#### Product card

* **Image ratio**: Shape of the product image: **Landscape**, **Portrait**, **Tall**, or **Square**.
* **Vendor**: When enabled, the vendor name is shown on each card.
* **Quick add**: When enabled, customers can add the product to cart from the card.
* **Quick view**: When enabled, a quick view option is available on the card.
* **Show swatches**: When enabled, color (or other) swatches are shown on the card.
* **Product rating**: When enabled, product ratings appear (requires a ratings app).
* **Show availability**: When enabled, “In stock” / “Sold out” (or similar) is shown.
* **Show variants**: When enabled, variant options (e.g. size, color) can be shown on the card. Use **Custom product variants** to limit which variant names appear.
* **Custom product variants**: Optional. Comma-separated variant names to show (e.g. “Color, Shoe size”). Leave blank to use default behavior.
* **Metafields to show**: Optional. Comma-separated metafield keys to show on the card (e.g. “namespace.key”).

#### Padding

* **Top**: Space above the section (0–400 px).
* **Bottom**: Space below the section (0–400 px).

#### Block: Tab

Each tab is a block. You can add up to 5 tabs.

* **Tab label**: Text shown on the tab (e.g. “New arrivals”). If left blank, the collection title is used.
* **Collection**: The collection whose products are shown when this tab is selected.
* **Description**: Optional custom description for this tab. If **Show collection description from admin** is enabled and you leave this blank, the collection’s admin description can be used instead.

***

### Tips

* Use clear, short tab labels so customers know what to expect (e.g. “Women”, “Men”, “Kids” or “New”, “Bestsellers”, “Sale”).
* You can use the **Description** in each tab to add a short intro or promotion for that collection.
* With **Tabs style** set to **Text**, the **Separator** helps readability when several tabs sit on one line.
* The first tab is selected by default; order blocks so the most important collection is first.
* “View all” only appears when the collection has more products than **Product count**; position it Top or Bottom depending on where your slider controls are.