The Tabbed Collections section allows you to showcase multiple product collections in one section. Each collection is displayed inside its own tab, helping customers browse different groups of products without leaving the page.
This section is useful for:
- Featured categories
- Best sellers by category
- New arrivals by collection
- Seasonal edits
- Product type groups
- Gender-based collections
- Campaign collections
How to setup the Tabbed Collections Section
STEPS:
1. Understanding the Tabbed Collections Section
The Tabbed Collections section uses Collection Tab blocks.
Each block represents one tab and one collection.
| Item | Description |
|---|---|
| Section | Controls the shared layout, heading, product card settings, mobile behavior, colors, and spacing. |
| Collection Tab block | Controls the tab title and the collection displayed inside that tab. |
The order of the tabs follows the order of the Collection Tab blocks inside the section.
Example structure:
Tabbed Collections section
- Collection Tab: New Arrivals
- Collection Tab: Best Sellers
- Collection Tab: Dresses
- Collection Tab: Accessories
Important:
The section supports up to 6 Collection Tab blocks.
2. Add the Tabbed Collections Section
To add the section:
- From your Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the template where you want to add the section.
- Click Add section.
- Select Tabbed Collections.
- Add or edit the Collection Tab blocks.
- Click Save.
The section can be used on many template types, including:
| Template type |
|---|
| Home page |
| Product pages |
| Collection pages |
| Pages |
| Blog pages |
| Article pages |
| Cart page |
| Search page |
| 404 page |
| List collections page |
3. Add Collection Tab Blocks
Inside the Tabbed Collections section, you can add multiple Collection Tab blocks.
To add a Collection Tab block:
- Open the Tabbed Collections section.
- Click Add block.
- Select Collection Tab.
- Choose the collection you want to display.
- Optional: Add a custom tab title.
- Repeat the same steps for each collection tab.
- Click Save.
Recommended setup:
| Store goal | Example tabs |
|---|---|
| Display product categories | Tops, Bottoms, Dresses, Accessories |
| Promote best sellers | Best Sellers, New Arrivals, Staff Picks |
| Create seasonal edits | Summer, Autumn, Winter |
| Show product groups | Skincare, Makeup, Haircare |
| Build a campaign section | Featured, Trending, Limited Edition |
4. Configure Each Collection Tab
Each Collection Tab block includes settings for the tab title and selected collection.
Block settings:
| Setting | Description |
|---|---|
| Tab title | Adds a custom title for the tab. |
| Collection | Selects the collection whose products will be displayed in this tab. |
Tab Title Behavior
| Condition | Result |
|---|---|
| Tab title is filled in | The custom title is displayed as the tab label. |
| Tab title is left empty | The section automatically uses the selected collection title. |
Example:
| Collection | Tab title field | Displayed tab label |
|---|---|---|
| New Arrivals | Empty | New Arrivals |
| Summer Collection | Summer Edit | Summer Edit |
| Best Sellers | Trending Now | Trending Now |
Recommended tip:
Use short tab titles to keep the tab layout clean, especially on mobile.
5. Configure Important Section Settings
The section includes several important settings that control how products and tabs are displayed.
Important settings:
| Setting | Description |
|---|---|
| Maximum products to show | Controls how many products are displayed under each collection tab. |
| Enable scroll on desktop | Makes the product list horizontally scrollable on desktop. |
| Enable View all button | Displays a View all button when the collection has more products than shown. |
| Show divider | Adds a divider line above the section. |
| Enable drag to scroll | Allows users to drag horizontally to scroll the product slider on desktop. |
Maximum Products to Show
This setting controls how many products are displayed under each tab.
Available range:
| Minimum | Maximum |
|---|---|
| 2 products | 12 products |
Example:
| Setting value | Result |
|---|---|
| 4 | Shows up to 4 products per tab. |
| 8 | Shows up to 8 products per tab. |
| 12 | Shows up to 12 products per tab. |
Enable Scroll on Desktop
When enabled, the product list can become horizontally scrollable on desktop devices.
This is useful when:
- You want to show many products without making the section too tall.
- You want a carousel-style product browsing experience.
- You want customers to browse products horizontally.
Enable Drag to Scroll
This option works together with Enable scroll on desktop.
When enabled:
- Customers can drag horizontally to scroll through the products.
- Product images are no longer directly clickable while drag-to-scroll behavior is active.
This helps prevent conflicts between:
- Clicking product images.
- Dragging the product slider.
6. Configure Heading Settings
The section includes heading settings that control the section title.
Heading settings:
| Setting | Description |
|---|---|
| Heading | Adds the main heading for the section. |
| Heading size | Controls the visual size of the heading. |
| Heading alignment | Aligns the heading left, center, or right. |
| Heading tag | Controls the HTML heading tag used for the section heading. |
Recommended setup:
| Page type | Recommended heading tag |
|---|---|
| Homepage section below hero | h2 |
| Landing page section |
h2 or h3
|
| Page without another main heading |
h1 only if appropriate |
| Decorative heading only |
div, span, or p
|
Example heading:
Shop by Collection
7. Configure Mobile Layout
The section includes mobile layout settings.
Mobile layout settings:
| Setting | Description |
|---|---|
| Mobile columns | Controls whether products display in 1 or 2 columns on mobile. |
| Enable swipe on mobile | Allows the product list to become horizontally scrollable on mobile devices. |
Recommended setup:
| Goal | Recommended setting |
|---|---|
| Compact mobile layout | 2 columns |
| Larger product images | 1 column |
| Carousel-style mobile browsing | Enable swipe on mobile |
| Standard grid layout | Disable swipe on mobile |
When Enable swipe on mobile is turned on, customers can swipe horizontally to browse products inside each tab.
8. Configure Product Card Settings
The Tabbed Collections section uses product cards to display products from each selected collection.
Product card settings:
| Setting | Description |
|---|---|
| Image ratio | Controls the product image ratio. |
| Image focal point | Controls the visible focus area of the image. |
| Enable image fill | Makes product images fill the product image container. |
| Show second image on hover | Displays the second product image when customers hover on desktop. |
| Show vendor | Displays the product vendor. |
| Show product rating | Displays product rating when rating data is available. |
| Show quick buy | Displays quick add-to-cart on product cards. |
| Enable quick view | Displays quick view for product cards. |
| Enable color swatches | Displays color swatches on product cards. |
| Enable countdown | Displays product countdown when configured. |
Image ratio options:
| Option | Description |
|---|---|
| Adapt | Uses the original image ratio. |
| Square | Crops images to a square. |
| Portrait | Uses a portrait layout. |
| Landscape | Uses a landscape layout. |
| Wide | Uses a wide image layout. |
Recommended setup:
| Store type | Recommended product card setup |
|---|---|
| Fashion | Portrait image ratio, second image on hover, color swatches enabled |
| Beauty | Square or adapt image ratio, quick buy enabled |
| Furniture | Landscape or adapt image ratio, quick view enabled |
| Large catalog | Quick buy, quick view, and swatches enabled |
| Minimal design | Vendor and rating disabled, clean image ratio |
9. Configure Highlight and Color Settings
The section supports highlight color for tab styling and highlighted heading text. Please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
Color setting:
| Setting | Description |
|---|---|
| Highlight color | Controls the active tab highlight color and highlighted text color. |
Highlight settings:
| Setting | Description |
|---|---|
| Enable highlight | Enables heading highlight styling. |
| Highlight style | Controls the highlight effect used in the heading. |
Available highlight styles include:
| Style |
|---|
| Marker |
| Circle |
| Underline |
| Bold underline |
| Modern underline |
| Sketch underline |
| Squiggle |
| Heavy squiggle |
| Solid color |
Example highlighted heading:
Shop Our [Featured] Collections
Then enable Highlight and choose a highlight style.
10. Configure Padding Settings
Padding controls the spacing above and below the section.
Padding settings:
| Setting | Description |
|---|---|
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
Recommended values:
| Placement | Suggested padding |
|---|---|
| Homepage middle section | 36px to 72px |
| Top of page | 24px to 48px |
| Bottom of page | 36px to 72px |
| Inside landing page flow | Match surrounding sections |
11. Recommended Setup
For most stores, we recommend this setup:
| Setting | Recommended value |
|---|---|
| Collection Tab blocks | 3 to 5 tabs |
| Maximum products to show | 4 to 8 |
| Enable scroll on desktop | Enabled for more than 4 products |
| Enable drag to scroll | Enabled when desktop scroll is enabled |
| Enable swipe on mobile | Enabled |
| Mobile columns | 2 |
| Show View all button | Enabled |
| Image ratio | Match your product card style |
| Show quick buy | Enabled |
| Enable quick view | Enabled |
| Enable color swatches | Enabled if products have color options |
| Heading tag | h2 |
Example section:
Heading: Shop by Category
Tabs:
- New Arrivals
- Best Sellers
- Dresses
- Accessories
12. Notes and Limitations
Please note the following behavior:
- The section is available from Be Yours version 8.5.0.
- The section supports up to 6 Collection Tab blocks.
- Each tab displays products from one selected collection.
- The tab order follows the block order in the Theme Editor.
- If the Tab title field is empty, the selected collection title is used automatically.
- The section can show up to 12 products per tab.
- The View all button can display when the collection has more products than shown.
- Drag to scroll is designed for desktop scrolling layouts.
- When drag to scroll is enabled, product images are not directly clickable to avoid conflict with dragging.
- Product card features depend on product data and theme settings.
- Product ratings require rating data or a compatible reviews app.
- Color swatches require product options, native swatches, or custom swatch configuration.
Troubleshooting
If the Tabbed Collections section does not display correctly, please check the following:
- Make sure you are using Be Yours version 8.5.0 or later.
- Make sure the section has been added to the correct template.
- Make sure at least one Collection Tab block has been added.
- Make sure each Collection Tab block has a collection selected.
- If a tab title is missing, check whether the selected collection has a title.
- If products do not appear, make sure the selected collection contains active products.
- Make sure products are available on the Online Store sales channel.
- If the View all button does not appear, make sure Show View all button is enabled and the collection has more products than shown.
- If desktop scrolling does not work, enable Enable scroll on desktop.
- If drag scrolling does not work, enable both Enable scroll on desktop and Enable drag to scroll.
- If product images are not clickable, check whether Enable drag to scroll is enabled.
- If mobile swipe does not work, enable Enable swipe on mobile.
- If product card swatches do not appear, check the product options and color swatch settings.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
Dual Scroll Section
Be Yours रिलीज़ नोट्स