Skip to content
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) |