The Product comparison table section in Maison lets you select products in the theme editor and display their information side by side in a structured comparison table.
Unlike Product comparison, where customers build their own comparison list while browsing, the Product comparison table is configured by the merchant directly inside the page section.
The table displays up to 3 products at a time. If you select more than 3 products, customers can use product selectors above the table to choose which products they want to compare in the three visible columns.
Section overview
The Product comparison table includes:
- A configurable product list
- Up to 3 visible product columns at a time
- Product selectors when more than 3 products are selected
- Product image and title in the table header
- Optional product price in the table header
- Sticky product information
- First available variant selection
- A customer-facing Highlight differences toggle
- Product actions at the bottom of the table
- Group headings for organizing comparison rows
- Custom comparison row labels
- Product metafield support
- Custom colors, section width, divider, and spacing
The section supports these block types:
- Group
- Price
- Rating
- Inventory status
- SKU code
- Product type
- Vendor
- Categories
- Weight
- Variant option
- Summary
- Description
- Metafield
STEPS:
Add the Product comparison table section
Open the Maison theme editor and add the section to the page where you want customers to compare products.
- Open the Maison theme editor.
- Open the page template where you want to add the comparison table.
- Click Add section.
- Select Product comparison table.
- Move the section to the desired position.
- Click Save when finished.
The section preset includes several comparison rows that you can add, remove, or reorder as needed.
Select products to compare
Use the Products setting to choose the products available in the comparison table.
| Setting | Description |
|---|---|
| Products | Selects the products available for comparison in this section. |
Maison displays up to 3 products at a time.
If you select 1 to 3 products, those products are displayed directly in the visible comparison columns.
If you select more than 3 products, Maison displays three product selectors above the table. Customers can use these selectors to choose which products appear in the three visible comparison columns.
When a customer selects a product that is already visible in another column, Maison swaps the products instead of displaying the same product twice.
Configure the main table settings
The Product comparison table includes several settings that control the comparison experience.
| 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 the product header at the top of each column. |
| Select the first available variant | Uses the first available variant for multi-variant products and enables direct Add to cart behavior. |
| Show "Highlight differences" toggle | Displays a customer-facing switch that highlights rows containing different values. |
Understand the product header
Each visible product column includes product information at the top of the table.
The product header can display:
- Featured product image
- Product title
- First available variant title
- Product price
The first available variant title is displayed when:
- Select the first available variant is enabled, and
- The product has more than the default variant.
The price is displayed when Show price is enabled.
The product image and title link to the product detail page.
Enable sticky product info
Enable Enable sticky product info when you want product information to remain visible while customers scroll through a long table.
When the comparison table moves far enough up the page, Maison creates a sticky copy of the product header.
The sticky header follows the table's horizontal scroll position so the visible product columns remain aligned.
Highlight differences
Enable Show "Highlight differences" toggle to let customers focus on rows where the visible products have different values.
When the customer enables the toggle, Maison compares the text content of the three currently visible product cells.
Rows whose values are different are visually highlighted.
If the customer changes one of the visible products using a product selector, Maison recalculates the differences for the new product combination.
Add Group blocks
Use Group blocks to organize comparison rows into categories.
Configure:
| Setting | Description |
|---|---|
| Heading | Sets the group heading displayed above the following comparison rows. |
For example, you can organize the table into groups such as:
- Pricing
- Specifications
- Materials
- Availability
- Product details
To add a group:
- Open the Product comparison table section.
- Click Add block.
- Select Group.
- Enter the group heading.
- Drag the Group block above the rows it should organize.
- Click Save.
Add the Price block
The Price block displays the product price as a comparison row.
It also displays the compare-at price when applicable.
| Setting | Description |
|---|---|
| Custom label | Replaces the default Price row label. Leave blank to use the theme default. |
Add the Rating block
The Rating block displays product rating information.
| Setting | Description |
|---|---|
| Custom label | Replaces the default Rating row label. |
The block uses SHOPLINE product review rating data.
If rating data is unavailable, Maison displays the corresponding fallback state.
Configure Inventory status
The Inventory status block displays product availability.
Available settings include:
| Setting | Description |
|---|---|
| Custom label | Replaces the default Availability row label. |
| Low inventory threshold | Sets the inventory quantity at which stock is considered low. |
| Show inventory quantity | Shows the inventory quantity when available. |
The Low inventory threshold supports values from 0 to 100 and defaults to 20.
Maison can display states such as:
- In stock
- Low stock
- Out of stock
- Continue selling when out of stock
When Select the first available variant is enabled for a multi-variant product, the Inventory status block uses that first available variant for its inventory information.
For a single-variant product, Maison uses that product's variant directly.
Add SKU code
The SKU code block displays the SKU for products with a single variant.
| Setting | Description |
|---|---|
| Custom label | Replaces the default SKU row label. |
If a product has multiple variants, Maison does not select a variant for this row and the cell is displayed as unavailable.
Add Product type, Vendor, and Categories
Use these blocks to compare product classification information.
| Block | Description |
|---|---|
| Product type | Displays the product type configured for each product. |
| Vendor | Displays the product vendor or brand. |
| Categories | Displays the collections associated with the product. |
Each of these blocks includes a Custom label setting.
If the corresponding product information is empty, Maison displays an unavailable value for that cell.
Add Weight
The Weight block displays a product's variant weight.
| Setting | Description |
|---|---|
| Custom label | Replaces the default Weight row label. |
Weight is displayed only when:
- The product has a single variant, and
- That variant contains a non-zero weight value.
The value is displayed together with its configured weight unit.
Compare Variant options
Use the Variant option block to compare available product option values such as Color, Size, Material, or Style.
Available settings include:
| Setting | Description |
|---|---|
| Custom label | Sets the customer-facing comparison row label. |
| Option name | Specifies the product option Maison should display. |
| Display style | Controls how option values are displayed. |
Available Display style options are:
- Plain
- Buttons
For example, to compare colors:
- Add a Variant option block.
- Enter
Colorin Option name. - Choose Plain or Buttons.
- Click Save.
With Plain, Maison displays the available option values as text.
With Buttons, each option value is displayed separately. For color-related options, Maison can display option images or swatches when available.
Configure Summary and Description
The Summary and Description blocks display product text content.
Each block includes:
| Setting | Description |
|---|---|
| Custom label | Replaces the default row label. |
| Maximum rows | Controls how many lines of content are displayed. |
Available Maximum rows options include:
- Show all
- Show up to 1 row
- Show up to 2 rows
- Show up to 3 rows
- Show up to 4 rows
The Summary block uses the product subtitle/summary content.
The Description block uses the product description.
Compare product Metafields
Use Metafield blocks to compare custom product information that is not covered by the built-in blocks.
Available settings include:
| Setting | Description |
|---|---|
| Metafield label | Sets the row label displayed in the comparison table. |
| Metafield namespace and key | Specifies which product metafield Maison should display. |
Enter the metafield using the namespace.key format.
For example:
custom.material
You can add multiple Metafield blocks to compare specifications such as:
- Material
- Dimensions
- Capacity
- Warranty
- Features
- Technical specifications
Boolean metafields are converted to true or false, which Maison renders as check and cross icons in the comparison cells.
If the metafield does not contain a value, Maison displays an unavailable value.
Understand check and cross icons
Maison automatically converts comparison cell values of:
true
into a check-circle icon, and:
false
into a cross-circle icon.
This behavior is especially useful with Boolean product metafields.
Configure product actions
Maison automatically displays a product action at the bottom of each visible column.
When the product is available and Select the first available variant is enabled:
- Maison adds the first available variant directly to the cart.
- An Add to cart button is displayed.
- A View product detail link is also displayed.
When Select the first available variant is disabled:
- Maison displays a View product detail button instead.
When the product is unavailable:
- Maison displays a disabled Sold out button.
Configure the section heading
Use the heading settings to add introductory content above the comparison table.
| Setting | Description |
|---|---|
| Heading | Adds the main section heading. |
| Heading size | Controls the heading size. |
| Heading tag | Sets the HTML tag used for the heading. |
| Description | Adds supporting text below the heading. |
Available heading tags include:
- H1
- H2
- H3
- H4
- H5
- H6
- div
- span
- p
Configure colors and spacing
Enable Custom colors to override the global theme colors for this section.
Available color settings include:
| Setting | Description |
|---|---|
| Text color | Controls the section text color. |
| Background color | Controls the 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 button backgrounds. |
Section settings also include:
| Setting | Description |
|---|---|
| Section width | Controls the width of the section container. |
| Show section divider | Adds a section divider. |
| Spacing | Controls desktop and mobile section spacing. |
Available Section width options are:
- Narrow
- Page
- Wide
- Full
Product comparison table vs. other comparison features
Maison includes three different comparison experiences:
| Feature | How it works |
|---|---|
| Comparison table | Uses manually configured Titles and Values columns. |
| Product comparison | Customers build their own comparison list and view it in an Overlay modal. |
| Product comparison table | The merchant selects a product list and Maison automatically reads product information into configurable comparison rows. |
Use Product comparison table when you want an on-page comparison section whose data comes directly from selected products.
Troubleshooting
If the Product comparison table does not display as expected, check the following:
- Make sure products are selected in Products.
- If more than 3 products are selected, use the product selectors to test different product combinations.
- Remember that only 3 products are visible at one time.
- If a row is missing, make sure its corresponding block has been added.
- If a row label is incorrect, update its Custom label.
- If a Variant option is empty, confirm that Option name matches the product option name.
- If SKU or Weight is unavailable, check whether the product has more than one variant.
- If Inventory information is unexpected for a multi-variant product, check Select the first available variant.
- If a Metafield is unavailable, confirm that the namespace and key are correct and that each product contains the metafield value.
- If Rating does not appear, confirm that product review rating data is available.
- If the same price appears twice, check whether both Show price and the Price block are enabled.
- If the sticky header does not appear, enable Enable sticky product info and test a table long enough to require scrolling.
- If the Highlight differences control does not appear, 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 Product Comparison in Maison
Comparison of Maison Product Comparison Features