Product Comparison Widget




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>


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)



Have more questions? Submit a request


  • Avatar
    Ricardo Gomez

    The help file is missing how to add the custom fields to the comparison page, here is how to do it:

            <th>Your Custom Header</th>
            <ac:layoutarea id="Custom1">

    Where the "layoutarea id" can be 1-5