Plugin Details
Home / Plug-in market / Product Tabs Decoration Module
Product Tabs Decoration Module
Product Tabs Decoration Module
Overview
Product Tabs is a plugin that adds a product tabs display module to the admin "Design → Decoration" builder. You can add multiple "albums" (each album is a product category), and the storefront displays them as tabs — the album titles form the top navigation, and switching tabs (on hover or click) swaps the products shown to those of that album. Each product card features an automatic discount ribbon (X% OFF), a struck-through original price, and the current price. A bottom "View More" button links to the active album's category page. Perfect for homepage multi-category product recommendations, brand zone displays, promotional category shopping guides, and similar use cases.
Key Features
🏷️ Tab-Based Product Display
| Feature | Description |
|---|---|
| Multiple albums support | Add multiple product categories as albums — each album becomes an independent tab |
| Two switch modes | Supports hover-based switching or click-based switching |
| Independent product lists | Each tab automatically pulls products from its corresponding category |
| View More link | Bottom button automatically links to the active tab's product category page |
🛒 Product Card Features
| Feature | Description |
|---|---|
| Discount ribbon | Automatically calculates discount percentage — displayed as a brand-color flag-shaped ribbon (X% OFF) |
| Price display | Sale price + struck-through original price — clearly shows discount value |
| Login-based price display | Follows system settings — can hide prices for non-logged-in users |
| Image hover zoom | Product image smoothly scales on hover |
📐 Rich Configuration Options
| Option | Description |
|---|---|
| Title | Main module title (multi-language support) |
| Short description | Module description text (rich text support) |
| Total products | Number of products shown per tab (1–50) |
| Items per row (PC) | Configurable from 2 to 6 columns |
| Items per row (Mobile) | Configurable from 1 to 3 columns |
| Tab switch mode | On mouse move / On click |
| View More copy | Custom button text (multi-language support) |
| Module width | Narrow (container) / Wide (container-fluid) / Full (w-100) |
📋 Album (Tab) Management
| Feature | Description |
|---|---|
| Drag-and-drop sorting | Tabs support drag-and-drop reordering |
| Custom titles | Each tab can have its own custom navigation title (multi-language support) |
| Album selector | Popup category selector with search support |
| Automatic resolution | Automatically pulls album covers, titles, and links |
Technical Features
-
✅ Smooth tab switching : Supports both hover and click switch modes — fade animation on switch
-
✅ Responsive grid : 2–6 columns on PC, 1–3 columns on mobile — automatically adapts
-
✅ Auto-calculated discount ribbon : Automatically calculates and displays discount percentage based on original and sale price
-
✅ Smart price display : Follows system "show price after login" configuration
-
✅ Smart tab navigation naming : Prioritizes custom titles — automatically falls back to the category's last-level name when custom title is empty
-
✅ Auto-hide empty data : Tabs with no products are automatically hidden on the storefront (placeholder cards shown in design preview)
-
✅ Dynamic View More link : Automatically links to the currently active tab's product category page
-
✅ Any theme compatible : Frontend views are plugin-bundled — product cards reuse current theme components
-
✅ Full design editor support : Real-time preview — tabs support drag-and-drop sorting
Use Cases
-
Homepage multi-category product recommendations (Women/Men/Kids/Accessories)
-
Brand zone displays (Nike/Adidas/Puma)
-
Promotional category shopping guides (Flash Sale/Bestsellers/New Arrivals)
-
Seasonal product recommendations (Spring-Summer/Fall-Winter/Holiday Limited)
-
Floor-style product navigation
