Tabbed Product

Updated 1 month ago

The Tabbed Product section helps you organize products under multiple tabs, making it easier for users to browse different collections without leaving the same section. Use it when you want to display multiple categories (like “New Arrivals”, “Best Sellers”, “On Sale”) in the same space without cluttering the page.

Settings

This section is divided into two parts: Tab and Product.

Tab

The Tab settings control how each tab appears and behaves inside the section.

Text and Color:

You can customize:

  • Text – Add the tab label

  • Font – Choose a font that matches your brand

  • Size/Weight – Adjust how bold or subtle the text appears

  • Line Height – Control spacing between lines

  • Letter Spacing – Fine tune spacing between characters

  • Idle Background Color – Set the background color for inactive tabs

  • Active Background Color – Set the background color for the selected tab

  • Active Text Color – Choose the text color for the selected tab

  • Capitalization – Set how the tab text appears

Border:

  • Color – Choose border color

  • Width – Adjust thickness

Advanced Settings:

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside each tab

  • Position – Set where the tabs appear in the section

  • Space Between – Adjust spacing between tabs

Tab Bar Settings

This controls the overall container that holds all the tabs.

Background:

  • Color – Set the background color of the tab bar

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the tab bar

  • Margin – Manage spacing outside the tab bar

Border:

  • Color – Choose border color

  • Width – Adjust thickness

Product

The Product settings control how the products appear under each tab.

Display Settings

This section lets you define the overall product layout.

You can customize:

  • Number of Items – Decide how many products to display

  • Layout – Choose how the products are arranged

  • Background Color – Set the section background color

  • Padding – Control spacing inside the section

  • Margin – Manage spacing outside the section

Product Card Settings

This section controls the appearance of each product card.

You can customize:

  • Image Attributes – Adjust the image style and display

  • Border – Control the border around the image or card

  • Title – Style the product title

  • Vendor – Customize how the vendor name appears

  • Price – Control the product price style

  • Compare Price – Style the compare price text

  • Action Button – Enable or disable the action button

  • Card Background – Choose the background color and spacing of the card

  • Card Border – Adjust border color and width

Button

This section controls the appearance of the action button shown on product cards.

You can customize:

Text Style

  • Button text

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Border

  • Color

  • Width

Left Icon and Right Icon

  • Choose or upload icon

  • Set icon color

Advanced Settings

  • Radius

  • Padding

  • Relation

  • Format

  • Position

  • Background color

Benefits:

  • Reduces page clutter while still showcasing multiple product groups

  • Improves user experience by letting users switch views instantly

  • Keeps users engaged longer leading to higher interaction and session time

  • Helps highlight multiple strategic collections in one section

  • Increases chances of discovery

Related Articles

Announcement bar

1 min read

Button

2 min read

Image Block

1 min read

Image Banner

1 min read