Compare products

Compare Products generates a detailed, side-by-side comparison of two or more products. Depending on the theme, the Add to Compare link might be represented by an icon or text. The Compare Products block usually appears in either the left or right sidebar of a catalog page.

w-700 modal-image
Example storefront - comparison list

Unlike the Recently Viewed / Compared Productsblock, the Admin does not include additional configuration settings for Compare Products.

Compare products on the storefront

There are a few ways to use comparison list on the storefront.

From catalog pages

  1. The customer finds the products that they want to compare and clicks the Add to Compare link for each.

  2. Navigates to an associated category page.

    Depending on the theme and page layout, there might be a Compare Products block in the sidebar. If so, the items in the category that are marked for comparison are listed.

    The customer can click Delete ( Delete icon ) for any product to remove it from the comparison report, or click Clear All to remove all items and start over with your compare selections.

  3. Clicks Compare.

  4. To print the comparison information, clicks Print This Page.

  5. To remove a single product from the comparison page, clicks Delete ( Delete icon ).

From a notification message

  1. After a customer adds a product to a comparison list, the page displays a notification message.

  2. In the displayed top message notification, click the comparison list link.

    img-md
    w-700 modal-image
    Compare Products Notification

This action redirects the customer to the comparison list where they can access additional actions.

From the Compare Products block

  1. The customer finds the products that they want to compare and clicks the Add to Compare link for each.

  2. In the header near the search field, clicks the Compare Products link.

    img-md
    w-700 modal-image
    Compare Products Header

From the My Account dashboard

  1. The customer adds needed products to the comparison list.

  2. Navigates to My Account.

  3. In the Compare Products block, clicks Compare.

    img-md
    w-700 modal-image
    Compare Products block in customer account dashboard

Additional comparison list actions

Action
Description
Delete icon
Deletes a single item from comparison list.
Add to Cart
Adds product into shopping cart. If the product has any configurations, the page redirects the customer to the product page where they select the configurable options and then click Add to Cart.
Wishlist icon
Adds product into wishlist (requires wishlist functionality enabled in store configuration).
Print This Page
Prints comparison list page.
recommendation-more-help
dacea746-44a9-4368-b3fb-3bcff64c6be1