{"section":"tutorials","requestedLocale":"es","requestedSlug":"configurando-a-comparacao-de-produtos","locale":"es","slug":"configurando-a-comparacao-de-produtos","path":"docs/es/tutorials/catalogo/productos-y-skus/configurando-a-comparacao-de-produtos.md","branch":"main","content":"> ⚠️ Este tutorial solo es válido para tiendas CMS Portal (Legado).\n\nLa comparación de productos es una función nativa de VTEX que permite mostrar en paralelo los detalles y especificaciones de productos previamente seleccionados, lo que permite al usuario comparar los productos de la tienda de forma sencilla y visualizar fácilmente las diferencias entre sus especificaciones.\n\nLa configuración debe realizarse en dos pasos:\n\n- [**Página de comparación**](#pagina-de-comparacion): lugar en que el usuario visualiza la comparación de los productos seleccionados en la vitrina.\n- [**Vitrina**](#vitrina): lugar en que el usuario selecciona los productos para comparar.\n\n> ⚠️ La comparación de productos no funciona en la página de inicio de la tienda.\n\n## Instrucciones\n\nSigue los pasos a continuación para configurar la comparación de productos en tu tienda.\n\n### Página de comparación\n\n1. [Crea una plantilla de estantería de productos](/es/faq/como-criar-um-template-de-prateleira) para estandarizar la visualización de productos en la página de comparación. En la plantilla, puedes utilizar cualquiera de los [controles disponibles para estanterías de productos](https://developers.vtex.com/docs/guides/shelf-template-controls).\n2. [Crea una plantilla de página](/es/faq/como-criar-um-template-de-pagina) utilizando el control `<vtex.cmc:ProductComparison/>`, que se utiliza para mostrar los productos en paralelo en la página de comparación. Ejemplo de uso del control:  \n\n```\n<vtex.cmc:ProductComparison ShelfLayoutId=\"12343216-4c8e-4cd5-bcd7-e3b062681f2a\"/>\n```\n\nDonde `ShelfLayoutId` es el`Id` de la plantilla de estantería de productos creada en el paso anterior.\n\n3. Crea una carpeta para la página de comparación:\n  - En el Admin VTEX, accede a **Storefront > Layout**\n  - En la columna de la izquierda, haz clic en `CMS > Sites and channels > {nombre del sitio web} > / > new folder`. Sustituye `{nombre del sitio web}` con el nombre que se aplique a tu caso.\n  - En el campo `Folder Name`, asigna un nombre a la carpeta y haz clic en `OK`.\n  - Haz clic en `Save Folder`.\n\n       ![new-folder-es](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/catalogo/productos-y-skus/configurando-a-comparacao-de-produtos_1.gif)\n\n4. Crea un layout predeterminado:\n  - Abre la carpeta creada en el paso anterior.\n  - Haz clic en **new layout**.\n  - En el campo `Template`, vincula la plantilla de página creada en el paso 2 a la carpeta. Más información en [Asociar un template con un layout](/es/docs/tutorials/asociar-un-template-con-un-layout).\n  - Haz clic en `Save Layout` y después en `OK`.\n\n       ![new-layout-es](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/catalogo/productos-y-skus/configurando-a-comparacao-de-produtos_2.gif)\n\n### Vitrina\n\nPara que los productos se muestren con la opción de comparación (casilla), asigna el control `$product.Compare`a las plantillas de estantería de productos que deseas incluir en este recurso. Este control mostrará una casilla para que el usuario pueda escoger los productos que desea comparar. Además, el control mostrará el link **Comparar** en el header y footer de la lista de productos. El usuario utilizará este link después de la selección y se le redirigirá a la página de comparación.\n\n> ⚠️ Solo se pueden comparar 4 productos a la vez."}