Skip to content

Add comparative scales to product pages

This guide describes how to set up a Comparative scale (block) on your store's product pages.

An example of a Comparative scale block on a Product page.

The previous image shows a store page with a Featured product section, on the right. Below the product's Price, the section contains a Comparative scale block. On the left, the Marker position slider is set at 85%. This value is applied to the scale's marker position on the right. The marker position illustrates the relationship between the product's Sweet and Bitter features.

Use a comparative scale to compare two variables. For example, in the following image, the Comparison scale shows that the product is more Salty than Sweet.

An example of a Comparative scale using Sweet and Salty as variables.

Add a comparative scale block

A Comparative scale block can be added into the following product sections:

  • Featured product
  • Products > Default product > Product
  • Products > Preorder > Product

To add a Comparative scale block inside a product section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Featured product or Product section.

    Note

    To add a section, select Add section, choose Featured product or Product, and then select the section you added.

    The Product section is available only on Default product, and Preorder pages. A Featured product section can be added into any page, except Checkout and Giftcard pages. Refer to Shopify help: Add a section.

  2. From the side menu, select the Arrow icon to extend the section's settings menu.

  3. To configure an existing block, from the side menu, select a Comparative scale block.

    To add a new block, select Add block, choose Comparative scale, and then select the block you added.

    The Product section's settings menu in Theme editor.

  4. Apply a block setting described in the following table.

Block setting nameDescription
Display on cardSelect the checkbox Display on card to show/ hide a card behind the block. Adjacent blocks set to Display on card are merged into a single card. Refer to Shopify help: Cards.
Left labelIn the Left label text box, enter text to display as label text for the left side of the scale.
Left label > Insert dynamic sourceSelect the icon Insert dynamic source to choose a metafield to use as the source for the label text on the left side of the scale. Refer to Shopify help: Metafields
Right labelIn the Right label text box, enter text to display as label text for the right side of the scale.
Right label > Insert dynamic sourceSelect the icon Insert dynamic source to choose a metafield to use as the source for the label text on the right side of the scale. Refer to Shopify help: Metafields.
Marker positionAdjust the slider Marker position to set a value between 1 and 100 % (percent). The value applies to the scale's marker position inside the block. If the marker position slider is set to 1%, the scale's marker displays on the left side. If the marker position slider is set to 100%, the scale's marker displays on the right side.
Dynamic marker positionIn the text box Dynamic marker position, enter a metafield (key) name to use as the source for the block's value. The value applies to the scale's marker position inside the block. Adding a dynamic source overrides the Marker position slider. Refer to Add dynamic sources to comparative scales.
Dynamic marker position > Insert dynamic sourceSelect the icon Insert dynamic source to choose a metafield to use as the source for the block's value. The value applies to the scale's marker position inside the block. Adding a dynamic source overrides the Marker position slider. Refer to Add dynamic sources to comparative scales.
Remove blockSelect Remove block to delete the block from the section.

Add dynamic sources to comparative scales

By default, you set the value for a Comparative scale block using the Marker position slider. The value sets the position of the scale's marker inside the block. If you've many products with different values, the values can be set by using dynamic sources with product metafields.

Comparative scale blocks include the option to add values from a dynamic source. Adding a dynamic source overrides any value set by the Marker position slider.

To set up a new dynamic source, refer to Create metafields for scales and Shopify help: Metafields.

To add a dynamic source to a Comparative scale block:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Featured product or Product section.

    Note

    To add a section, select Add section, choose Featured product or Product, and then select the section you added.

    The Product section is available only on Default product, and Preorder pages. A Featured product section can be added into any page, except Checkout and Giftcard pages. Refer to Shopify help: Add a section.

  2. From the side menu, select the Arrow icon to extend the section's settings menu.

  3. In the section's settings menu, select a Comparative scale block.

  4. In the block settings menu, above the Dynamic marker position text box, select the icon to Insert dynamic source.

    The Insert dynamic source icon inside the block settings menu for a Comparative scale block.

  5. From the Insert dynamic source menu, choose a metafield.

    For example, in the following image, the Insert dynamic source menu lists the metafields for a Comparative scale block inside a Featured product section.

    The Insert dynamic source menu for a Comparative scale block in Theme editor.

    To set up a new dynamic source, select Add metafield. Refer to Create metafields for scales and Shopify help: Metafields.

  6. Select Save from the Unsaved changes menu at the top of the page.

Create metafields for scales

  1. In your store's admin, go to Settings > Custom data.

    The Shopify admin settings menu.

  2. On the Custom data page, in the Metafields area, select Products, and then choose Add definition.

    The Add metafield definition page on the Product settings page in Shopify admin.

  3. In the Name text box, enter a name for the metafield. For example, in the Name text box, enter Flavor-profile.

  4. In the Namespace and key text box, enter shapes_theme as the namespace prefix.

    In the following example, the Namespace and key box contains the text shapes_theme.flavor-profile.

    Example of the metafield settings for an integer in Shopify admin.

  5. [Optional] In the Description text box, enter text to describe the metafield. For example, enter Metafield for product flavor profile.

  6. Expand the Select content type list, and then select Number > Integer.

  7. Select Save from the Unsaved changes menu at the top of the page.

Set values for a product metafield

To set values for a product metafield:

  1. In your Shopify admin, select Products, and then select a product from the product list.

  2. At the bottom of the page, locate the Metafields area.

  3. Select a metafield from the list, and then enter the required value.

    For example, select the Flavor-profile metafield, and then enter the value 85 into the text box. Enter a whole number, without the percentage symbol %.

    Example values in the metafields area of a Product page in Shopify admin.

  4. Select Save.

  5. Add the metafield as a dynamic source into a Comparative scale block. Refer to Add dynamic sources to comparative scales.