The Comparison table section in Maison lets you compare up to three products side by side. You can create your own comparison criteria, enter values manually, or connect values to product metafields using dynamic sources.
Each product is added as a Values column, while the Titles column defines the labels for the comparison rows.
Section overview
The Comparison table supports:
- Up to 3 Values columns
- Up to 25 comparison rows
- A Titles column for row labels
- Product image, title, variant, and price in each product column
- Manual rich-text comparison values
- Dynamic sources from product metafields
-
trueandfalsevalues displayed as check and cross icons - Sticky product information
- Product prices
- First available variant selection
- A Highlight differences toggle
- Section heading and description
- Custom colors
- Section width, divider, and spacing
STEPS:
Add the Comparison table section
Open the Maison theme editor and add the section to the page where you want to display the product comparison.
- Open the Maison theme editor.
- Open the page template where you want to add the comparison.
- Click Add section.
- Select Comparison table.
- Move the section to the desired position.
- Click Save when finished.
The default section includes a Titles column and Values columns that you can configure for your products.
Configure the section settings
Open the Comparison table section to configure its main behavior.
| Setting | Description |
|---|---|
| Enable sticky product info | Keeps the product information visible while customers scroll through a long comparison table. |
| Show price | Displays the product price in each Values column. |
| Select the first available variant | Uses the first available variant for multi-variant products and allows customers to add it directly to the cart. |
| Show "Highlight differences" toggle | Displays a toggle that customers can use to highlight rows where the product values are different. |
When Select the first available variant is enabled, Maison can show the first available variant name for products with multiple variants and provide an Add to cart button.
When it is disabled, customers are directed to the product detail page instead of adding the first available variant directly.
Configure the Titles column
The Titles column defines the labels for each comparison row.
It supports up to 25 titles:
- Title 1
- Title 2
- Title 3
- ...
- Title 25
For example:
| Title | Example |
|---|---|
| Title 1 | Material |
| Title 2 | Stackable |
| Title 3 | Warranty |
The title number corresponds to the same value number inside every Values column.
For example:
- Title 1 matches Value 1
- Title 2 matches Value 2
- Title 3 matches Value 3
Titles without content are automatically hidden.
Create group headings in the Titles column
You can use a title field as a group heading by adding #### before the text.
For example:
####Materials & construction
Maison displays this as a group heading instead of a normal comparison row.
You can use group headings to organize a long comparison table into sections such as:
- Materials & construction
- Dimensions & weight
- Features
- Care & warranty
For example:
-
Title 1:
####Materials & construction -
Title 2:
Material -
Title 3:
Frame & legs -
Title 4:
Colors available -
Title 5:
####Dimensions & weight -
Title 6:
Dimensions -
Title 7:
Weight
Add a Values column
Each Values column represents one product in the comparison table.
Maison supports up to 3 Values columns.
To configure a product column:
- Open the Comparison table section.
- Add or select a Values column.
- Select a product in Product.
- Enter the corresponding values from Value 1 through Value 25 as needed.
- Click Save.
The selected product is displayed at the top of the column with its product image and title.
Depending on the section settings, Maison can also display:
- Product price
- First available variant
- Add to cart button
- View product detail link
Enter comparison values
Each Values column provides up to 25 rich-text value fields.
| Setting | Description |
|---|---|
| Product | Selects the product represented by this column. |
| Value 1 – Value 25 | Adds the comparison value corresponding to the matching Title field. |
| Text size | Controls the text size used for values in this column. |
| Custom text size | Sets a custom desktop text size when Custom is selected. |
| Mobile custom text size | Sets a custom mobile text size when Custom is selected. |
Make sure every Values column uses the same row structure.
For example:
| Titles column | Product A | Product B | Product C |
|---|---|---|---|
| Material | Solid oak | Walnut veneer | Powder-coated steel |
| Stackable | true | false | true |
| Warranty | 5 years | 2 years | 10 years |
If a value is left empty, Maison displays a dash for that cell.
Display check and cross icons
Maison provides a convenient way to display yes/no specifications.
Enter:
true
to display a check icon, or:
false
to display a cross icon.
For example:
| Feature | Product A | Product B |
|---|---|---|
| Stackable | true |
false |
| Outdoor use | true |
false |
On the storefront, Maison converts these values into visual check and cross icons.
Connect Values to product metafields
Values can also use dynamic sources from the product selected in that Values column.
This lets you store comparison information in product metafields and reuse it automatically instead of entering the same information manually in the section.
For example, you can connect Value fields to product metafields for:
- Material
- Dimensions
- Weight
- Warranty
- Maximum load
- Care instructions
- Other product specifications
To use a dynamic source:
- Select a Values column.
- Select the product for that column.
- Open the dynamic source option for the relevant Value field.
- Connect the appropriate product metafield.
- Repeat for the other Values columns as needed.
- Click Save.
Configure value text size
Each Values column includes a Text size setting.
Available text sizes include the theme's predefined body sizes and a custom text size option.
When the custom option is selected, you can configure:
| Setting | Description |
|---|---|
| Custom text size | Controls the custom value text size on desktop. |
| Mobile custom text size | Controls the custom value text size on mobile. |
This allows each Values column to use text sizing that works well with the amount of comparison content.
Show product prices
Enable Show price in the Comparison table settings to display the price for each selected product.
The price appears with the product information at the top of each Values column.
Maison can also display the compare-at price when applicable.
Disable Show price if you want the section to focus only on product features or specifications.
Select the first available variant
Enable Select the first available variant when you want Maison to use the first available variant of a multi-variant product.
When enabled:
- The first available variant name can appear below the product title.
- The Add to cart button adds that first available variant directly to the cart.
- Customers can still use View product detail to open the full product page.
When disabled, Maison displays a View product detail action instead of directly adding the first available variant.
Enable sticky product info
Enable Enable sticky product info to keep the product information visible while customers scroll through the comparison table.
This is especially useful when the table contains many comparison rows.
The sticky product information follows the horizontal scroll position of the main comparison table, helping customers keep track of which product belongs to each column.
Highlight differences
Enable Show "Highlight differences" toggle to display a customer-facing option above the comparison table.
When customers turn on Highlight differences, Maison identifies comparison rows whose values differ between the product columns and visually highlights those rows.
This helps customers focus on the differences between similar products.
Configure the section heading
Use the heading settings to add introductory content above the table.
| Setting | Description |
|---|---|
| Heading | Adds the main section title. |
| Heading size | Controls the heading size. |
| Heading tag | Sets the HTML tag used for the heading. |
| Description | Adds supporting text below the heading. |
The available heading tags include:
- H1
- H2
- H3
- H4
- H5
- H6
- div
- span
- p
Configure colors and spacing
The Comparison table can use the global theme colors or custom colors for this section.
Enable Custom colors to configure:
| Setting | Description |
|---|---|
| Text color | Controls section text color. |
| Background color | Controls section background color. |
| Background gradient | Applies a gradient background. |
| Button text color | Controls button text color. |
| Button background color | Controls button background color. |
| Button gradient | Applies a gradient to buttons. |
You can also configure:
| Setting | Description |
|---|---|
| Section width | Controls the width of the Comparison table container. |
| Show section divider | Adds a divider around the section boundary. |
| Spacing | Controls desktop and mobile section spacing. |
Available section widths include:
- Narrow
- Page
- Wide
- Full
Example setup
A Comparison table can be structured like this:
| Titles column | Chair A | Chair B | Chair C |
|---|---|---|---|
| Materials & construction | |||
| Material | Polypropylene shell | Polyester fabric | Linen-blend fabric |
| Frame & legs | Solid walnut | Solid oak | Solid walnut |
| Colors available | Black, White | Olive, Purple | Gray |
| Dimensions & weight | |||
| Dimensions | W 63 × D 59 × H 83 cm | W 75 × D 72 × H 78 cm | W 70 × D 74 × H 80 cm |
| Weight | 6 kg | 12 kg | 13 kg |
| Features | |||
| Outdoor use | true | false | false |
| Removable cover | false | true | true |
| Care & warranty | |||
| Warranty | 5 years | 10 years | 10 years frame |
For the group rows, enter the title with the #### prefix in the Titles column.
Troubleshooting
If the Comparison table does not display correctly, check the following:
- Make sure the section contains at least one Values column.
- Maison supports a maximum of 3 Values columns.
- Make sure a product is selected in each Values column.
- Confirm that Title 1 corresponds to Value 1, Title 2 corresponds to Value 2, and so on.
- Empty titles are automatically hidden.
- If a Value is empty, Maison displays a dash in the corresponding cell.
- Enter exactly
trueorfalsewhen you want Maison to display check or cross icons. - If a dynamic value does not appear, confirm that the selected product contains data for the connected metafield.
- If Add to cart is not available as expected, check Select the first available variant and the selected product's availability.
- If the sticky product information does not appear, make sure Enable sticky product info is enabled and test with a table long enough to scroll.
- If customers cannot see the differences toggle, enable Show "Highlight differences" toggle.
- Save your changes and preview the section on both desktop and mobile.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Header in Maison
How to Set Up Product Comparison in Maison