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