{"section":"tutorials","requestedLocale":"es","requestedSlug":"como-montar-un-kit-de-look","locale":"es","slug":"como-montar-un-kit-de-look","path":"docs/es/tutorials/catalogo/kit/como-montar-un-kit-de-look.md","branch":"main","content":"> ⚠️ Tutorial válido solo para tiendas CMS Portal (Legado).\n\nAprenda cómo configurar en VTEX un kit de look o Lookbook.\n\nAntes de hablar sobre el Kit de look es importante recordarle que debe crear un Kit. Para eso, acceda al artículo [Registrar kit](/es/tutorial/cadastrando-kit/).\n\nLa siguiente tabla presenta las características y contextos para el uso de kit o kit de look:\n\n| **Tipo** | **Definición** | **Ejemplo** |\n| :---: | :--- | :--- |\n| [Kit](/es/docs/tutorials/que-es-un-kit) | <ul><li>Los componentes forman un conjunto que no se puede dividir, de modo que el cliente no puede comprar los ítems por separado.</li><li>La tienda puede decidir si ofrece los componentes para compra individual o no.</li></ul> | Una tienda de moda masculina ofrece el kit \"Día del Padre\", compuesto por un par de zapatos, medias y un llavero. Al cliente no le interesa el llavero, pero le gustaron los zapatos y las medias, por lo que acepta llevarse el kit completo, ya que no es posible comprar ítems individuales. |\n| Kit de look | <ul><li>Los componentes funcionan como una sugerencia de compra conjunta, y el cliente puede elegir los ítems del kit de look que desea adquirir. Normalmente conocido como \"Shop the Look\".</li><li>La tienda ofrece todos los componentes para compra individual.</li></ul> | Una tienda de moda femenina ofrece la venta del kit de look \"Verano\", formado por un bikini, una salida de playa y unas sandalias. A la cliente no le gustaron las sandalias y compra solo el bikini y la salida de playa. |\n\n### ¿Qué es el Kit de look?\n\nEste término es muy conocido en el rubro de la Moda. Un Kit de look es un modo en el que se puede comprar varios productos visualizando solamente la pantalla de un solo producto.\n\n![](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/catalogo/kit/como-montar-un-kit-de-look_1.gif)\n\nEn el layout arriba se pueden seleccionar los ítems del kit de look que el cliente quisiera comprar y luego hacer clic en “Comprar Produtos Selecionados”.\n\nO si prefiere, puede comprar el kit de look completo manteniendo todos los ítems seleccionados.\n\n![](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/catalogo/kit/como-montar-un-kit-de-look_2.gif)\n\nEn este layout cada ítem tiene un botón de “Comprar Separadamente”.\n\nSi prefiere comprar el kit de look completo, sólo tiene que hacer clic en “Comprar Look”.\n\nAl hacer clic en comprar, independientemente del layout, todos los componentes del kit de look se agregarán al carrito automáticamente e individualmente, o sea, si el kit de look tiene 4 ítems, los 4 ítems serán agregados.\n\n### Implantación de las páginas de los kits\n\n```\n<div id=\"top-right\">\n                        <span id=\"selecione-kit\">SELECIONE AS PEÇAS DO LOOK</span>\n                        \n                        <div class=\"kit clearfix\">\n                            <div class=\"kit-info\">\n                                <div class=\"kit-image\">\n                                    <vtex.cmc:ProductImage productIndex=\"1\" />\n                                </div>\n                                <div class=\"tpl-right\">\n                                    <div class=\"nome-kit\"><h2><vtex.cmc:productName productIndex=\"1\" /></h2></div>\n                                    <div class=\"skuSelection\">\n                                        <vtex.cmc:skuSelection changeImage=\"1\" productIndex=\"1\" />\n                                    </div>\n                                    <div class=\"dv-buy-button clearfix\">\n                                        <vtex.cmc:BuyInPage productIndex=\"1\" />\n                                    </div>\n                                    <div class=\"preco-kit\">\n                                        <vtex.cmc:skuPrice productIndex=\"1\" />\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        \n                        \n                        <div class=\"kit clearfix\">\n                            <div class=\"kit-info\">\n                                <div class=\"kit-image\">\n                                    <vtex.cmc:ProductImage productIndex=\"2\" />\n                                </div>\n                                <div class=\"tpl-right\">\n                                    <div class=\"nome-kit\"><h2><vtex.cmc:productName productIndex=\"2\" /></h2></div>\n                                    <div class=\"skuSelection\">\n                                        <vtex.cmc:skuSelection changeImage=\"1\" productIndex=\"2\" />\n                                    </div>\n                                    <div class=\"dv-buy-button clearfix\">\n                                        <vtex.cmc:BuyInPage productIndex=\"2\" />\n                                    </div>\n                                    <div class=\"preco-kit\">\n                                        <vtex.cmc:skuPrice productIndex=\"2\" />\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        \n                        \n                        <div class=\"kit clearfix\">\n                            <div class=\"kit-info\">\n                                <div class=\"kit-image\">\n                                    <vtex.cmc:ProductImage productIndex=\"3\" />\n                                </div>\n                                <div class=\"tpl-right\">\n                                    <div class=\"nome-kit\"><h2><vtex.cmc:productName productIndex=\"3\" /></h2></div>\n                                    <div class=\"skuSelection\">\n                                        <vtex.cmc:skuSelection changeImage=\"1\" productIndex=\"3\" />\n                                    </div>\n                                    <div class=\"dv-buy-button clearfix\">\n                                        <vtex.cmc:BuyInPage productIndex=\"3\" />\n                                    </div>\n                                    <div class=\"preco-kit\">\n                                        <vtex.cmc:skuPrice productIndex=\"3\" />\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        \n</div>\n\n```\n\nEl control **_BuyInPage_**, descrito en el código arriba, sólo funcionará con la utilización del control **_AmountItemsInCart_** (en el propio template o en cualquier subtemplate relacionado).\n\nEntienda la relación entre esos controles en [Lista Completa de Controles](/es/tutorial/lista-de-controles-para-templates/).\n\n`changeImage=”1″`: indica cuál campo va a cambiar la imagen del sku al ser seleccionado.\n\nEste template se debe asociar a un nuevo Layout de Página de Produto que se aplicará sólo en la categoría en la que los Kits están registrados. Para no crear varios templates, simplemente inserte el mismo código con más frecuencia, cambiando el valor de _**productIndex**_.\n\n**Ejemplo 1:** Si tiene un producto kit con 3 componentes y otro producto kit con 5 componentes y desea usar esta funcionalidad del Kit Look para los dos productos kits, no es necesario crear un template para cada cantidad. Usted puede crear un template con 5 o grupos de controles de los componentes (**productIndex=numeroMaximo**). Entendiendo que _numeroMaximo_ es el valor del kit con mayor número de componentes.\n\n**Ejemplo 2:** Cuando se usa el **productIndex=0**, se exhibe la información del kit en sí. En la página del producto que tenga un kit con 2 componentes, mostrará sólo los 2 componentes. Si tiene un kit con 4 componentes, exhibirá los 4.\n\nResumiendo, la tienda puede crear un template con la cantidad de _product index_ que desee. En la página del producto sólo aparecerá la cantidad de componentes de cada kit."}