Tab collections grid

tab collections 2.png

1. Purpose

Displays products from multiple collections in a tabbed grid. Customers can switch between product groups without leaving the section.

2. Common use cases

Homepage
Collection landing page
Featured categories
New arrivals, best sellers, or sale products

3. How to add

Shopify Admin → Online Store → Themes → Customize → Add section → Tabs collections grid

4. Main blocks

Tabs item: Creates a tab using a collection or manually selected products.
Item link: Adds a custom link to the tabs list, if supported.

5. Key settings

5.1. Tabs item

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.

5.2. Heading and tabs

Setting	Description
Tabs heading	Adds the main section heading.
Heading size	Controls the heading size.
Enable tabs heading inline	Places the heading and tab list on the same row.
Tabs design	Selects the tab display 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 tab border or underline thickness.
Spacing between tabs item	Adjusts spacing between tabs.

5.3. Product display

Setting	Description
Product design	Selects the product-card style.
Image ratio	Sets the product-image ratio.
Full image	Displays the full image without cropping.
Show vendor	Displays the product vendor.
Products border	Controls product-card borders.
Maximum items to show per page	Limits the number of displayed products.
Items per row	Sets columns for desktop, tablet, and mobile.

5.4. Grid layout

Setting	Description
Pagination type	Selects how customers access additional products. Pagination is unavailable when using a manual product list.
Pagination position	Aligns the pagination control to the left, center, or right.
Distance between pagination and product items	Adjusts the spacing between the product grid and pagination.
Button label	Sets custom text for the pagination button.
Button style	Selects Solid, Outline, or Link style.
Button font weight	Controls the thickness of the button text.

5.5. Section layout

Setting	Description
Enable section full width	Expands the section across the full browser width.
Color scheme	Applies a predefined color scheme to the section.

6. Best practices

Use short and clear tab names.
Keep the number of tabs limited.
Use the same product-image ratio across all tabs.
Recommended layout: 4 items on desktop, 2 on tablet, and 1–2 on mobile.
Use collections instead of manual product lists when pagination is needed.

7. Common issues

Issue	Solution
Products are not showing	Select a collection or product list for the tab.
Collection products are ignored	Remove the manually selected product list.
Pagination is not working	Use a collection instead of a manual product list.
Tabs look crowded on mobile	Reduce the number of tabs or shorten tab names.
Product grid is inconsistent	Use the same image ratio and product design for all tabs.