> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/products/product-tabs.md). # Collection tabs Show products from several collections in a tabbed layout. Each tab has its own product grid or carousel, and visitors switch between them with a click — a compact way to feature New Arrivals, Best Sellers, and Sale in one section. ![Product Tabs overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-2b943084f88abddb8cc2fa95b8c6972c22e09f3c%2Fglobal-sections-product-tabs-overview.png?alt=media) *** ## Settings ### Layout | Setting | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Collection type | **Standard** — uses the collection's products. **Color** — activates the `custom.active_color` metafield to pre-select a color variant per product card. | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. | | Layout | **Horizontal** — tabs appear above the product grid, section header stacks on top. **Vertical** — section header and tab labels occupy the left column, product grid fills the right. | | Tab position | Alignment of the tab bar. Visible in Vertical layout only. | | Mobile alignment | Alignment of the tab bar on mobile. | ### Gap | Setting | Description | | ------------- | ----------------------------------------------------------------- | | Gap — Desktop | Vertical spacing between the tab bar and product grid on desktop. | | Gap — Mobile | Vertical spacing on mobile. | ### Product List | Setting | Description | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Max products | Maximum number of products displayed per tab. | | Type | **Grid** — static product grid. **Carousel** — scrollable product carousel. | | Desktop columns | Number of columns on desktop. | | Mobile columns | Number of columns on mobile. | | Custom columns | Override the preset column counts with your own values per screen size. | | Columns per breakpoint | Custom column values, applied when Custom columns is on. See [How to set up custom columns](/helix/how-to-guides/how-to-set-up-custom-columns.md) for the value syntax. | | Enable swipe on mobile | Swipe through the grid on mobile (Grid only). | | Enable overflow slider | Peek at the next slide to hint at scrollability (Carousel only). | ### Products Gap | Setting | Description | | ------------------------------ | ------------------------------------------------- | | Horizontal / Vertical | Gap between product cards on desktop (Grid only). | | Horizontal / Vertical — Mobile | Gap between product cards on mobile (Grid only). | | Desktop / Mobile | Gap between carousel slides (Carousel only). | ### Navigation *(Carousel only)* | Setting | Description | | -------------------------- | ---------------------------------------------------------------------------------------------- | | Show navigation on desktop | Show previous / next arrow buttons. | | Position | **Outside** — arrows outside the carousel. **Inside** — arrows overlaid on the carousel edges. | | Style | Visual style of the arrow buttons. | | Icon | Arrow icon shape. | | Behavior | When navigation arrows appear: **Show on hover** / **Always show**. | ### Pagination *(Carousel only)* | Setting | Description | | -------------------------- | --------------------------------------------------------------------------------- | | Show pagination on desktop | Show a progress bar or bullet indicators below the carousel. | | Type | **Progress bar** / **Bullets**. | | Top padding | Spacing between carousel and pagination indicator. | | Limit width | Caps the progress bar to a **Max width** instead of letting it span the carousel. | | Max width | The widest the progress bar can run. Available when Limit width is on. | ### Autoplay *(Carousel only)* | Setting | Description | | ------------------ | ------------------------------------------------------ | | Auto-rotate slides | Automatically advance through products. | | Pause on hover | Stops the timer while the cursor is over the carousel. | | Speed | Delay between slides. | ### Background | Setting | Description | | ---------------- | ------------------------------------------------------------------------------------- | | Background media | Background media type, such as none, an image, or a video. | | Image | Section background image. | | Image — Mobile | Separate background image for mobile. | | Video | Shopify-hosted background video. Autoplays muted. | | Show overlay | Color layer over the background media. | | Overlay color | Color and opacity of the overlay. | | Parallax effect | Scroll effect for the background media, such as fixed, vertical, horizontal, or zoom. | ### Appearance | Setting | Description | | ------------ | ---------------------------------------- | | Color scheme | Background color scheme for the section. | ### Spacing | Setting | Description | | ----------------------- | -------------------------------------------------------- | | Padding top / bottom | Outer spacing above and below the section. | | Custom padding — Mobile | Override desktop padding with independent mobile values. | *** ## Presets The section ships two presets — pick the one that matches the look you want when you add it: | Preset | Description | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | Collection tabs | Standard text tabs with three collection tabs. | | Collection tabs: Color | Collection type is preset to **Color** with five collection tabs, so each tab shows a colour swatch instead of a plain label. | *** ## Available Blocks This section is built from the static **Header**, **Tab layout**, and **View all button** blocks, plus one **Collection tab** block per tab and optional **Promo card** blocks inside each tab. ### Header Section header block. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md). ### Tab layout Styles the tab bar. Tab alignment is set by the section-level **Tab position** setting, not here. | Setting | Description | | ---------------------- | -------------------------------------------------------------------------------------------------------- | | Vertical layout | Stacks the tab bar vertically beside the products. Standard collection type with horizontal layout only. | | Layout | Arrangement of the swatch tabs. Color collection type only. | | Style | Visual style of the tabs. Standard collection type only. | | Active style | How the active tab is highlighted. Standard collection type with Button style only. | | Gap — Desktop / Mobile | Space between tabs. | | Width / Ratio | Size and shape of the colour swatches. Color collection type only. | | Font | Typeface of the tab labels — heading, body, or accent. | | Font size | Size of the tab labels. | | Letter spacing | Letter spacing of the tab labels. Body and accent fonts only. | ### View all button Renders as an extra tab-styled button at the end of the tab bar. It has no link target in this section — the **Link** and **Open link in new tab** settings are hidden. Add `[collection title]` to the label to insert the active tab's collection name. | Setting | Description | | ------------- | ------------------------------------------------------------------ | | Label | The button text. | | Style | Button style. Set separately for desktop and mobile. | | Height | Button height. Set separately for desktop and mobile. | | Full width | Stretches the button to fill the available width. Mobile only. | | Show icon | Adds an icon to the button. Set separately for desktop and mobile. | | Icon | Which icon to show. | | Icon position | Places the icon before or after the label. | | Icon size | Icon size, with a **Custom icon size** value when set to Custom. | ### Collection tab One block per tab. Accepts **Promo card** blocks. | Setting | Description | | ------------ | ------------------------------------------------------------------ | | Collection | The collection this tab shows. | | Custom title | Overrides the collection name on the tab label. | | Color type | **Color** or **Image** for the swatch. Color collection type only. | | Color | The swatch color, when Color type is Color. | | Image | The swatch image, when Color type is Image. | #### Promo card Added inside a Collection tab. Inserts a promotional card among that tab's product cards. | Setting | Description | | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | Card position | Where the card sits among the product cards. | | Desktop columns / Mobile columns | How many columns the card spans. | | Show promo card on top (mobile) | Moves the card above the products on mobile. | | Card link / Open link in new tab | Wraps the whole card in a link. | | Media type | **Image** or **Video** background. | | Image / Mobile Image (optional) / Video | The card's background media. | | Overlay / Overlay color | A color layer over the media, to keep text legible. | | Subheading / Heading / Text | The card's copy. | | Alignment / Position | Horizontal alignment and vertical position of the content. | | Separate button | Pushes the button to the bottom, away from the rest of the content. | | Heading size / Text size | Type sizes for the heading and the text. | | Button | **Label**, **Style**, **Height**, **Full width**, and icon settings (Show icon, Icon, Icon position, Icon size). | | Content gap / Button spacing | Spacing between the content blocks, and above the button. | | Color scheme | Color scheme for the card. | | Padding | Top and bottom, left and right, with independent mobile values via **Custom for mobile**. |