Product Comparison Widget

• Overview
• Step 1: Enable Product Comparisons
• Step 2: Add Comparison Bucket Widget
• Step 3: Add Merge Codes to Category HTML
• Editing the Comparison Bucket
• Adding Fields

Overview

The Product Comparison feature allows customers to add multiple products to a "comparison bucket" on the category page. The products in the bucket are displayed together in a grid for easy comparison. 

Step 1: Enable Product Comparisons

To enable product comparisons, navigate to Settings > Catalog > General and check Enable Product Comparison:

Step 2: Add Comparison Bucket Widget

The Comparison Buck Widget can be added to the left column, right column, or category page. To do so, navigate to Themes > Edit Theme > Category > Widgets, then click Add Widget. In the widget list, click Add under Comparison Bucket: 

Step 3: Add Merge Code to Category Page

After adding in the widget, ensure that the compare merge codes are in your category HTML. To do so, navigate to Themes > Edit Theme > Pages > Category > HTML Editor. Scroll down until you see the <ac:layoutarea id="ProductList"> tag. The $$ADDTOCOMPARELINK$$ merge code can be added anywhere inside that layoutarea; however its recommended to add it after the product name merge code: 

<ac:layoutarea id="ProductList">
    ...
    <div class="no-m-b"><a class="h5 color-inherit" href="##ITEMURL##">##PRODUCTNAME##</a></div>
    $$ADDTOCOMPARELINK$$
    ...
</ac:layoutarea>

Editing the Comparison Bucket

There is a theme level Product Compare page, that can be used for making any changes to the product comparison page. Navigate to Themes > Edit Theme > Pages > Product Compare > HTML Editor to edit its HTML. 

Adding Fields

The default fields to compare are:

•  Image
•  Item Name
•  Item Number
•  Rating
•  Description
•  Manufacturer
•  Availability
•  Retail Price
•  Price
•  All attributes from products being compared
•  Variants (kind of, they aren’t really “compared”, just visible above the add to cart buttons.)

Add up to 5 custom items in addition to these (any product entity merge codes can be added to a compare layout)