Product comparison

Section overview

The Product comparison section displays multiple products side by side in a scrollable table format, allowing customers to compare product features, specifications, and pricing.

Common use cases

• Comparing specifications of similar products in the same category

• Showcasing different versions or models of a product line

• Highlighting the differences between basic, standard, and premium product options

• Creating feature comparison tables for technical products

Usage tips

• Limit comparisons to 3-5 products for optimal user experience

• Select products with similar attributes to make the comparison meaningful

• Use metafield blocks to highlight the most important comparison points for your products

• For mobile responsiveness, the section automatically creates a horizontally scrollable table that works well on smaller screens

Section settings

Setting	Description
Product	Select up to 5 products to compare
Heading	Main section heading text
Content	Rich text content to display below the heading
Button label	Text for the optional button
Button URL	URL for the optional button
Top spacing	Space above the section (0-300px)
Bottom spacing	Space below the section (0-300px)
Color scheme	Background and text color theme for the section
Border color	Color for section borders
Button color	Color scheme for the button
Title font	Font family for the heading
Border position	Position of borders around the section
X alignment	Horizontal alignment of content
Enable margin	Adds horizontal margin to the section
Enable split	Splits the heading and content into a separate column
Visibility	Controls section visibility on different device sizes

Block settings

Price

Displays the product's price information.

• Block limit: 1

Setting	Description
No settings for this block	This block shows product pricing and respects store settings for price ranges and sale prices

Rating

Shows the product's star rating.

• Block limit: 1

Setting	Description
No settings for this block	This block displays product ratings with stars

Stock

Displays the inventory level for the product.

• Block limit: 1

Setting	Description
No settings for this block	This block shows the total inventory quantity across all variants

Type

Shows the product type.

• Block limit: 1

Setting	Description
No settings for this block	This block displays the product type

Metafield

Displays product information from metafields.

• Block limit: 20

Setting	Description
Label	The label to show before the metafield value
Product metafields	Comma-separated list of metafields in namespace.key format