{"section":"tutorials","requestedLocale":"es","requestedSlug":"como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda","locale":"es","slug":"como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda","path":"docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda.md","branch":"main","content":"> ⚠️ **Atención:** existen dos formas de configurar colecciones, mediante el CMS o utilizando el módulo Colecciones Beta. Este artículo se refiere a [la configuración de colecciones mediante el CMS](/es/docs/tutorials/registrar-una-coleccion-cms).\n\nLas vitrinas se usan en el destaque de productos en diversas páginas. Se pueden usar también para recomendaciones, en la página del producto.\n\nPrimero, antes de definir una vitrina, se debe crear una colección (ver instrucciones [aquí](/es/tutorial/criando-colecao-de-produtos)) con los productos que se exhibirán en ella. Es necesario también que las páginas estén debidamente estructuradas, con los debidos controles insertados en sus templates.\n\nRealizadas las debidas definiciones, se hace el vínculo de la colección con la vitrina en **Storefront > Layout**.\n\nEn el ejemplo abajo, vamos a definir la vitrina presentada en la Home. Por lo tanto, seleccione **Settings**, luego **add object**, como en la siguiente imagen.\n\n![coleção2](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_1.png)\n\nEste comando abrirá **Visual Controls**, que corresponden al escaparate en el que desea mostrar la colección. Agregue una _Collection_, pero asegúrese de establecer un nombre para ella.\n\n![coleção3](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_2.png) \n\n![coleção4](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_3.png)\n\nAcuérdese de grabar las configuraciones para que sea posible editar el control creado!\n\n![coleção5](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_4.png)\n\n![coleção6](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_5.png)\n\nAl editar el control es necesario agregar sus contenidos, que representan cada conjunto de ítems que se exhibirán.\nSon ellos:\n_Layout_: seleccione la plantilla de estante utilizada en la muestra.\n_Number of Columns, Number of Items, Show Unavailable_ y _Ramdom ad Paged_: Defina el diseño, la cantidad y los criterios para mostrar los elementos.\n\n![coleção7](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_6.png)\n\nRecuerde guardar antes de buscar o cambiar páginas.\nEl siguiente paso es agregar el contenido seleccionando **Add Content**.\n![coleção8](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_7.png)\n\nEs posible definir cada contenido usando colecciones o resultados de búsqueda, usando parámetros de búsqueda (más detalles [aquí](/es/docs/tutorials/como-funciona-la-busqueda-de-vtex)).\n\nLos contenidos que deben cumplimentarse **Content** son:\n_Content_: nombre que identificará cada conjunto de elementos\n_QueryString_: los parámetros ingresados en este campo definen el resultado de la búsqueda que se mostrará en este contenido.\n\nEn el campo **Product Cluster (Collection)**, debe seleccionar la colección que se mostrará completando el siguiente paso:\n\n![coleção10](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_8.png)\n\nLos contenidos a rellenar en la parte **Condición de visualización**:\n_Partner, Campaign_ y _Source_: definen la visualización de este contenido si el visitante tiene un UTM correspondiente en su URL de origen.\n_Keywords_: vincula la visualización del contenido a una búsqueda de términos específicos.\n_Category_ y _Brand_: vincula la visualización del contenido en una página de Categoría y/o Marca(s) específica(s).\n_Peridos_: define el período en el que el contenido estará activo.\n\nDespués de la configuración, marque **Active Content** y agregue a la lista de contenido, guardando todas las configuraciones más adelante.\n\nEn el ejemplo abajo tenemos una vitrina estándar, sin condiciones de exhibición y otra exclusiva para las visitas originadas de las audiencias de campañas patrocinadas de Google (utm_source=**google**/utm_medium=**cpc**):\n\n![coleção9](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_9.png)![](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/como-incluir-una-coleccion-de-productos-en-la-vitrina-de-la-tienda_10.png)\n\nEn el escenario arriba, si el cliente tiene origen en la audiencia de campaña patrocinada se exhibirán en la vitrina **Lançamentos**, ubicada en la Home, los productos que corresponden al resultado de una búsqueda por la Marca de ID 200000, en caso contrario, se exhibirán los productos de la colección de ID 8.\n\nSiempre que se use más de un contenido activo en el mismo control, se deben ordenar (haciendo clic y arrastrando sus contenidos) de forma tal que el contenido sin condiciones de exhibición siempre quede en la última posición, como arriba."}