# 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) |