{"section":"tutorials","requestedLocale":"en","requestedSlug":"setting-up-product-comparison","locale":"en","slug":"setting-up-product-comparison","path":"docs/en/tutorials/catalog/products-and-skus/setting-up-product-comparison.md","branch":"main","content":"> ⚠️ This tutorial is only applicable to Legacy CMS Portal stores.\n\nProduct 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.\n\nThe configuration process involves two steps:\n\n- [**Comparison page**](#comparison-page): Where you can view a side-by-side comparison of products selected from the product listing page.\n- [**Product listing page**](#product-listing-page): Where you can select products to compare.\n\n> ⚠️ Product comparison doesn't work on the store homepage.\n\n## Instructions\n\nFollow the steps below to configure the product comparison in your store.\n\n### Comparison page\n\n1. [Create a shelf template](/en/faq/como-criar-um-template-de-prateleira) to standardize product display on the comparison page. In this template, you can use any of the [available controls for shelves](https://developers.vtex.com/docs/guides/shelf-template-controls).\n2. [Create a page template](/en/faq/como-criar-um-template-de-pagina) using the `<vtex.cmc:ProductComparison/>` control, which displays products side by side on the comparison page. Example usage of the control:  \n\n```\n<vtex.cmc:ProductComparison ShelfLayoutId=\"12343216-4c8e-4cd5-bcd7-e3b062681f2a\"/>\n```\n\nwhere `ShelfLayoutId` is the `Id` of the shelf template created in the previous step.\n\n3. Create a folder for the comparison page:\n  - In the Admin, go to **Storefront > Layout**\n  - In the column next to it, click `CMS > Sites and channels > {website name} > / > New folder`. Replace `{website name}` based on your scenario.\n  - In the `Folder Name` field, enter a name for the folder and click `OK`.\n  - Click `Save Folder`.\n\n       ![new-folder-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/catalog/products-and-skus/setting-up-product-comparison_1.gif)\n\n4. Create a default layout:\n  - Open the folder created in the previous step.\n  - Click **New layout**.\n  - In the `Template` field, link the page template created in step 2 to the folder. Learn more in [Associating a template with a layout](/en/docs/tutorials/associating-a-template-with-a-layout).\n  - Click `Save Layout` and then click `OK`.\n\n       ![new-layout-en](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/catalog/products-and-skus/setting-up-product-comparison_2.gif)\n\n### Product listing page\n\nTo 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.\n\n> ⚠️ You can only compare 4 products at a time."}