Product List: Tabs Vertical

The section is designed to display products within vertically oriented tabs, emphasizing a clear, navigable structure for multiple

This design places the tab navigation on the side (usually left or right), allowing customers to switch between categories while keeping the product display area wide and visually accessible.

Products within each tab are presented in a grid or list format, with consistent product cards that include images, product names, vendor, price, badges (Sale, Sold Out, Feature), and review stars. The vertical orientation of the tabs helps maximize horizontal space for product presentation, making it easier to showcase larger images or more information for each item.

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

---

Product List: Tabs Vertical – Options Overview

Option	Description
Heading	Controls the main text content at the top of the section.
Subheading	Optional short label displayed above the heading.
Heading	Main section title.
Description	Additional descriptive text below the heading.
Heading alignment	Aligns text (Left / Center).
Layout	Section spacing and width.
Top spacing	Controls spacing above the section (None–Normal).
Width	Choose overall layout width (Default / Boxed wide). Wide applies on screens ≥1440px.
Number of columns	Sets how many product columns appear (2–6).
Desktop banner width	Width of the banner area in desktop view (270–540px).
Slider settings	Controls product slider navigation and movement.
Desktop navigation	Choose navigation type (Disable / Dots / Arrows / Dots and arrows).
Mobile navigation	Choose navigation type for mobile (Disable / Dots).
Enable autoplay	Automatically scrolls products.
Products	Product card visuals and interactions.
Image hover effect	Choose hover animation style.
Image ratio	Define product image shape (Auto, Square, Portrait, etc.).
Products	Select products or collections to show.
Image action	What happens on hover (Show second image / Gallery).
Show second image on hover	Enables second image reveal effect.
Customize	Opens advanced product card style settings.
Dividing line	Section separator styling.
Show	Display or hide dividing line.
Background	Background design.
Background	Choose Hide / Color / Gradient / Image.
Colors	Basic theme color references.
Base, Accent, Lines	Define base visual styling.
Product card color	Text and price styles on product cards.
Vendor, type	Default text color.
Vendor, type hover	Hover color.
Product name	Product title color.
Product name hover	Hover color.
Regular price, Sale price, Old price	Pricing colors.
Description	Product description text color.
Badges	Styling for badges like Sale or Sold out.
Sale / Featured / Sold out badge + text	Control badge color and text.
Countdown background / text	Styles countdown timer badge.
Interface buttons	Wishlist, Compare, Quickview, Slider arrow icons.
Interface button background / icon / hover	Customize internal button appearance.
External interface button background / icon / hover	Controls buttons outside product card.
Variants buttons	Style product variant selectors.
Background / Border / Text	Default state colors.
Hover states	Background / Border / Text hover colors.
Sold out states	Background / Border / Text styles for unavailable items.
Input	Form fields styling (e.g., quantity selector).
Background / Border / Text / Icon	Default colors.
Hover + Outline hover	Interaction styles.
Add to cart button	Button styling.
Show background, Background, Gradient, Border, Text, Icon	Default states.
Hover states	Background hover, Gradient hover, Border hover, Text hover, Icon hover.
Enable shadow, Shadow, Shadow hover	Shadow styling.
Media button	Slider arrow and dot styling.
Slider arrows / Slider dots	Choose appearance.
Review stars	Rating stars display.
Stars active	Color for filled stars.
Stars base	Color for empty stars.

Tabs banner – Options Overview

Option Group	Settings
Image	Image
	Image ratio (mobile): Auto / Portrait (3:4) / Landscape (4:3) / Square (1:1) / Social story (9:16) / Widescreen (16:9)
	Image overlay opacity
	Image overlay fill
	Heading
	Heading size: Normal / Large
Settings	Underline on hover
	Text position: Top / Center / Bottom
	Text position (mobile): Top / Center / Bottom
	Text alignment: Left / Center
Colors	Tab item
	Tab item hover
Other	Image overlay color