Plugin Details
Home / Plug-in market / Price Comparison Decoration Module
Price Comparison Decoration Module
Price Compare Decoration Module
Overview
Price Compare is a plugin that adds a price comparison display module to the admin "Design → Decoration" builder. It is used to showcase multiple subscription or pricing plans, presenting each plan clearly in card format. The module supports drag-and-drop sorting, entrance animations, horizontal scrolling on mobile, and allows independent configuration of a "Popular" ribbon card and a default "Active" highlighted card. All colors are customizable in the admin panel, making it ideal for membership plans, service packages, subscription comparisons, and similar use cases.
Key Features
💳 Price Comparison Cards
| Feature | Description |
|---|---|
| Card content | Each card includes an image, title, subtitle, sale price, original price, unit, and a feature list (supports line breaks) |
| Two buttons | Primary button (global text) and secondary button (independent per card) – both support links |
| Drag-and-drop sorting | Card list supports drag-and-drop reordering |
| PC/Mobile adaptation | Configurable items per row on PC (1–6 columns); mobile can choose between horizontal scroll or vertical stack |
🏷️ Special Card Indicators
| Feature | Description |
|---|---|
| Popular ribbon | Assign a "Popular" recommendation ribbon to any card – supports custom text and colors |
| Default active highlight | Assign a default selected card – supports independent title background/text and content background colors |
🎨 Extensive Color Customization
| Category | Configurable Items |
|---|---|
| General cards | Title background/text, content background/text, sale price color, original price color |
| Button colors | Primary button background/text, secondary button background/text (text color also used as border) |
| Popular ribbon | Card position, text, text color, background color |
| Active card | Card position, title text/background, content background |
✨ Visual Enhancements
| Feature | Description |
|---|---|
| Entrance animation | Cards fade in and slide up when scrolled into view – supports staggered delay effects |
| Icon selection | Feature list supports 6 icon styles (check / check circle / arrow / star / dot / none) |
| Hover effect | Cards have shadow on hover – active cards have a more pronounced shadow |
| Mobile scrolling | Optional horizontal scroll on mobile with snap-to-card behavior |
Technical Features
-
✅ Responsive grid layout : 1–6 columns on PC; mobile can switch between horizontal scroll and vertical stack
-
✅ Scroll-triggered entrance animation : Uses Intersection Observer to detect visibility – cards fade in and slide up sequentially
-
✅ Staggered delay effect : Multiple cards appear in order – more natural animation
-
✅ Rich color customization : Separate color schemes for regular cards, popular cards, and active cards
-
✅ Flexible button system : Primary button uses global text; secondary button independent per card
-
✅ Line-break feature list : Admin input supports line breaks – each line automatically becomes a list item
-
✅ Mobile optimized : Horizontal scroll mode supports snap-to-card – enhances touch experience
-
✅ Any theme compatible : Frontend views are plugin-bundled – styles use CSS variables for adaptation
Use Cases
-
Membership plan / subscription plan comparison
-
Service plan / product version comparison (Standard / Pro / Enterprise)
-
Pricing page display
-
SaaS service plan comparison
-
Course / training program showcase
