Add-to-compare toggle button for product listings. Quick-add functionality with visual feedback.
The Compare Icon widget is a PRO feature that adds an icon to product cards or the Product Details page, allowing customers to queue products for side-by-side comparison. It works in conjunction with the Product Comparison widget to power the full comparison experience.
| Setting | Description | Default |
|---|---|---|
| Icon | Icon for the compare toggle: Scales, Arrows, Columns | Scales |
| Icon Size | Size of the icon in pixels | 20px |
| Active Colour | Icon colour when the product is in the comparison list | #0F766E |
| Inactive Colour | Icon colour when the product is not in the list | #9CA3AF |
| Max Compare Items | Maximum number of products that can be compared at once | 4 |
| Show Tooltip | Display tooltip text on hover | Enabled |
| Tooltip Text (Add) | Tooltip when product is not in the comparison list | Compare |
| Tooltip Text (Remove) | Tooltip when product is already in the comparison list | Remove from Comparison |
| Compare Bar | Show a floating bar at the bottom of the page listing queued comparison items | Enabled |
Add the Compare Icon to product cards in the Product Grid so customers can queue multiple products for comparison while browsing. Place it on the Product Details page so customers viewing a product can immediately add it to their comparison list. Pair it with the Product Comparison widget on a dedicated comparison page.
