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.