Featured collection: tabs section
The Featured collection: tabs section shows several collections in Seventh, one per tab, as a product grid or slider. This page lists its settings.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 2.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Featured collection: tabs section shows up to four collections in one section, one collection per tab, as product cards in a grid or a slider. Customers select a tab name to switch between the collections.
Where to find it: select Add section in the theme editor, then choose Featured collection: tabs slider or Featured collection: tabs grid. In the section list of the editor the section is called Featured collection.
What the section contains
- A section header with a Tabs navigation block. The Tabs navigation block shows one tab per collection, named after the collection title. You can add a Heading, Caption or other blocks above or below it.
- Product cards: one for each product, built from Product card blocks. You edit one product card and Seventh repeats it for every product in every tab. See Product card.
- Promo cards (optional). See Promo card.
The two presets differ in layout:
- Featured collection: tabs slider: Layout Slider, with Randomize card sizes on and a sticky section header on the left.
- Featured collection: tabs grid: Layout Grid with 4 cards per row and Scatter cards on.
Collections
- The section has four settings named Collection. The first one is the first tab, the second one the second tab, and so on.
- Leave a Collection empty to show fewer tabs.
Section header
This section header is a special version of the standard section header: it always holds the Tabs navigation block and accepts only the blocks listed in the settings below.
Setting up the collection tabs
Add the section
Select Add section and choose Featured collection: tabs grid or Featured collection: tabs slider.
Choose the collections
In the section settings, select a collection in each Collection setting you need, from top to bottom. Each one becomes a tab, in the same order.
Set the number of products
Set Products per page. The limit applies to each tab separately.
Style the tabs
Select the Tabs navigation block in Featured collection → Section header → Tabs navigation to set the font and size of the tab names, and turn Show count on or off.
What number appears next to each tab name?
The number of products shown in that tab. It is the product count of the collection, capped at Products per page. Turn off Show count in the Tabs navigation block to hide it.
Why does my promo card appear only in the first tab?
Seventh places promo cards only among the products of the first collection. The other tabs show product cards only.
Seventh does not support different promo cards per tab. Use a separate Featured collection section with its own promo cards instead.
Can I rename a tab?
No. Each tab shows the title of its collection. To change the tab name, change the collection title in Shopify admin → Products → Collections, which also changes it everywhere else on the store.
All Featured collection: tabs settings
Every setting on this page, one list per section or block, with its type and default.
Accepts these blocks: Promo card.
Collection (collection picker): Sets the collection of the first tab.
Collection (collection picker): Sets the collection of the second tab. Leave it empty for fewer tabs.
Collection (collection picker): Sets the collection of the third tab. Leave it empty for fewer tabs.
Collection (collection picker): Sets the collection of the fourth tab. Leave it empty for fewer tabs.
Products per page (slider 1 to 100, default: 12): Sets the maximum number of products in each tab, from 1 to 100.
Featured collection: tabs section: Layout
Where to find it: Featured collection → Layout
Layout (dropdown, default: Grid): Sets how the cards are arranged: Grid shows rows of cards, Slider shows one row that customers swipe or scroll sideways. Options: Slider, Grid.
Cards size (dropdown, default: Medium): Sets how many cards fit in one row on desktop: XSmall 5, Small 4, Medium 3, Large 2, XLarge 1. Seventh shows fewer cards per row on smaller screens. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Position is Top.
Cards size (dropdown, default: Medium): Sets how many cards fit in one row on desktop when the section header is on the left: Small 4, Medium 3, Large 2, XLarge 1. Seventh shows fewer cards per row on smaller screens. Options: Small, Medium, Large, XLarge. Shown only when Position is Left.
Cards size on mobile (dropdown, default: Small): Sets the card size on mobile: Small shows 2 cards per row, Large shows 1. On screens narrower than 375 px, cards always show one per row. Options: Small, Large. Shown only when Cards size is not XLarge.
Cards alignment (dropdown, default: Top): Sets how cards of different heights line up in a row. Stretch makes every card in a row as tall as the tallest one. Options: Top, Center, Bottom, Stretch.
Stretch alignment type (dropdown, default: Space between): Sets where the blocks sit inside each stretched card. Space between pins the first block to the top and the last block to the bottom. Options: Top, Center, Bottom, Space between, Space around. Shown only when Cards alignment is Stretch.
Grid gap (dropdown, default: Default): Sets the space between cards. None places the cards edge to edge. Options: None, Default, XXSmall, XSmall, Small, Regular, Large, XLarge, XXLarge. Shown only when Scatter cards is off, or Layout is Slider.
Featured collection: tabs section: Cards arrangement
Where to find it: Featured collection → Cards arrangement
The Featured collection: tabs section uses the standard Cards arrangement settings, listed in General section styling.
Scatter cards (checkbox, default: off): Turns on the scattered (editorial) layout: each card moves up or down by a different amount, so the cards no longer sit in straight rows. Shown only when Layout is Grid.
Scatter cards on mobile devices (checkbox, default: off): Keeps the scattered layout on mobile, with half the desktop offset. When off, cards line up in regular rows on mobile. Shown only when Layout is Grid and Scatter cards is on.
Horizontal spacing (dropdown, default: Medium): A larger value will make the cards smaller. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on and Layout is not Slider.
Vertical scattering (dropdown, default: XSmall): Sets how far each scattered card moves up or down. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on and Layout is not Slider.
Gap between rows (dropdown, default: XSmall): Sets the vertical space between rows of scattered cards. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on and Layout is not Slider.
Randomize card sizes (checkbox, default: off). Shown only when Layout is Slider.
Randomize card sizes on mobile devices (checkbox, default: on). Shown only when Layout is Slider and Randomize card sizes is on.
Featured collection: tabs section: Section header
Where to find it: Featured collection → Section header
Position (dropdown, default: Top): Sets where the section header sits: Top places it above the cards, Left places it in a column beside them. Options: Top, Left.
Stick to top (checkbox, default: off): Keeps the section header in view while customers scroll through the section, on screens 1024 px wide and larger.
Featured collection: tabs section: Section design
Where to find it: Featured collection → Section design
The Featured collection: tabs section uses the standard Section design settings, listed in General section styling.
Color scheme (color scheme, default: Scheme 1).
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Extend section width to the edges of the screen (checkbox, default: off). Shown only when Position is Top.
Show media background (checkbox, default: off): Shows a background image or video behind the section content.
Background image (image). Shown only when Show media background is on.
Background image (mobile) (image): Replaces the background image on screens narrower than 768 px. Shown only when Show media background is on and Background image is set.
Background video (video): Plays a muted, looping video behind the section content. When both a video and an image are set, the video is shown. Shown only when Show media background is on.
Media overlay (dropdown, default: Color): Sets the layer over the background media: a flat color or a gradient. Options: Color, Gradient. Shown only when Show media background is on.
Overlay color (color with transparency). Shown only when Show media background is on and Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Show media background is on and Media overlay is Gradient.
Parallax effect (dropdown, default: Medium): Moves the background media at a different speed than the page while customers scroll. Subtle, Medium and Strong move it by up to 5, 10 and 20 percent. Options: None, Subtle, Medium, Strong. Shown only when Show media background is on.
Push content down (checkbox, default: off): Replaces Top padding with a larger top space, so more of the background media shows above the content. Shown only when Show media background is on.
Make section full height (checkbox, default: off): Makes the section at least as tall as the screen and centers the content vertically.
Where to find it: Featured collection → Section header.
Accepts these blocks: Heading, Text, Button, Icon, Empty space, Divider, Caption, Star rating, Content group, Countdown and Custom HTML / Liquid.
Text alignment (alignment, default: Left): Sets the alignment of the blocks inside the section header: left, center or right.
Spacing (dropdown, default: Small): Sets the vertical space between the blocks inside the section header. Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Text container width (dropdown, default: Large): Sets the maximum width of the section header content on screens 1024 px wide and larger: Small 50, Medium 70 and Large 100 percent of the section width. Options: Small, Medium, Large.
Bottom margin (dropdown, default: XLarge): Sets the space between the section header and the product cards below it. Options: Small, Regular, Large, XLarge, XXLarge.
Where to find it: Featured collection → Section header → Tabs navigation.
Show count (checkbox, default: on): Shows the number of products in each tab next to the tab name, capped at Products per page.
Tabs navigation block: Typography
Where to find it: Featured collection → Section header → Tabs navigation → Typography
Font (dropdown, default: Body): Sets the font of the tab names: the body, headings or accent font from Typography theme settings. Options: Body, Headings, Accent.
Text size (dropdown, default: Heading 3). Options: Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6. Shown only when Font is not Body.
Text size (dropdown, default: XXLarge). Options: XXSmall, XSmall, Small, Medium, Large, XLarge, XXLarge. Shown only when Font is Body.
Text weight (dropdown, default: Normal). Options: Normal, Bold.
Case (dropdown, default: Default). Options: Default, Uppercase.
Custom text color (color, default: transparent): Sets a color for the tab names. Leave it transparent to use the color scheme text color.
Related pages
- General section styling: the Section design and Cards arrangement settings this section shares with others.
- Featured collection section: one collection or a hand-picked product list, without tabs.
- Product card: the blocks inside each product card.
- Promo card: the Promo card this section can hold.
Featured collection
The Featured collection section shows products from one collection as product cards in a grid, editorial layout or slider in Seventh.
Featured products list
The Featured products list section shows one or more products with gallery, price, variants and buy buttons, like a product page, in Seventh.