Specification tables and compare

Chisel shows product specifications as grouped tables. Shoppers can also compare up to four products side by side. This guide covers where the tables appear, how to set them up, and how the compare feature works for shoppers and for you.

Before you begin

Where the specification tables appear

The theme shows the specification tables in two places.

  1. In the product information section. Add the Specifications block to the product template. It shows the table next to the product details. Its settings are Heading (default: "Specifications") and Rows before Show all (default: 8).
  2. In a full-width section. The Specifications section (the product-specifications section) shows the tables across the full page width. On desktop it places two groups side by side. The section's Heading setting is the title above the tables.

The product template includes the Specifications section by default. If a product has no specifications metafield, the section does not show.

Set up the specification tables

  1. Open a product in the Shopify admin.
  2. Add the specifications metafield, as described in the product data guide.
  3. Save the product and open its storefront page. Confirm that the table appears.
  4. In the theme editor, open the product template and check the Specifications section and block settings.

Limit the rows before the Show all control

Long tables stay short by default. Each group shows its first rows. The rest sit behind a Show all specifications control.

  1. Open the Specifications block in the product information section.
  2. Change Rows before Show all. The default is 8.
  3. Save.

The full-width Specifications section has the same setting. Open that section and change Rows before Show all. It works the same way as the block setting, and the default is 8.

Units and values

Keep the unit in the value text, such as "18 V" or "2.4 kg". The theme prints the value as written.

Compare products

Compare lets a shopper pick up to four products and read their details side by side.

Turn compare on or off

  1. Open the theme settings and go to the Trade features group.
  2. Turn Show product compare on or off. It is on by default.
  3. Open Prices, then Product cards. Turn Show compare on or off. It is on by default.

When compare is off, the compare checkboxes, the tray button and the bottom bar do not show.

What the shopper does

  1. On a collection page, the shopper selects Compare on one or more product cards. Only product cards in the grid show the checkbox. The list view does not show it.
  2. The collection toolbar shows a Compare tray button with the number of selected products. The tray button appears once one product is selected.
  3. When two or more products are selected, a bar at the bottom of the page appears. The shopper selects it to open the comparison.
  4. The comparison shows up to four products in one table. The theme merges the detail rows by group and label.
  5. Values that differ between products are highlighted with the highlighter color. The shopper can remove a column or add all products to the cart.

The shopper's selection is saved in the browser. It is not shared with other shoppers. The limit is four products. When four are selected, a fifth checkbox does not add a product. The theme announces that the list is full to screen readers.

Compare with similar on the product page

The Compare with similar section appears on the product page. It shows up to three products that can be compared with the current product.

The section uses one of two rules:

Products listed in the product's accessories metafield are left out of this section.

To set up compare groups:

  1. In the Shopify admin, open the product.
  2. Add the Compare group metafield with the key custom.compare_group. Use a single line text value.
  3. Enter the same value on each product that should be compared with the others. For example, use cordless-drills on all cordless drills.

The compare group key is fixed. You cannot rename it in the theme settings. The product data guide has the details.

If the section has fewer than two products to show, it does not appear.

Check your setup

  1. Open a product with a full specifications metafield. Confirm that the table shows its groups.
  2. Open a product with a long table. Select Show all specifications and confirm the rest of the rows appear.
  3. On the collection page, select Compare on two products. Confirm the tray button and the bottom bar appear.
  4. Open the comparison. Confirm that the rows match and that differing values are highlighted.
  5. Open a product that has a compare group. Confirm that Compare with similar shows products from the same group.

Settings used