Compare popup settings
This section configures the compare functionality for the product comparison modal and is not displayed on the page.
| Setting | Description |
| Enable product comparison | Enable this option to display the Compare button on the page. The button scrolls along with the page, and when clicked, it opens the comparison drawer. |
| Enable test mode | Enable this option to continuously display the compare drawer and compare popup in the theme editor, allowing you to preview changes while adjusting the settings. |
Drawer
When you click on compare button, you will see the empty drawer.


Adding products to the drawer for comparison
To add products to the compare drawer, go to a section or collection page with products, or a search results page. Make sure Show compare button is enabled in the section or page settings.

Then, click the Compare button below the products you want to add. You can add up to 4 products.
When a product is added, the Compare button becomes filled with a background. The selected products will then appear in the compare drawer.

| Setting | Description |
| Drawer color scheme |
Apply color scheme for the drawer from suggested color schemes list. Read 'Color scheme' article to learn more about color schemes. |
| Button style |
Choose the button’s appearance in compare drawer:
|
| Button icon |
This setting lets you add a small visual indicator to your button.
|
Popup
In the Compare drawer, click Compare products to open the compare popup.

| Setting | Description |
|---|---|
| Popup color scheme |
Apply color scheme for the popup from suggested color schemes list. Read 'Color scheme' article to learn more about color schemes. |
| Title style |
Choose the text style of the popup title: • Normal: Displays the title as entered, with no letter-case changes. • Uppercase: Displays the title in all capital letters. (Default) • Lowercase: Displays the title in all lowercase letters. |
| Button style |
Choose the button's appearance in the popup: • Primary: The main button style. It uses the primary color from your color scheme. You can choose to fill it with the background color or display it as an outline if the background is set to transparent. • Secondary: A secondary action style, using the secondary color from your color scheme. Like the primary button, it can be filled or outlined depending on the background settings. |
| Button icon |
This setting lets you add a small visual indicator to your button. • None: The button displays only the text, with no icon. • Dot: A small dot appears before the button label. |
Image block
| Setting | Description |
| Product image ratio |
Choose the aspect ratio for product images in the compare popup:
|
Product type block
No customizable settings available.
Title block
| Setting | Description |
| Heading size |
Choose the heading size for product titles in the compare popup:
|
Price block
No customizable settings available.
Vendor block
| Setting | Description |
| Row title |
1) Enter vendor name on every product detail page and customer will see it later through this pop-up. 2) Add the Vendor block under Compare section. 3) Enter the name in Row title field: you can enter Vendor or another custom name for this field. |
Variant option block
| Setting | Description |
| Row title |
Three variant option blocks can be added to the compare section.
|
| Option name |
Enter the same name of the variant that you assigned on the product detail page. For example, if you created a color variant with options, enter “Color” in this field to display the options in the popup. You can also use this field for other variant types, such as Size, Design, Weight, Height, and more. |
| Color swatch variant name |
Enter the variant name from the product detail page only if the variant is a color swatch. For example, if the variant represents Size, leave this field empty. |
Metafield block
| Setting | Description |
| Row title | Enter a metafield name in this field. |
| Custom content |
|
How to add metafields read more in this article https://docs.muup.co/article/4442-adding-metafields-and-metaobjects
Product SKU
| Setting | Description |
| Row title |
Enter the product SKU in the SKU field on each product detail page. If the product has no variants, add the SKU to the product itself. If the product has variants, add the SKU to the first variant so it will be visible in this popup. 2) Add the Product SKU block under Compare section. 3) Enter the name in Row title field: you can enter Product SKU or another custom name for this field. |
Product description
| Setting | Description |
| Row title |
1) Enter product description in the Product description rich text field on every product detail page, and customer will see it later through this pop-up. 2) Add the Product description block under Compare section. 3) Enter the name in Row title field: you can enter Product Description or another custom name for this field. |
Button
| Setting | Description |
| Button type |
|
| Button style |
Choose the button’s appearance:
|
| Button icon |
This setting lets you add a small visual indicator to your button.
|