Plugin Details
Home / Plug-in market / Product Carousel Module
Product Carousel Module
Product Carousel Module
Overview
Product Carousel is a plugin that adds a product carousel display module to the admin "Design → Decoration" builder. You can manually pick a set of products, or pull products automatically by category, most viewed, or best selling rankings, and display them as a horizontal slider. The module supports a title, description, items per row, previous/next arrows, an auto-calculated discount ribbon, and a customizable "View More" button.
Key Features
🎯 Four Product Sources
| Source | Description |
|---|---|
| Pick products manually | Manually search and select products – supports drag-and-drop reordering |
| By category | Select a category – products are automatically pulled from it |
| Most viewed | Automatically pulls products by highest view count |
| Best sellers | Automatically pulls products by highest sales volume |
📐 Rich Configuration Options
| Option | Description |
|---|---|
| Title & Description | Multi-language title and rich text description |
| Total products | Configurable from 1 to 50 products |
| Items per row (PC) | Configurable from 1 to 6 |
| Module width | Narrow (container) / Wide (container-fluid) / Full width (w-100) |
| View More text | Custom button text (multi-language support) |
| View More link | Custom link (auto-links to the selected category when using category source) |
🛒 Product Card Features
-
Product image : Reuses the system product card component – includes image, name, and price
-
Discount ribbon : Automatically calculates discount percentage, displayed as a brand-color flag-shaped ribbon
-
Hover effect : Follows system default product card hover behavior
Technical Features
-
✅ Smooth Horizontal Carousel : Built with native scroll-snap – smooth and natural scrolling
-
✅ Pure CSS Navigation Arrows : No icon font dependency – brand color hover feedback
-
✅ Responsive Design : PC displays set number of columns, tablet 2 columns, mobile ~1.4 columns (peeks at next item)
-
✅ Auto-calculated Discount Ribbon : Automatically calculates and displays discount percentage based on original and sale price
-
✅ Smart Button Display : "View More" appears only when both text and link are provided
-
✅ Smart Category Link : When using category source, "View More" automatically links to the selected category page
-
✅ Performance Optimized : Lazy-loaded images, ResizeObserver dynamically updates arrow states
-
✅ Full Design Editor Support : MutationObserver listens for AJAX-injected modules and auto-binds carousel events
Use Cases
-
Featured product recommendations
-
Popular product showcase
-
Limited-time promotion carousel
-
New product launch display
-
Category product recommendation wall
