> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Shine Tabbed Collections

**Theme:** Shine · **Section type:** All-template section

A Tabbed collections section shows products from several collections in one place, with one tab per collection. Customers switch tabs to browse each collection without leaving the page.

> **Note:** This section was called Multiple product tabs in earlier versions of Shine. You can add it to any template. It isn't available in the header or footer.
![Tabbed collections section with one tab per collection](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-tabbed-collections-1_1mavgbv.jpg)

**What you can do**
- Add the section and choose the collections for the tabs
- Let customers add products from the cards
- Choose the layout on large screens and phones
- Show a "View all" button under each tab
- See what customers see
- Look up every setting in "Settings reference"
- Fix common problems

---

## Add the section and choose the collections for the tabs
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Tabbed collections**.
3. Under **General**, enter a **Section subheading**, **Section heading**, and **Section description**. Leave a field empty to hide it.
4. Under **Product tabs**, click **Select collections**, choose the collections, and click **Select**. Each collection becomes one tab, in the order you set.
5. Set **Maximum items to show**. This is the number of products in each tab.
6. Click **Save**.

> **Tip:** The tab name is the collection title. Keep collection titles short so all tabs fit on one line on phones. If they don't fit, customers can scroll the tab bar sideways.

## Let customers add products from the cards
1. Click **Tabbed collections**.
2. Under **Product card**, choose a **Quick shop action**: Quick add, Quick view, Both, or Not use.
3. If you chose Quick add or Both, choose a **Quick buy mode**:
   - **Standard (variant picker)** opens a small window where customers pick a variant and add it to the cart.
   - **Bulk order (all variants)** opens a table where customers enter a quantity for each variant at once.
4. Click **Save**.

> **Note:** You change how the quick shop window looks in **Theme settings** > **Quick shop**, and how the quick buy button shows on cards in **Theme settings** > **Product card**.

## Choose the layout on large screens and phones
1. Click **Tabbed collections**.
2. Under **Large screen**, choose the **Section heading alignment**, a **List style** (Grid or Carousel), and the **Columns per row**.
3. Under **Mobile screen**, choose the same settings for phones.
4. Click **Save**.

> **Tip:** The look of the tabs (Colour only, Underline, or Pill) is a theme-wide setting. You change it in **Theme settings** > **Appearance** > **Tabs** > **Style**.

## Show a "View all" button under each tab
1. Click **Tabbed collections**.
2. Under **Button**, check **Enable ‘View collection' button**.
3. Click **Save**.

The button shows under the products of each tab and links to that tab's collection. Its text is set by the theme: "View all in" plus the collection title, for example View all in 'Necklaces'. It always uses the Filled style.

> **Tip:** To change the button text, edit the theme's default language in **Online Store** > **Themes** > **Edit default theme content**, and search for "View all in".

## What customers see
- **Tabs:** the first collection's tab is open when the page loads. Customers click or tap another tab to show that collection's products. The page doesn't reload.
- **Product cards:** each card shows the product image, title, and price, plus the vendor and variant swatches if you turned them on.
- **Carousel:** customers swipe or use the arrows to see more products in the open tab.
- **Quick add and Quick view:** customers add a product to the cart, or open its details in a window, without leaving the page.
- **Button:** "View all in" opens the collection of the open tab.
![Second tab open with quick add and quick view on a product card](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/shine-tabbed-collections-2_1ric5bl.jpg)

## Settings reference

### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
| Section subheading | A short tagline above the heading. Leave it empty to hide it. |
| Section heading | The section heading. Put words between [ and ] to highlight them. You choose the highlight style in Theme settings > Typography. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Section description | Text below the heading. Leave it empty to hide it. |
| Product tabs | The collections to show. Each collection creates one tab. |
| Maximum items to show | Sets how many products each tab shows, from 2 to 12. |

### Product card
| Setting | What it does |
| ---- | ---- |
| Show vendor | Shows the vendor on each card. |
| Show variant swatches | Shows variant swatches on each card. You set up swatches in Theme settings > Product information. |
| Quick shop action | Adds a Quick add button, a Quick view button, Both, or none (Not use) to each card. You style the quick shop window in Theme settings > Quick shop. |
| Quick buy mode | Opens a variant picker (Standard) or a table with every variant (Bulk order) when customers use quick add. Appears with Quick add or Both. See "Let customers add products from the cards" above. |

### Large screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the heading, the tabs, and the button to the Left or Center. |
| List style | Shows the products in a Grid or a Carousel. |
| Columns per row | Shows 3, 4, 5, or 6 products per row. |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the heading, the tabs, and the button to the Left or Center. |
| List style | Shows the products in a Grid or a Carousel. |
| Columns per row | Shows 1 or 2 products per row. |

### Button
| Setting | What it does |
| ---- | ---- |
| Enable ‘View collection' button | Shows a button under each tab that links to that tab's collection. See "Show a "View all" button under each tab" above. |

## Troubleshooting
**The section shows "Collection 1", "Collection 2", and grey placeholder products.**
No collections are selected. Select collections under **Product tabs**.

**I can't change the button text or style.**
This section has no Label or Style setting for the button. The text comes from the theme's language file, and the style is always Filled. See "Show a "View all" button under each tab" above.

**A tab is empty.**
The collection has no products available on the Online Store. Add products to the collection, or remove it from **Product tabs**.

**The Quick buy mode setting is missing.**
**Quick buy mode** appears only when **Quick shop action** is Quick add or Both.

## Related articles
- [Shine Featured Collection](https://doc.ecomx.co/en/article/shine-featured-collection-kqvywq/)
- [Shine Collection List](https://doc.ecomx.co/en/article/shine-collection-list-qar9y1/)
- [Shine Info Tabs](https://doc.ecomx.co/en/article/shine-info-tabs-epc2d4/)
- [Shine Quick Shop](https://doc.ecomx.co/en/article/shine-quick-shop-18cw684/)
- [Shine Theme Settings](https://doc.ecomx.co/en/article/shine-theme-settings-1876q8v/)