> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Group collections into tabs with Facet's tabbed collections > Build Facet's tabbed collections: tabs of collection cards picked with the collection picker, an optional lead picture or video, counts and descriptions. The Facet tabbed collections section groups collection cards under tabs, such as "New arrivals" and "Bestsellers". Shoppers pick a tab to see its row of collections. This page covers the section settings, the Collection set block that makes each tab, and the Collection card and Feature media blocks inside it. ![The Tabbed collections section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/tabbed-collections/tabbed-collections-overview.jpg?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=66ee276d11c6a0fa17ee00d5a9e43ab0) ## What this section controls * An optional heading and text above the tabs. * The tabs, one per collection set. * The collection cards in each tab, with an optional lead picture or video. * Whether cards show the collection description and product count. ## Getting started **1. Open the Theme Customizer** In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet. **2. Add the section** In the **Sections** panel, click **Add section** and choose **Tabbed collections**. It starts with two tabs, "New arrivals" and "Bestsellers", holding empty collection cards. It can't be added to the header or footer. **3. Pick your collections** Expand a **Collection set**, click each **Collection card** and choose a collection. **4. Name the tabs** Click each **Collection set** and change its **Label**. The label is the tab name. ![The theme editor with the Tabbed collections section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/tabbed-collections/tabbed-collections-location.jpg?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=7c0a01c999e9e48b4bc527faeb8269fb) ## Section settings ![Theme editor sidebar showing the Tabbed collections section settings: Show collection descriptions, Show item counts on collections, View all link label, Common settings, Color scheme, Top padding, and more.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/tabbed-collections/tabbed-collections-settings-1.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=052f6f536a32f97e2884d61ec12cc386) ![Theme editor sidebar showing the Tabbed collections section settings (part 2, scrolled): View all link label, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/tabbed-collections/tabbed-collections-settings-2.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=bb08f7a8181c675389c3058798d46b6f) * **Show collection descriptions**: on by default. Shows a short description under each card title. * **Show item counts on collections**: on by default. Shows the number of products in a badge on each card picture. * **View all link label**: the link text under each card. Leave it empty for "View all". The tabs sit in a row with previous and next arrows. The active tab stays in the middle with up to two tabs on each side, and the row wraps around at the ends. Tabs change with a crossfade. ### Common settings * **Color scheme**: the colors of the section. * **Top padding** and **Bottom padding**: None, Small, Medium, Large (default) or Extra large. * **Page width**: Narrow, Narrower, Fluid (default) or Full. See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details. ## Blocks ### Heading and text The section has a fixed **Heading** and **Text** above the tabs. Empty both to hide them. See [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) for their settings. ### Collection set ![Theme editor sidebar showing the Collection set block (in Tabbed collections) settings: Label, Collections per view on desktop, Collections per view on mobile.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/tabbed-collections/tabbed-collections-block-collection-set-1.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=6ae4816838b7ae682b9f6e88a937da69) One tab and its row of cards. Add a set for each tab and drag them to change the tab order. * **Label**: the tab name. Default: "New arrivals". * **Collections per view on desktop**: from 2 to 6. Default: 4. * **Collections per view on mobile**: from 1 to 3. Default: 2. When a set has more cards than fit, shoppers scroll the row sideways, and arrows appear on the row. #### Collection card ![Theme editor sidebar showing the Collection card block (in Tabbed collections) settings: Collection, Image, Replaces the collection image, Description, Replaces the collection description.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/tabbed-collections/tabbed-collections-block-collection-card-1.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=f8d66962219dc9e113ca3b2dd45c2364) One collection in the row. Add as many as you need inside a set. * **Collection**: picked with the collection picker. The card shows the collection's picture, title, description, product count and a link. Until you pick one, the card shows a placeholder picture and the title "Collection", with no link or count. * **Image**: replaces the collection image. Without one, the card uses the collection's image, then the picture of its first product. * **Description**: replaces the collection description. Without one, the card shows the start of the collection's own description, up to 60 characters. #### Feature media ![Theme editor sidebar showing the Feature media block (in Tabbed collections) settings: Use a video instead of the image, Video.](https://mintcdn.com/lightsout/9k34Mw2flpwZK4M6/images/themes/facet/sections/tabbed-collections/tabbed-collections-block-feature-media-1.png?fit=max\&auto=format\&n=9k34Mw2flpwZK4M6\&q=85\&s=1703a4bbe2a154330d04328e0a9b7abc) An optional picture or video that leads the row. It always shows first in the row, wherever you place it among the cards. On phones it takes the full width above the cards. * **Use a video instead of the image**: off by default. Plays a video muted on a loop in place of the image. Turn it off to show the image again. * **Image**: appears only when the video is off. A placeholder shows until you pick one. * **Video**: appears only when the video is on. ## Best practices * **Keep tab labels short.** One or two words, such as "Swim" or "Beachwear", keep the tab row tidy. * **Fill every card.** An empty card shows a placeholder in your store. Delete cards you don't need. * **Use the same number of cards in each tab.** Rows of equal length make switching tabs feel steady. * **Write short card descriptions.** Collection descriptions are cut at 60 characters. Use the card's **Description** field for a line written for this section. ## Related guides > [card] [Collection highlights](https://docs.shopify.lightsout.agency/themes/facet/sections/collection-highlights.md) > > Show collections without tabs. > [card] [Featured collection](https://docs.shopify.lightsout.agency/themes/facet/sections/featured-collection.md) > > Show the products of one collection. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.