Product Compare

Author: Charlotte Tran 2857 views

The Product Compare extension has finally come in the form of an extension in EComposer. Elevate your shopping experience by effortlessly comparing products side by side, right at your fingertips. No more toggling between multiple tabs or losing track of essential details. It will show a compare icon on your product single and collection pages.

Note: You can use this extension on EComposer Pro and Premium plans. Upgrade now to unlock

1. How to Install the Extension

Step 1: From your EComposer dashboard, go to CRO Extensions from the left sidebar menu.
Step 2: Search for the Product Compare extension.
Step 3: Click Details and install the extension on your store.

2. Config extension settings

In addition to the Element settings, we also offer Extension settings for further customisation. For example, under the General section, you can choose whether to display the Product description, Availability, Vendor, and Weight when comparing items in the popup.

You can also design the popup using the Compare Popup Style settings. This will allow you to customise the popup’s Background, Striped background, Borders, and font styles via Typography for the content included inside the popup.

3. How to use extension

3.1. How to add the Product Compare extension in the template

Inside the EComposer editor, open the Extensions tab from the left sidebar, then find the Product Compare extension from the installed extensions list and drag it into your desired position on the Product template.

Normally, you should add it to the Product detail section. After adding it successfully, you can start customizing the extension settings and style.

Content: allows you to control the appearance and text of the comparison button that customers use to add items to their comparison list. You can customise the button content, as well as the Normal (Before Clicking) & Added to Compare (After Clicking)
- Label: It will let you enter the text for the button—for example, setting it to “Compare” before clicking and “Compared” after clicking.
- Icon: You choose the icon to use. This visual cue lets mobile or fast-scrolling shoppers immediately see which items are selected.
- Tooltip: Displays a helpful hint like “Add this item to your comparison list”.

Design: Settings provide various options for customising the appearance of the button, icon, and tooltip. These design settings are organised into the following settings:
- Button: You can style the Compare button exactly how you’d like—including changing the Icon’s color, size, and alignment. Following that, we can customise the Typography for the Compare text. Furthermore, we can adjust the Width and Height for the normal, hover, and active states of the button.
- Tooltips: It is an overlay text that appears when you hover over the button. Based on the tooltip design, it allows you to customise it just like the button—including Font styles, as well as the Width and Height for both normal and hover states.

3.2. How to add the Product Compare extension in the Collection template

The Collection product, Product Grid, and Related Product elements support the Compare icon through the option named: Shop Compare Button. To use this feature, please enable the option by checking it and ensuring it is turned on.