Tab collections
Show products from up to three collections in one section, with tabs that let shoppers switch between them.
The Tab collections section works like a Featured collection with tabs. Add up to three collections, and shoppers click a tab to see that collection's products without leaving the page. It's a compact way to show, for example, New arrivals, Best sellers and Sale in one place.
1. Our guide to set up a Tab collections section:
The section is added with two Collection blocks. You can add up to three. Tabs only show when there are at least two blocks.
2. Section settings
Section header
Heading: The title above the tabs. Leave it blank to hide it.
Heading size: 15–80px.
Heading alignment: Left / Center.
Tabs
Tab style: Underline / Boxed.
Active tab color scheme: The colors of the selected tab. Shows when Tab style is Boxed.
Show collection image: Shows a small image in each tab.
Tab image shape: Circle / Rounded / Square. Shows when Show collection image is on.
Tab image size: 24–80px. Shows when Show collection image is on.
General
Maximum products to show: Products shown in each tab, 2–12.
Number of columns on desktop: 2–4.
Show "View all" button: Shows a button to the full collection. It only appears when the collection has more products than Maximum products to show.
Enable carousel on desktop: Turns each tab's products into a slider with arrows.
Product card
Font size scale: Makes the product title larger, 100–200%.
Content alignment: Left / Center.
Image ratio: Adapt to image / Portrait / Square / Arch.
Show second image on hover: Shows the product's second image when shoppers hover over the card.
Add image padding: Adds space around the product image.
Show image outline: Adds a thin border around the image.
Show vendor: Shows the product's vendor.
Show product rating: Shows star ratings. You need a product reviews app for this.
Show product swatches: Shows color swatches on the card. Set them up in Swatches.
Enable quick add button: Shows the quick add button on product cards. See Quick add.
Mobile layout
Number of columns on mobile: 1 column / 2 columns.
Enable swipe on mobile: Turns the products into a swipeable slider on phones.
Section padding
Top padding and Bottom padding: 0–100px.
3. Block settings
Collection block
Collection: The collection shown in this tab.
Tab label: The tab's name. Leave it blank to use the collection's title.
Tab image: The image shown in the tab when Show collection image is on. Leave it blank to use the collection's image.
4. Tips
Keep tab labels short, such as "New", "Best sellers" and "Sale", so the tabs fit on one line on mobile.
Set Maximum products to show to a multiple of Number of columns on desktop, for example 8 products in 4 columns, so rows are full.
Use the Featured collection section instead if you only need one collection.