DoubleShore Product Comparison

An Umbraco 17 property editor for building interactive product comparison tables, with drag-and-drop reordering, category management, per-product download links, optional styling controls, and responsive frontend rendering.

Features

• Compare multiple products across a set of features grouped into categories.
• Drag-and-drop reordering of products, categories, and features.
• A configurable maximum number of visible products; additional products remain available for switching.
• Per-product download links, using a configurable link-picker data type.
• Rich-text feature cells, using a configurable rich-text data type.
• Optional styling controls (background color, text color, and allowed CSS classes), scopable to products, categories, rows, or cells.
• Responsive frontend rendering via web components.

Requirements

• Umbraco 17
• .NET 10

Installation

dotnet add package DoubleShore.Kit.ProductComparison

The property editor and its backoffice UI register automatically once the package is installed — no manual configuration is required.

Usage

1. In the Umbraco backoffice, go to Settings → Data Types and create a new data type.
2. Choose Product Comparison as the property editor.
3. Configure the data type as needed — maximum visible products, the link-picker and rich-text data types to use, and (optionally) enable styling with its allowed classes, color data types, and scope.
4. Save the data type, then add it as a property on any document type.

Editors then build the comparison table by adding products, categories, and features. The stored value is rendered on the frontend through the package's value converter and web components.

License

MIT