This tutorial is only applicable to Legacy CMS Portal stores.

Product Comparison is a native VTEX feature that allows you to view the details and specifications of selected products side by side. This makes it easy to compare items and quickly identify differences between their specifications.

The configuration process involves two steps:

• Comparison page: Where you can view a side-by-side comparison of products selected from the product listing page.
• Product listing page: Where you can select products to compare.

Product comparison doesn't work on the store homepage.

Follow the steps below to configure the product comparison in your store.

1. Create a shelf template to standardize product display on the comparison page. In this template, you can use any of the available controls for shelves.
2. Create a page template using the <vtex.cmc:ProductComparison/> control, which displays products side by side on the comparison page. Example usage of the control:

where ShelfLayoutId is the Id of the shelf template created in the previous step.

3. Create a folder for the comparison page:

• In the Admin, go to Storefront > Layout

• In the column next to it, click CMS > Sites and channels > {website name} > / > New folder. Replace {website name} based on your scenario.

• In the Folder Name field, enter a name for the folder and click OK.

• Click Save Folder.

  

4. Create a default layout:

• Open the folder created in the previous step.

• Click New layout.

• In the Template field, link the page template created in step 2 to the folder. Learn more in Associating a template with a layout.

• Click Save Layout and then click OK.

  

To display products with the comparison option (checkbox), add the $product.Compare control to the shelf templates where you want to include this feature. This control will render a checkbox to select products for comparison. Additionally, the control will provide a Compare link in the header and footer of the product listing. You can click this link to be redirected to the comparison page.

You can only compare 4 products at a time.