.png){kind=logo}
Collection tabs
What is the collection tabs section?
The Collection Tabs section allows store owners to showcase multiple product collections in an interactive tab layout. Customers can switch between different collections, improving product discovery and navigation.
This section supports both grid and carousel layouts for a dynamic shopping experience.
How to add collection tabs section
.svg){kind=icon}
- Access the Theme Editor: Navigate to `
Online Store > Themes > Customize`. - Add a Section: Click on `
Add section`and select the desired section from the list of available sections. - Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.
General section settings
Within this section, you'll find common settings like section headers, containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.
Section Settings
- Display Type: Choose between a Grid layout or a Carousel layout for displaying products.
- Products to Show: Define the number of products displayed per collection (2-16).
- Products Per Row on Desktop: Set how many products appear per row on desktop (2, 3, or 4).
- Products Per Row on Mobile: Choose the number of products per row on mobile (1 or 2).
- Spacing Between Products on Desktop: Adjust the horizontal spacing between products on desktop (10-50px).
- Spacing Between Products on Mobile: Adjust the vertical spacing between products on mobile (10-50px).
- Apply Grid Shift: Enable a subtle shift in the product grid for a staggered layout.
Carousel Settings
- Show Arrows: Display navigation arrows in the carousel.
- Enable Auto-Rotate: Set the carousel to auto-rotate between products.
- Auto-Rotate Speed: Adjust the rotation speed of the carousel (2-6 seconds).
Color Settings
- Color Scheme: Select a color scheme for the section.
Block Settings
- Collection:
- Collection Selection: Choose a collection to display within a block.
- Collection Title: Set a custom title for the collection. Leave blank to use the collection's default title.
