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.
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
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Tabbed collections.
- Under General, enter a Section subheading, Section heading, and Section description. Leave a field empty to hide it.
- Under Product tabs, click Select collections, choose the collections, and click Select. Each collection becomes one tab, in the order you set.
- Set Maximum items to show. This is the number of products in each tab.
- 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
- Click Tabbed collections.
- Under Product card, choose a Quick shop action: Quick add, Quick view, Both, or Not use.
- 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.
- 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
- Click Tabbed collections.
- Under Large screen, choose the Section heading alignment, a List style (Grid or Carousel), and the Columns per row.
- Under Mobile screen, choose the same settings for phones.
- 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
- Click Tabbed collections.
- Under Button, check Enable ‘View collection' button.
- 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.
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
Updated on: 22/10/2026
Thank you!