Displays products from multiple collections in tabs with a carousel layout. Customers can switch between product groups and browse products horizontally.
Homepage
Featured collections
New arrivals
Best sellers
Sale or seasonal products
Shopify Admin → Online Store → Themes → Customize → Add section → Tabs collections carousel
Tabs item: Creates a tab using a collection or manually selected products.
Setting | Description |
|---|---|
Item title | Sets the tab name. |
Select collection | Displays products from a selected collection. |
Products list | Manually selects products and overrides the collection. |
Setting | Description |
|---|---|
Tabs heading | Adds the main section heading. |
Heading size | Controls the heading size. |
Enable tabs heading inline | Places the heading and tabs on the same row. |
Tabs design | Selects the tab style. |
Content font size | Controls tab-label size. |
Content font weight | Controls tab-label thickness. |
Enable uppercase text | Displays tab labels in uppercase. |
Tab item border width | Controls the border or underline thickness. |
Spacing between tabs item | Adjusts spacing between tabs. |
Setting | Description |
|---|---|
Product design | Selects the product-card style. |
Image ratio | Sets the product-image proportion. |
Full image | Displays the full image without cropping. |
Show vendor | Displays the product vendor. |
Maximum items to show per page | Limits the number of products in each tab. |
Items per row | Sets visible products on desktop, tablet, and mobile. |
Setting | Description |
|---|---|
Use prev/next button | Displays carousel navigation arrows. |
Visible | Shows arrows always or only on hover. |
Navigation design | Selects the arrow-button design. |
Navigation shape | Sets the navigation button shape. |
Navigation size | Controls the navigation button size. |
Navigation position | Sets the arrows inside or around the carousel. |
Navigation icon | Selects Chevron or Arrow icons. |
Use dots | Displays carousel pagination dots. |
Setting | Description |
|---|---|
Pagination type | Selects None or View all. |
Pagination position | Aligns the pagination control. |
Distance between pagination and product items | Adjusts spacing below the product carousel. |
Button label | Sets the View all button text. |
Button style | Controls the button appearance. |
Button font weight | Controls button-text thickness. |
Setting | Description |
|---|---|
Enable section full width | Expands the section across the browser width. |
Color scheme | Controls the section colors. |
Section padding | Adjusts spacing above and below the section. |
Custom CSS | Adds styles to this section only. |
Use short and clear tab names.
Keep product images consistent across all tabs.
Show four products on desktop and one or two on mobile.
Enable navigation arrows when more products exist than can be displayed.
Use View all to link customers to the full collection.
Avoid adding too many tabs.
Issue | Solution |
|---|---|
Products are not showing | Select a collection or product list for the tab. |
Collection is ignored | Remove the manually selected product list. |
Carousel arrows are missing | Enable Use prev/next button and check the visibility setting. |
Carousel does not slide | Add more products than the selected items per row. |
Mobile layout looks crowded | Reduce the number of items shown per row. |
View all button is missing | Select View all under Pagination type. |