Product List: Tabs

The section is designed to display products in tabbed categories, allowing customers to switch between different groups of products without leaving the section.

The design emphasizes organized navigation and easy browsing, making it ideal for stores with multiple collections, product types, or featured categories that need to be displayed in a compact, interactive format.

Location: Sections -> Templates -> Products: Product List: Tabs

---

Product List: Tabs – Options Overview

Option Group	Option	Explanation
Heading	Subheading	Optional short line shown above the main heading.
	Heading	The main title of the section.
	Description	Text displayed below the heading to provide additional context.
	Heading alignment: Left / Center	Aligns all heading text to the left or center.
Layout	Top spacing: None / Small / Medium / Normal	Adjust vertical space above the section.
	Width: Default / Boxed / Wide	Controls the content width; Wide applies on screens ≥1440px.
	Number of columns: 2–8	Defines how many products appear per row on desktop.
	Number of columns on tablet: 2–4	Adjusts the number of products per row on tablet devices.
	Mobile grid: One item per row / Two items per row	Controls how products are arranged on mobile.
Slider settings	Enable slider	Turns the product row into a horizontal slider.
	Desktop navigation: Disable / Dots / Arrows / Dots and arrows	Controls navigation controls for desktop slider mode.
	Mobile navigation: Disable / Dots	Controls mobile slider navigation controls.
	Enable autoplay	Slider scrolls automatically if enabled.
Products	Image hover effect	Select how product images animate on hover.
	Image ratio	Controls product image shape (e.g., Square, Portrait, Round).
	Products	Select products manually for each tab.
	Image action: Only image / Show second image on hover / Gallery	Defines what happens when interacting with product images.
	Show second image on hover	Displays an alternative product image on hover.
	Customize	Adjust product card content (links, icons, visibility).
Dividing line	Show	Displays a horizontal line above the section.
Background	Background: Hide / Color / Gradient / Image	Controls the background style of the entire section.
Colors	Base	Main text color.
	Accent	Highlight or call-to-action color.
	Lines	Border & divider color.
Product card color	Vendor, type	Text color for vendor and type.
	Vendor, type hover	Hover color for vendor and type.
	Product name	Normal state color for product title.
	Product name hover	Hover state color for product title.
	Regular Price	Color of standard price.
	Sale Price	Color of discounted price.
	Old price	Color of struck-through old price.
	Description	Text color for product descriptions.
Badges	Sale badge	Background/text style for sale label.
	Sale badge text	Color of sale badge text.
	Featured badge	Background/text style for featured products.
	Featured badge text	Text color on featured badge.
	Sold out badge	Background/text style for sold-out label.
	Sold out badge text	Text color on sold-out badge.
	Countdown background	Background color for countdown timer badge (if enabled).
	Countdown text	Text color for countdown timer badge.
Interface buttons	Interface button background	Background of wishlist/compare/quickview/slider buttons.
	Interface button icon	Icon color for these buttons.
	Interface button background hover	Hover background color.
	Interface button icon hover	Hover icon color.
	External interface button background	Background of buttons displayed outside product card.
	External interface button icon	Icon color of external buttons.
	External interface button background hover	Hover background for external UI buttons.
	External interface button icon hover	Hover icon color for external UI buttons.
Variants buttons	Background	Button background color.
	Border	Border color.
	Text	Text color.
	Background hover	Background hover color.
	Border hover	Hover border color.
	Text hover	Hover text color.
	Background sold out	Background color when variant is unavailable.
	Border sold out	Border color for unavailable variants.
	Text sold out	Text color for unavailable variants.
Input	Background	Background applied to select/dropdown/input elements.
	Border	Input border color.
	Text	Text color inside input fields.
	Icon	Color of icons inside input elements.
	Background hover	Background color on hover.
	Border hover	Border hover color.
	Outline hover	Outline/on-focus highlight.
	Text hover	Text hover color.
	Icon hover	Icon hover color.
Add to cart button	Show background	Enables solid or gradient background.
	Background	Normal background color.
	Background gradient	Gradient background style.
	Border	Border color.
	Text	Text color.
	Icon	Icon color inside button.
	Show background on hover	Enables different hover background.
	Background hover	Hover background color.
	Background gradient hover	Hover gradient.
	Border hover	Hover border color.
	Text hover	Hover text color.
	Icon hover	Hover icon color.
	Enable shadow	Adds shadow effect to button.
	Shadow	Default shadow.
	Shadow hover	Hover shadow effect.
Link button	Show background	Enable background for link-styled buttons.
	Background	Background color.
	Background gradient	Gradient background option.
	Border	Border color.
	Text	Text color.
	Show background on hover	Hover background style.
	Background hover	Hover background color.
	Background gradient hover	Hover gradient.
	Border hover	Hover border color.
	Text hover	Hover text color.
	Enable shadow	Add shadow to the link button.
	Shadow	Default shadow settings.
	Shadow hover	Hover shadow settings.
Media button	Slider arrows	Style/visibility of slider arrows.
	Slider dots	Style/visibility of slider dots.
Review stars	Stars active	Color of filled/active rating stars.
	Stars base	Color of empty/inactive rating stars.
Tabs button	Show background	Show/hide background behind tab labels.
	Background	Background color for tabs.
	Background gradient	Gradient option for the tab buttons background.
	Border	Border color.
	Text	Text color of tab names.
	Show background on hover	Hover background enabled.
	Background hover	Hover background color.
	Background gradient hover	Hover gradient.
	Border hover	Hover border color.
	Text hover	Hover text color.