Salve product comparison and specifications

Salve gives you two ways to compare products: the compare tray, where shoppers pick products themselves, and the Comparison table section, where you choose the products. Both read the same specifications metafield.

The specifications metafield

Specifications are stored in health.specs, a JSON metafield. It feeds the Specifications block on the product page, the compare tray and the Comparison table section. To create the definition, see the Health data setup guide.

Format

The value is a list of rows. Each row has a label, a value and an optional unit:

[{"label": "Cuff size", "value": "22–42", "unit": "cm"}, {"label": "Memory", "value": "2 x 60", "unit": "readings"}, {"label": "Power", "value": "4 x AA batteries"}]

  • Put the whole list in square brackets, [ ], and each row in curly brackets, { }.
  • Put every label, value and unit in straight double quotes, ". Curly quotes from a word processor won't work.
  • Separate rows with commas. Don't add a comma after the last row.
  • Rows appear in the order you write them. Rows without a label are skipped.
  • The admin checks the JSON when you save. If it shows an error, look for a missing comma, bracket or quote.

Examples

A blood pressure monitor:

[{"label": "Measurement site", "value": "Upper arm"}, {"label": "Cuff size", "value": "22–42", "unit": "cm"}, {"label": "Memory", "value": "2 x 60", "unit": "readings"}, {"label": "Display", "value": "Backlit LCD"}, {"label": "Power", "value": "4 x AA batteries"}]

A foam dressing:

[{"label": "Pad size", "value": "7.5 x 7.5", "unit": "cm"}, {"label": "Wear time", "value": "Up to 7", "unit": "days"}, {"label": "Sterile", "value": "Yes"}, {"label": "Latex-free", "value": "Yes"}]

A supplement:

[{"label": "Form", "value": "Softgel"}, {"label": "Servings per container", "value": "60"}, {"label": "Serving size", "value": "1", "unit": "softgel"}]

Specifications describe the product. Don't put performance or health claims in them.

Keep labels consistent

Comparison matches rows by label. "Cuff size" on one product and "Cuff Size" or "Cuff range" on another become separate rows, and each product shows a dash in the row it doesn't have.

  • Keep a list of approved labels for each product type, and copy labels from it.
  • Use the same capital letters and spacing on every product. The compare tray treats "Cuff size" and "Cuff Size" as different rows.
  • Put units in unit, not in the value, and use the same unit on every product. For example, always "cm", never "cm" on one product and "mm" on another.
  • Use the same order on similar products. The compare tray lists rows in the order it first finds them.

The compare tray

The compare tray lets shoppers pick up to four products from product cards and compare them side by side.

Turn it on

Go to theme settings, open Product cards and turn on Enable product comparison. It's on by default in the Gauge preset. Product cards then show a Compare checkbox.

How shoppers use it

  1. Shoppers select Compare on up to four product cards. A tray appears at the bottom of the screen with the chosen products.
  2. With two or more products chosen, they select the Compare button in the tray.
  3. A window opens with a table: one column per product, and rows for price, regulatory status, HSA/FSA eligibility and each specification.
  4. Shoppers can turn on Highlight differences, add single-variant products to the cart from the table, or follow a link to choose options.

The regulatory status row shows only when at least one product has a status, and the HSA/FSA row only when at least one product is eligible. The selection stays while the browser tab is open.

Tip: the collection.compare template shows filters in a horizontal bar, which leaves more room for product cards. Assign it to collections of comparable products.

The Comparison table section

Use the Comparison table section to compare products you choose, for example your three most popular monitors. It works whether or not the compare tray is on.

  1. Add the Comparison table section to a page or template.
  2. In Products, choose up to four products.
  3. In Specification rows, write one label per line. Use the labels from the products' specifications, in the order you want. The section ignores capital letters when it matches labels.
  4. Choose whether to show the price row and the add to cart row.

Rows with no data for any product are hidden. A product without a value for a row shows a dash.