Plugin Details
Home / Plug-in market / Topic Tabs Decoration Module
Topic Tabs Decoration Module
Topic Tabs Decoration Module
Overview
Topic Tabs is a plugin that adds a topic tabs display module to the admin "Design → Decoration" builder. You can add multiple "groups" (each group is a tab), and within each group, pick multiple "topics" (article categories) via multi-select. On the storefront, the module displays as tabs — the group titles form the top navigation, and switching tabs (on hover or click) swaps the topic cards shown. Each card features a cover image, title, short description, and a "Read More" link that navigates to that topic (article category) page. Perfect for homepage content aggregation, blog category navigation, brand storytelling, and similar use cases.
Key Features
🏷️ Tab-Based Topic Display
| Feature | Description |
|---|---|
| Multiple groups support | Create multiple tab groups — each group has its own independent topic collection |
| Multi-select topics | Popup topic multi-selector with search and batch selection for article categories |
| Topic cards | Each card includes a cover image, title, short description, and "Read More" link |
| Two switch modes | Supports hover-based switching or click-based switching |
🖼️ Topic Card Features
| Feature | Description |
|---|---|
| Cover image | Automatically pulls the cover image from the most recent active article under that category (toggleable show/hide) |
| Image margin | Configurable padding around cover images (0–40px) — margin area displays the image background color |
| Image background color | Customizable background color for the image area (supports opacity) |
| Short description | Displays the article category's summary description (toggleable show/hide) |
| Title & link | Clicking the title or "Read More" navigates to the article category page |
| Read more text | Customizable "Read More" button text |
📐 Rich Configuration Options
| Option | Description |
|---|---|
| Title | Main module title (multi-language support) |
| Short description | Module description text (rich text support) |
| Show cover image | Toggle to show/hide the topic cover image |
| Image margin | Padding around cover images (0–40px) |
| Image background color | Custom background color for the image area |
| Show short description | Toggle to show/hide the topic summary |
| Text alignment | Left / Center / Right |
| Items per row (PC) | Configurable from 2 to 6 columns |
| Items per row (Mobile) | Configurable from 1 to 3 columns |
| Read more text | Custom button text (multi-language support) |
| Tab switch mode | On hover / On click |
| Module width | Narrow (container) / Wide (container-fluid) / Full (w-100) |
📋 Group (Tab) Management
| Feature | Description |
|---|---|
| Drag-and-drop sorting | Tab groups support drag-and-drop reordering |
| Group title | Each group can have its own independent tab title (multi-language support) |
| Topic multi-selector | Popup topic selector with search and batch selection support |
| Selected topic management | Selected topics displayed as tags — supports individual removal |
| Automatic resolution | Automatically pulls topic cover images, titles, and links |
Technical Features
-
✅ Smooth tab switching : Supports both hover and click switch modes — fade animation on switch
-
✅ Smart cover image fetching : Automatically pulls the cover image from the most recent active article under each category
-
✅ Responsive grid : 2–6 columns on PC, 1–3 columns on mobile — automatically adapts
-
✅ Image margin & background color : Configurable padding around cover images — margin area displays custom background color
-
✅ User-friendly multi-selector : Popup topic selector with search and batch selection support
-
✅ Preview mode friendly : Automatically displays placeholder cards in design preview — WYSIWYG
-
✅ Drag-and-drop sorting : Tab groups support drag-and-drop reordering
-
✅ Any theme compatible : Frontend views are plugin-bundled — styles use CSS variables to adapt to themes
-
✅ Full design editor support : Real-time preview — intuitive group and topic configuration
Use Cases
-
Homepage news/blog category navigation (Tech/Fashion/Lifestyle/Food)
-
Brand story zone (Brand History/Culture/Awards)
-
Help center category entry points (User Guides/FAQ/After-Sales Policy)
-
Campaign topic aggregation (Limited-Time Events/Holiday Campaigns/Promotions)
-
Content marketing showcase area
