Product List: Tabs Listing
The section is designed to display products within tabbed categories using a listing-style layout.
This design emphasizes clarity and readability, combining the organizational benefits of tabs with the straightforward, detailed presentation of a product list. Customers can easily switch between tabs to view different product groups while seeing each item’s essential details in a consistent and structured format.
Within each tab, products are presented in a vertical or grid-like list, with uniform product cards showing images, product names, vendor, price, review stars, and badges such as Sale, Sold Out, or Feature. The listing format ensures that all product information is clearly visible, making it easier for shoppers to compare items and make decisions quickly.
Location: Sections -> Templates -> Products: Product List: Tabs Listing
Product List: Tabs Listing – Options Overview
Heading
Subheading
Adds a small text line above the main title, useful for short introductory context.
Heading
Sets the main title displayed above the tabs section.
Description
Adds a longer descriptive text below the title.
Heading alignment: Left / Center
Controls how the heading and text are aligned horizontally.
Layout
Top spacing: None / Small / Medium / Normal
Adjusts vertical spacing above the section for page balance.
Width: Default / Boxed / Wide
Defines the width of the section. Wide is visible only on screens wider than 1440px.
Number of columns: 2–8
Sets how many products are shown per row on desktop.
Number of columns on tablet: 2–4
Sets how many products appear per row on tablet devices.
Slider settings
Enable slider
Converts the product grid into a horizontal slider, useful when many products are displayed.
Products
Align text relative to image: Top / Center
Controls whether product text sits at the top or center of the product card.
Image hover effect: Basic / Disable / Zoom / Slide / Shine etc.
Defines how the product image behaves when a user hovers over it.
Image ratio: Auto / Portrait / Landscape / Square / Round / Story / Widescreen
Selects the shape and proportions of product images.
Show second image on hover
Displays the second product image when hovering. Useful for lifestyle or detail preview.
Customize
Opens extended styling options if available.
Dividing line
Show
Displays a separating line above the section to help structure content.
Background
Background: Hide / Color / Gradient / Image
Controls the background appearance behind the section.
Colors
Base
Vendor
Color of product vendor name.
Heading
Color of product title.
Heading hover
Color applied when hovering over the product title.
Regular Price
Color for the regular product price.
Accent
Sale Price
Color for highlighted sale price.
Lines
Old price
Color for the crossed-out previous price.
Link button
Show background
Enables or disables background fill for the link button.
Background / Background gradient
Sets background style of the button.
Border
Defines button border color.
Text
Defines button text color.
Show background on hover
Shows or hides background on hover.
Background hover / Gradient hover
Background appearance when hovered.
Border hover
Border color on hover.
Text hover
Text color on hover.
Enable shadow
Enables shadow effect for button.
Shadow / Shadow hover
Shadow appearance normally and on hover.
Media button
Slider arrows
Toggles visibility of arrows for sliding.
Slider dots
Toggles visibility of navigation dots under the slider.
Tabs button
Show background
Shows or hides tab background.
Background / Background gradient
Controls the normal tab background style.
Border
Sets tab border color.
Text
Sets tab label color.
Show background on hover
Adds or removes hover background.
Background hover / Gradient hover
Background appearance on hover.
Border hover
Border color when hovering.
Text hover
Text color on hover.
Review stars
Stars active
Color of filled stars that represent the rating.
Stars base
Color of empty (non-filled) stars to create contrast.
Last updated