Collection tab
Overview
Collection tab displays products from several collections in one section. Customers select a tab to change the visible product group without leaving the page.
Use it for groups such as New arrivals, Best sellers, Sale, Women, or Men.
Before you begin
Create each collection and make sure its products are available to the Online Store sales channel.
Add the section
Add Collection tab to the template where you want customers to see it.
- From Shopify admin, go to Online Store > Themes, find Radian, and select Customize.
- Use the page selector at the top of the Theme Editor to open the required template.
- In the template panel, select Add section, choose Collection tab, and select Save.
Create the tabs
Each Category block creates one tab. The first block is selected when the section loads.
- Select Add block > Category.
- Enter the Category label customers will select.
- Assign the collection for that tab.
- Add a Tab image only when the selected Tab style displays imagery.
- Repeat for the remaining collections, then drag the blocks into the required tab order.
TAB OPTIONS
| Tab alignment | Aligns the complete tab navigation within the section. |
|---|---|
| Tab style | Changes the visual presentation of tab labels and optional images. |
| Category label | Sets the customer-facing tab name. |
| Tab image | Adds an optional image to a Category block. |
| Collection | Provides the products displayed when customers select the tab. |
Set up the product layout
PRODUCT OPTIONS
| Product layout | Chooses the section's available product presentation. |
|---|---|
| Products to show | Limits the number of products loaded for each tab. |
| Desktop and mobile columns | Sets how many product cards appear in each row. |
| Column gaps | Sets product-card spacing independently for desktop and mobile. |
| View all label | Changes the label used to open the selected collection. |
| Enable swipe on mobile | Turns the mobile product list into a horizontal rail. |
| Sticky overlap | Applies the optional sticky product-grid treatment and animation. |
Configure product cards
Keep Use global settings enabled when cards should match the rest of the store. Turn it off only when this section needs its own hover effect, title, price, vendor, variants, badges, Quick view, or content alignment.
Check the result
Select every tab on desktop and mobile. Confirm that the correct collection loads, View all opens that collection, and Quick view works when enabled.
Troubleshooting
COMMON ISSUES
| A tab is empty | Check the assigned collection and confirm its products are published to the Online Store. |
|---|---|
| Local card controls are hidden | Turn off Use global settings. |
| Tabs appear in the wrong order | Drag the Category blocks into the required order. |
| Mobile cards are too narrow | Review the mobile column count or turn off mobile swipe. |