Menu
Feedback
Comece aqui
Tutoriales
Portal del desarrollador

Problemas Conocidos
Directrices de Soporte
Troubleshooting

Preguntas Frecuentes
Anuncios
Tutoriales
Tutoriales
Explore tutoriales detallados para operar su tienda VTEX.
Tutoriales
Storefront
Layout
Incluir una colección de productos en la vitrina de la tienda
Incluir una colección de productos en la vitrina de la tienda

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.

Las 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.

Primero, antes de definir una vitrina, se debe crear una colección (ver instrucciones aquí) 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.

Realizadas las debidas definiciones, se hace el vínculo de la colección con la vitrina en Storefront > Layout.

En 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.

{"base64":"  ","img":{"width":1465,"height":587,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":23638,"url":"https://raw.githubusercontent.com/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"}}

Este 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.

{"base64":"  ","img":{"width":748,"height":432,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":16283,"url":"https://raw.githubusercontent.com/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"}}

{"base64":"  ","img":{"width":577,"height":184,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":5327,"url":"https://raw.githubusercontent.com/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"}}

Acuérdese de grabar las configuraciones para que sea posible editar el control creado!

{"base64":"  ","img":{"width":467,"height":363,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":7350,"url":"https://raw.githubusercontent.com/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"}}

{"base64":"  ","img":{"width":1448,"height":315,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":13876,"url":"https://raw.githubusercontent.com/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"}}

Al editar el control es necesario agregar sus contenidos, que representan cada conjunto de ítems que se exhibirán. Son ellos: Layout: seleccione la plantilla de estante utilizada en la muestra. 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.

{"base64":"  ","img":{"width":1502,"height":546,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":22520,"url":"https://raw.githubusercontent.com/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"}}

Recuerde guardar antes de buscar o cambiar páginas. El siguiente paso es agregar el contenido seleccionando Add Content.

{"base64":"  ","img":{"width":1254,"height":876,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":26454,"url":"https://raw.githubusercontent.com/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"}}

Es posible definir cada contenido usando colecciones o resultados de búsqueda, usando parámetros de búsqueda (más detalles aquí)

Los contenidos que deben cumplimentarse Content son: Content: nombre que identificará cada conjunto de elementos QueryString: los parámetros ingresados en este campo definen el resultado de la búsqueda que se mostrará en este contenido.

En el campo Product Cluster (Collection), debe seleccionar la colección que se mostrará completando el siguiente paso:

{"base64":"  ","img":{"width":912,"height":56,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2611,"url":"https://raw.githubusercontent.com/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"}}

Los contenidos a rellenar en la parte Condición de visualización: Partner, Campaign y Source: definen la visualización de este contenido si el visitante tiene un UTM correspondiente en su URL de origen. Keywords: vincula la visualización del contenido a una búsqueda de términos específicos. Category y Brand: vincula la visualización del contenido en una página de Categoría y/o Marca(s) específica(s). Peridos: define el período en el que el contenido estará activo.

Después de la configuración, marque Active Content y agregue a la lista de contenido, guardando todas las configuraciones más adelante.

En 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):

{"base64":"  ","img":{"width":1501,"height":615,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":27852,"url":"//images.ctfassets.net/alneenqid6w5/5IoPfaWgUwUsGUuCAmYS6q/ded32f70db90ffb4f3fffd740b35381b/cole____o9.png"}}
{"base64":"  ","img":{"width":560,"height":269,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":85638,"url":"https://raw.githubusercontent.com/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"}}

En 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.

Siempre 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.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
¿Te ha parecido útil?
No
Sugerir cambios (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page
¿Todavía tienes dudas?
Pregunte a la comunidad
Encuentra solucciones y comparte ideas en la comunidad de VTEX.
Únete a nuestra comunidad
Solicite soporte a VTEX
Para asistencia personalizada, contacte a nuestros expertos.
Abra un ticket de soporte
GithubDeveloper portalCommunityFeedback