The Product comparison feature in Maison lets customers add products to a comparison list and review their details side by side in a comparison modal.
Unlike the Comparison table section, where products and values are configured directly in the theme editor, Product comparison is customer-driven. Customers choose which products they want to compare from product cards or product pages.
Section overview
Product comparison includes:
- A global setting to enable or disable the feature
- A comparison limit from 2 to 15 products
- Compare buttons on product cards
- A Compare button on product pages
- An optional Compare icon in the Header
- A comparison modal in the Overlay group
- Configurable comparison rows
- Custom row labels
- Variant option comparison
- Product metafield comparison
- Product ratings through the SHOPLINE Product Review app
- Product actions directly from the comparison modal
The Product comparison modal supports these block types:
- Featured image
- Title
- Price
- Rating
- Inventory status
- SKU code
- Product type
- Vendor
- Categories
- Weight
- Variant option
- Summary
- Description
- Metafield
STEPS:
Enable Product comparison
Product comparison must first be enabled in the theme settings.
- Open the Maison theme editor.
- Go to Theme settings.
- Select Product comparison.
- Enable Enable product comparison.
- Set Maximum products to compare.
- Click Save.
Available settings include:
| Setting | Description |
|---|---|
| Enable product comparison | Enables the Product comparison feature across the storefront. |
| Maximum products to compare | Sets the maximum number of products customers can add to their comparison list. |
The maximum can be set from 2 to 15 products. The default is 5 products.
If customers reach the configured limit, Maison displays a message telling them how many products can be compared at one time.
Configure the Product comparison modal
The comparison modal is configured through the Product comparison section in the Overlay group.
- Open the Maison theme editor.
- Expand the Overlay group.
- Select Product comparison.
- Review the blocks currently added to the section.
- Add, remove, or reorder blocks as needed.
- Click Save.
Each block becomes a row in the comparison modal.
The order of the blocks in the theme editor determines the order in which product information appears in the comparison table.
Choose the product information to compare
Maison supports the following Product comparison blocks:
| Block | Description |
|---|---|
| Featured image | Displays the product's featured image and provides a control for removing the product from the comparison list. |
| Title | Displays the product title with a link to the product page. |
| Price | Displays the current product price and compare-at price when applicable. |
| Rating | Displays the product rating from the SHOPLINE Product Review app. |
| Inventory status | Displays inventory information for eligible single-variant products. |
| SKU code | Displays the SKU for eligible single-variant products. |
| Product type | Displays the product type. |
| Vendor | Displays the product vendor or brand. |
| Categories | Displays the collections associated with the product. |
| Weight | Displays the weight for eligible single-variant products. |
| Variant option | Displays the available values for a specified product option. |
| Summary | Displays the product summary. |
| Description | Displays the product description. |
| Metafield | Displays a selected product metafield. |
Most standard blocks can be added once.
You can add multiple Variant option and Metafield blocks when you want to compare several options or custom product attributes.
If product information is unavailable, Maison displays a dash (-) for that value.
Customize comparison row labels
Most Product comparison blocks include a Custom label setting.
Use this field when you want to replace Maison's default row label.
For example:
| Default row | Custom label example |
|---|---|
| Vendor | Brand |
| Product type | Category |
| Price | Current price |
| Inventory status | Availability |
Leave Custom label blank to use the default theme label.
Configure the Summary and Description blocks
The Summary and Description blocks include Display options to control how much content appears.
Available options include:
- Show all
- Show up to 1 row
- Show up to 2 rows
- Show up to 3 rows
- Show up to 4 rows
Use a limited number of rows when you want to keep the comparison modal compact and easier to scan.
Compare Variant options
Use a Variant option block to display available values for a product option such as Color, Size, Material, or Style.
Available settings include:
| Setting | Description |
|---|---|
| Custom label | Sets the row label. Leave blank to use the option name or default label. |
| Option name | Specifies the product option Maison should display. |
| Display style | Controls how the option values are displayed. |
Available Display style options are:
- Plain
- Buttons
For example, to compare product colors:
- Add a Variant option block.
- Enter
Colorin Option name. - Select Plain or Buttons.
- Click Save.
With Plain, Maison displays the option values as text.
With Buttons, Maison displays each value separately. Color-related options can use product option images or color swatches when available.
Configure Inventory status
The Inventory status block displays stock information for eligible products.
Available settings include:
| Setting | Description |
|---|---|
| Custom label | Sets the row label. |
| Low inventory threshold | Determines when inventory is considered low. |
| Show inventory quantity | Displays the available inventory quantity when enabled. |
The Low inventory threshold can be set from 0 to 100. The default is 20.
Depending on the inventory level, Maison can display:
- In stock
- Low stock
- Out of stock
- Continue selling when out of stock
Add SKU code and Weight
The SKU code and Weight blocks display information from the product's variant.
Both are available only when the product has a single variant.
| Block | Behavior |
|---|---|
| SKU code | Displays the variant SKU when available. |
| Weight | Displays the variant weight and weight unit when available. |
If the product has multiple variants, or the required value is unavailable, Maison displays -.
Display Product type, Vendor, and Categories
Use these blocks to compare basic product classification information.
| Block | Description |
|---|---|
| Product type | Displays the product type configured in SHOPLINE. |
| Vendor | Displays the product vendor or brand. |
| Categories | Displays the collections associated with the product and links to those collections. |
If the relevant information is unavailable, Maison displays -.
Display product ratings
Add the Rating block when you want ratings to appear in Product comparison.
The Rating block uses the SHOPLINE Product Review app.
If the Product Review app is installed and the product has rating data, the rating can appear in the comparison modal.
If rating data is unavailable, Maison displays the fallback value.
Compare product Metafields
Use Metafield blocks to compare custom product information that is not covered by Maison's standard blocks.
Available settings include:
| Setting | Description |
|---|---|
| Metafield label | Sets the row label displayed in the comparison modal. |
| Metafield namespace and key | Specifies which product metafield Maison should display. |
Enter the metafield using this format:
namespace.key
For example:
custom.material
You can add multiple Metafield blocks for specifications such as:
- Material
- Dimensions
- Capacity
- Warranty
- Features
- Technical specifications
If the selected metafield has no value for a product, Maison displays -.
Show the Compare button on product pages
Maison can display a Compare button inside the product Buy buttons block.
- Open a product template in the Maison theme editor.
- Select the product information area.
- Open the Buy buttons block.
- Enable Show compare button.
- Click Save.
The button appears only when Enable product comparison is also enabled under Theme settings > Product comparison.
When customers select Compare, the product is added to their comparison list.
If that product has already been added, selecting the active Compare button opens the Product comparison modal.
Show Compare on product cards
Product cards can also include a Compare action.
In a section that contains Product cards:
- Open the Product card settings.
- Select the Buy buttons block.
- Enable Show compare.
- Click Save.
The Show compare setting also requires Product comparison to be enabled globally.
This allows customers to build a comparison list directly from product grids, collections, or other sections that use Maison Product cards.
Show the Compare icon in the Header
Maison can display a Compare icon in the Header.
- Open the Header section.
- Locate the Toolbar settings.
- Enable Show compare icon.
- Click Save.
This option requires Product comparison to be enabled under Theme settings > Product comparison.
When products have been added, the comparison count is displayed with the Compare entry.
The Compare entry is also available in the mobile Menu Drawer when this Header option is enabled.
Understand Product comparison actions
When customers open the Product comparison modal, each selected product appears in its own column.
The action displayed at the bottom depends on the product state:
| Product state | Action |
|---|---|
| Available product with one variant | Add to cart |
| Available product with multiple variants | Select options |
| Unavailable product | Sold out |
For a single-variant product, customers can add it directly to the cart.
For a multi-variant product, Select options takes customers to the product page so they can choose the required options.
Customers can also remove products from the comparison list using the remove control displayed with the Featured image block.
How Product comparison works
When customers add products to comparison:
- Maison stores the comparison list in the customer's browser.
- Compare controls update to show which products have already been added.
- The Compare count updates in available comparison entry points.
- Selecting an already-added product's Compare control opens the comparison modal.
- Customers can remove products from the comparison list.
- The Maximum products to compare setting controls the list limit.
Because the comparison list is stored in the browser, it can remain available as customers navigate between storefront pages.
Product comparison vs. Comparison table
Maison includes separate comparison features:
| Feature | Purpose |
|---|---|
| Product comparison | Customers choose products while browsing and compare them in an Overlay modal. |
| Comparison table | You manually configure selected products and comparison values inside a page section. |
| Product comparison table | Provides a separate on-page product comparison experience with its own section settings. |
Use Product comparison when you want customers to build their own comparison list while shopping.
Troubleshooting
If Product comparison does not work as expected, check the following:
- Make sure Enable product comparison is enabled under Theme settings > Product comparison.
- Confirm that Maximum products to compare is set to the desired value.
- Make sure the Product comparison section is enabled in the Overlay group.
- If the Compare button does not appear on product pages, enable Show compare button in the product Buy buttons block.
- If Compare does not appear on Product cards, enable Show compare in the Product card Buy buttons block.
- If the Header Compare icon does not appear, enable Show compare icon in the Header.
- If a comparison row is missing, confirm that the corresponding block has been added to the Product comparison section.
- If a Variant option row displays
-, check that Option name matches the product option name. - If Inventory status, SKU code, or Weight displays
-, remember that these blocks require an eligible single-variant product. - If a Metafield displays
-, confirm that its namespace and key are correct and that the product has a value for that metafield. - If Rating does not appear, confirm that the SHOPLINE Product Review app is installed and configured.
- If customers cannot add another product, check whether the configured comparison limit has already been reached.
- Save your changes and refresh the storefront after updating Product comparison settings.
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 Comparison Table Section in Maison
How to Set Up the Product Comparison Table Section in Maison