Product Comparison Widget

Follow

 

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)

 

 

Have more questions? Submit a request

Comments

  • Avatar
    Ricardo Gomez

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

    <tr>
            <th>Your Custom Header</th>
            <ac:layoutarea id="Custom1">
              <td>##PRODUCTCUSTOMFIELD[YOURID]##</td>
            </ac:layoutarea>
          </tr>

    Where the "layoutarea id" can be 1-5