Product Compare

The Product Compare section allows merchants to display multiple products so customers can easily compare their key attributes.

1. Section Settings

Setting

Description

Product list

Select the products to include in the comparison.

Layout

Choose the display style: Card or Table.

Image ratio

Controls the product image aspect ratio.

Show button detail

Shows or hides the product detail button.

Label

Text displayed on the detail button.

Button style

Button appearance: Outline or Solid.

Show icon

Displays an icon inside the button.

Icon button

Select the icon used for the button.

Color scheme

Applies a color scheme to the section.

Section padding

Controls the spacing around the section, including top and bottom padding for desktop and mobile.

2. Section Header

The Section Header allows merchants to add introductory content above the section.

Block

Description

Heading

Displays the main title of the section.

Sub text

Displays a short description below the heading.

Text

Adds additional text content in the header area.

Group button

Adds one or more buttons for navigation or promotion.

Spacer

Adds vertical spacing between header elements.

3. Blocks

Blocks define the comparison criteria displayed for each product.

Block

Description

Text

Displays custom text content for comparison attributes.

Rating

Displays the product rating in the comparison.

Option

Displays a product variant option such as Size or Color.

Variant option values are automatically retrieved from the product variants.

4. Display Category Metafields in the Text Block

The Text block can connect to dynamic data to display product-specific information, such as Color, Material, or Style.

Step 1: Add category metafield values

  1. Go to Shopify Admin → Products.

  2. Open a product.

  3. Select the appropriate Product category.

  4. Enter values under Category metafields.

  5. Click Save.

Step 2: Connect the metafield in the theme

  1. Go to Online Store → Themes → Customize.

  2. Open the Product Compare section.

  3. Add or select a Text block.

  4. Enter the attribute name in the Title field, such as Material.

  5. Click the Dynamic source icon.

  6. Select the corresponding category metafield.

  7. Click Save.

The section will automatically display the metafield value of each selected product.

Add a separate Text block for each attribute you want to compare. Products without a metafield value may display an empty field.