Product tabs

Learn how to feature products from hand-picked collections in Product tabs

Product tabs display products from selected collections in an engaging and attractive section.

You can show off new collections, best-sellers, or on sales items all together so customers can explore them right away!

How to add a Product tabs section

Steps

1. In the theme editor (Customize), click Add section.

2. Locate Product tabs.

3. Make necessary changes.

4. Save.

How to edit a Product tabs section

Section settings

Section header

• Layout: The position of the section header vs the tabs.

Vertical

Horizontal

• Heading size: The font size of the section header.

Highlight text

How to apply Highlight text to the section heading and block headings?

Grid settings

Set the maximum number of products to show per collection (between 2-12 products) and the number of columns on desktop (between 2-6 columns).

You can also adjust the gap between columns and rows.

products)

Product cards

• Image ratio: The ratio of image shown on product cards.

Mobile layout

• Number of columns on mobile: 1/ 2 columns.

• Enable swipe on mobile: Show the product list as swipeable on mobile view instead of the default grid layout.

View all button

• Show on heading section on desktop: If the option is selected, the button will display beside the tab names. By default, the view all button when added will show at the end of the product list.

• Button label: Add a label to show the button.

• Button link: Link the button to your desired page. For example: Your all products page.

• Button style: Primary button/ Secondary button/ Underline button.

Tab settings

Select a navigation style for your section.

Design 1

Design 2

Block settings

Insert the Tab name and select a Collection to display the products of it.