Collection tabs shows up to five collections in one section, with a tab for each. Customers switch tabs to see each collection's products without leaving the page. It appears on the Broadsheet preset's home page.
Only the first tab's products are loaded with the page. The others are fetched when a customer opens them, so five tabs cost little more than one.
A tab with no collection chosen shows placeholder products, on your storefront as well as in the theme editor. Choose a collection for every tab before you publish, or remove the tabs you don't need.
Where to find it
In the theme editor, click Add section and choose Collection tabs. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
- Desktop layout: Grid shows the products in rows. Slideshow shows one row that customers scroll sideways.
- Columns on desktop sets how many products sit in a row, from 2 to 5.
- On mobile, products swipe sideways when Enable swipe on mobile is on. With it off, they stack in a grid of one or two columns, as set in Columns on mobile.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Products to show | 2 to 12. Default: 8. | How many products each tab shows, from the start of the collection. The collection's own sort order decides which come first. |
| Desktop layout | Grid or Slideshow. Default: Grid. | A grid or a sideways-scrolling row on desktop. |
| Columns on desktop | 2 to 5. Default: 4. | How many products sit in a row on desktop. |
| Columns on mobile | 1 column or 2 columns. Default: 2 columns. | How many products sit side by side on mobile. |
| Enable swipe on mobile | On or off. Default: on. | Lets customers swipe through the products on mobile. When off, products stack in a grid. |
| Show "View all" link | On or off. Default: on. | Adds a link under each tab's products to the full collection. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 5 blocks.
Collection tab
One tab and the collection it shows. The first tab in the list is the one open when the page loads.
| Setting | Options | What it does |
|---|---|---|
| Collection | Collection. | The collection this tab shows. |
| Tab label | Text. | The text on the tab. Leave empty to use the collection's title. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Product images | As set for your products | This section has no images of its own. Products are shown as product cards, cropped to the Image ratio chosen in theme settings under Product cards. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Put your strongest collection first; it is the one every visitor sees.
- Short tab labels fit on one line on mobile: "Dresses", "Knitwear", "New in".
- Sort each collection in Shopify so its best products come first, since the tab shows only the first few.