Skip to main content

Product compare

The Product compare section helps customers easily compare multiple products side by side. It’s a great way to highlight differences in quality, compatibility, or value, making it easier for customers to choose the right product for their needs.

Settings

SettingDescription
Color schemeSelect a predefined color scheme.
Heading + Associated settingsCustomize the section heading. Choose between your theme’s body or heading font, adjust the font size, and optionally display the text in all caps for extra emphasis.
Text + Associated settingsCustomize the text, and size of your text to match your design.
Comparison color styleChoose between showing your comparisons as your associated color scheme text color or give them a hint of color using your themes accent color.
Comparison 1-5 titleAdd labels for the features or attributes you want to compare across products.
Section spacing & borderSee shared settings > Section spacing & border. Associated settings below.
Section animationsAnimate section when scrolled into view.

Product compare settings being used

Shared settings

These settings are common to several sections and work the same way wherever they appear. Once you learn how they work in one place, you'll recognize them elsewhere.

Spacing and border

The section Spacing & Border settings allow you to control how much vertical space line between your sections. Mix and match to find what works for you. Show a stylistic border between sections to emphasize the break between content.

SettingDescription
Top spacingHow much spacing applies to the top of this section.
Bottom spacingHow much spacing applies to the bottom of this section.
Show bottom borderShow a stylistic border at the bottom of the section spacing
Visual example.

Showing section height settings in action

Block - Product

Select your comparison product and choose the comparison value associated with the numbered label.

SettingDescription
ProductSelect your comparison product.
Comparison 1-5 valuesChoose between true, false, or 1-5 star type ratings to convey the differences between your products.

Using the comparison product block