Comparison table

Section overview

The Comparison table section allows merchants to display multiple products side by side in a horizontally scrollable format, enabling customers to easily compare different products and their features.

Common use cases

• Comparing different models or versions of similar products

• Highlighting product differences across a product line

• Showcasing product variations with different features or specifications

• Creating curated product comparisons for educational purposes

Usage tips

• Limit the number of products to 5 or fewer to ensure good performance

• Select products with comparable features to make the comparison meaningful

• Use metafield blocks to highlight key product specifications that customers care about

• Consider mobile responsiveness - while the section scrolls horizontally on mobile devices, it's best to focus on the most important comparison points

Section settings

Setting	Description
Product	Select up to 5 products to compare
Heading	Main section heading text
Content	Rich text content displayed below heading
Button label	Text for optional button under heading and content
Button URL	Destination URL for the optional button
Top spacing	Amount of spacing above section (0-300px)
Bottom spacing	Amount of spacing below section (0-300px)
Color scheme	Background and text color combination for the section
Border color	Color for section borders
Button color	Style and color for section buttons
Title font	Font family for section headings
Border position	Position of borders on the section
X alignment	Horizontal alignment of section content
Enable margin	Apply horizontal margin to section content
Enable split	Display header and comparison table in a split layout
Visibility	Control section visibility on different device types

Block settings

Price

Displays the product price with optional sale price comparison.

• Block limit: 1

Setting	Description
No settings available for this block	-

Rating

Shows product ratings using a star rating component.

• Block limit: 1

Setting	Description
No settings available for this block	-

Stock

Displays the current inventory quantity for the product.

• Block limit: 1

Setting	Description
No settings available for this block	-

Type

Shows the product type category.

• Block limit: 1

Setting	Description
No settings available for this block	-

Metafield

Enables displaying custom product data from metafields, allowing for flexible comparison of product specifications.

• Block limit: 20

Setting	Description
Label	Heading text for the metafield comparison row
Product metafields	Comma-separated list of metafields to display (format: namespace.key)