Product comparison settings

Product comparison Section Guide

This guide describes the Product comparison section.

Use this section to compare multiple products side by side in a clean, table-style layout. Each product entry can include an image, title, price, and product description, added through blocks.

Comparison fields can include:

Variant options
Product type
SKU
Vendor

These details are pulled automatically from the product’s detail page—provided the relevant information has been filled in.

For more flexibility, you can create metafields to display custom information. Additionally, manual input is supported, allowing you to add unique data or custom content directly into the comparison table.

You can add a button to each product column. This button can be customized with options such as:

View Product: This will link to the product detail page for more information.
Add to Cart: For products without variants, this button allows customers to add the product directly to the cart.
Quick View: For products with variants, this button triggers a Quick View popup, allowing customers to select variants and add the product to the cart without leaving the page.

Demo Example:

The Product Comparison section displayed on the product detail page, featuring three similar products. Each product is shown with its image, title, price, description, and key specification such as weight. Custom metafields are used to display unique attributes like nutritional information and discount details, helping customers make informed purchasing decisions.

How to access the Product comparison section

Note: Section cannot be added to the Password page.

From any page, click on “Add Section” and choose “Product comparison” from the list.

To insert a new section between existing ones, follow the steps in the article "Add a section"

How to configure the Product comparison section

Basic Components

The “Product comparison” section consists of two primary components:

General settings
Block. Available block types include:

By default:

Image (The related article "Image")
Title (The related article "Title")
Price (The related article "Price")

You can also add:

Product type (The related article "Product type")
Product description (The related article "Product description")
Product SKU (The related article "Product SKU")
Variant option (The related article "Variant option")
Custom content (The related article "Custom content")
Metafield (The related article "Metafield")
Button (The related article "Button")

General settings

Select a setting described in the following table:

Setting	Description
Heading	To add a heading, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. Furthermore, you can click the dynamic source button to insert a dynamic source for the featured collection description.
Heading size	The heading size setting offers three options to control the size of the section heading: Small Medium Large
Description	To add a description, simply enter the text in the provided field. In the top menu of the field, you can find options to customize text such as making it bold, italic, or adding a hyperlink. Furthermore, you can click the dynamic source button to insert a dynamic source for the featured collection description.
Description size	Choose the font size for description: Small Medium Large
Heading alignment	You have three options to align heading or heading with description: Left: Aligns heading and description to the left side of the section. Center: Aligns heading and description to the center of the section. Right: Aligns heading and description to the right side of the section.
Table content alignment	Left Center Right
Products	You can add up to 4 products to compare different characteristics, allowing customers to choose the best option. Click on Select product and look through the list to pick 4 products.

Section paddings

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.