{"section":"tutorials","requestedLocale":"pt","requestedSlug":"configurando-a-comparacao-de-produtos","locale":"pt","slug":"configurando-a-comparacao-de-produtos","path":"docs/pt/tutorials/catálogo/produtos-e-skus/configurando-a-comparacao-de-produtos.md","branch":"main","content":"> ⚠️ Tutorial válido apenas para lojas CMS Portal (Legado).\n\nA comparação de produtos é um recurso nativo da VTEX que permite exibir, lado a lado, detalhes e especificações de produtos previamente selecionados, possibilitando que o usuário compare os produtos da loja de forma simples e visualize facilmente as diferenças entre suas especificações.\n\nA configuração deve ser realizada em dois momentos:\n\n- [**Página de comparação**](#pagina-de-comparacao): onde o usuário visualizará a comparação dos produtos selecionados na vitrine.\n- [**Vitrine**](#vitrine): onde o usuário selecionará os produtos a serem comparados.\n\n> ⚠️ A comparação de produtos não funciona na página inicial da loja.\n\n## Instruções\n\nSiga os passos a seguir para configurar a comparação de produtos em sua loja.\n\n### Página de comparação\n\n1. [Crie um template de prateleira](/pt/docs/tutorials/como-criar-um-template-de-prateleira) para padronizar a exibição dos produtos na página de comparação. Nesse template, você pode utilizar qualquer um dos [controles disponíveis para prateleiras](https://developers.vtex.com/docs/guides/shelf-template-controls).\n2. [Crie um template de página](/pt/docs/tutorials/como-criar-um-template-de-pagina) utilizando o controle `<vtex.cmc:ProductComparison/>`, que é o responsável pela exibição dos produtos, lado a lado na página de comparação. Exemplo de uso do controle:  \n\n```\n<vtex.cmc:ProductComparison ShelfLayoutId=\"12343216-4c8e-4cd5-bcd7-e3b062681f2a\"/>\n```\n\nonde `ShelfLayoutId` é `Id` do template de prateleira criado na etapa anterior.\n\n3. Crie uma pasta para a página de comparação:\n  - No Admin VTEX, acesse **Storefront > Layout**\n  - Na coluna ao lado, clique em `CMS > Sites and channels > {nome do website} > / > New folder`. Substituia `{nome do website}` de acordo com seu cenário.\n  - No campo `Folder Name`, atribua um nome para a pasta e clique em `OK`.\n  - Clique em `Save Folder`.\n\n       ![new-folder-pt](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/catálogo/produtos-e-skus/configurando-a-comparacao-de-produtos_1.gif)\n\n4. Crie um layout padrão:\n  - Abra a pasta criada no item anterior.\n  - Clique em **new layout**.\n  - No campo `Template`, vincule o template de página criado no passo 2 à pasta. Saiba mais em [Associando um template a um layout](/pt/docs/tutorials/associando-um-template-a-um-layout).\n  - Clique em `Save Layout` e, em seguida, em `OK`.\n\n       ![new-layout-pt](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/catálogo/produtos-e-skus/configurando-a-comparacao-de-produtos_2.gif)\n\n### Vitrine\n\nPara que os produtos sejam exibidos com a opção de comparação (checkbox), atribua o controle `$product.Compare` nos templates de prateleira que você deseja incluir esse recurso. Esse controle renderizará um checkbox para que o usuário possa escolher os produtos para comparar. Além disso, o controle disponibilizará no header e no footer da listagem de produtos o link **Comparar**, que será utilizado pelo usuário após a seleção e o redirecionará para a página de comparação.\n\n> ⚠️ Só é possível realizar a comparação de 4 produtos por vez."}