Product compare
Treble offers two kinds of comparison. Product compare adds a Compare button to product cards: customers pick products and see them side by side in a drawer. The Compare table section shows a fixed comparison on any page, with an "Only differences" switch.
How to set it up
Step 1: Turn on compare on cards
- Open Theme settings > Product compare and turn on Show compare on product cards (1).
- Set how many products can be compared at once.
- Under Compared details, add up to four rows: a label and a product metafield, for example
Batteryandcustom.spec_battery(2).
Step 2: Add a compare table
- Add the Compare table section, and pick the Products to compare.
- Add Row blocks: a label and a value (a product metafield, price, vendor or product type).
- On a product page, that product's column is highlighted when it's in the list.
Settings reference
Product compare
| Show compare on product cards | Turns this on or off. |
|---|---|
| Products compared at once | Slider. |
| Tray color scheme | Colors from Theme settings > Colors. |
| Compared details | |
| Summary row label | Shows the product metafield custom.spec_line. Leave blank to hide the label. |
| Row 1 label | |
| Row 1 metafield | Namespace and key, for example custom.battery |
| Row 2 label | |
| Row 2 metafield | Namespace and key, for example custom.battery |
| Row 3 label | |
| Row 3 metafield | Namespace and key, for example custom.battery |
| Row 4 label | |
| Row 4 metafield | Namespace and key, for example custom.battery |
Compare table
| Products to compare | On a product page, that product's column is highlighted when it's in the list. |
|---|---|
| Show prices | Turns this on or off. |
| Show buttons | Turns this on or off. |
| Show "Only differences" switch | Turns this on or off. |
Row block
| Label | |
|---|---|
| Value | Options: Product metafield, Price, Vendor, Product type. |
| Metafield | Namespace and key, e.g. custom.battery_life. True/false metafields show a check mark. |
| Icon | Options: None, Check, Star, Heart, Sparkle, Bolt, Leaf, Globe, Clock, Chat, Mail, Location, Phone, Tag, Gift, Eye, Layers, Shipping, Returns, Warranty, Protection, Refresh, Package, Cart, Headphones, Earbuds, Speaker, Waveform, Noise cancelling, Microphone, Volume, Bluetooth, Battery, USB-C, Plug, Power, Chip, Wi-Fi, Signal, Screen, Phone, Camera, Water resistance, Temperature, Gauge, Gear, Wrench, Hammer, Dimensions, Weight, Precision, Cube. |
| Custom icon | Replaces the icon. Use a square SVG or PNG. |
| Icon size | Slider. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Price, rating, options and availability are always compared in the drawer.
- Products without a value show a dash. True/false metafields show a check mark in the table.