Galería de videos

La sección Carrusel de videos comprables reúne tarjetas verticales con portada, nombre y precio del producto. Al abrir una tarjeta, el visitante puede mirar el video, elegir variantes y cantidad y añadir al carrito. El vínculo de producto es opcional para videos externos, lo que también permite una galería editorial.

Configurar en el nuevo editor (Brand Editor)

1. Abre el inicio o un modelo de página de producto y selecciona Añadir sección → Carrusel de videos comprables.
2. Añade bloques de título y texto según sea necesario. Configura colores de fondo/texto, cantidad visible en computadoras y espaciado vertical. Elige alineación izquierda o centrada (centrada solo si hay espacio libre, conservando el desplazamiento). Arrastra la sección a la posición deseada.
3. En cada Video con producto, indica el ID del producto para asociar un artículo del catálogo. Copia solo el número de la dirección de edición del producto en el administrador. Nombre, precio, disponibilidad y variantes se consultan en el catálogo; no hay que registrarlos de nuevo.
4. Elige origen: Video nativo del producto usa el primer video cargado en sus medios; Video externo permite un enlace de YouTube o Vimeo exclusivo de la tarjeta. El campo de enlace solo aparece con ese origen.
5. Opcionalmente selecciona una Imagen de portada. Sin ella, el tema usa la miniatura del video o imagen del producto.
6. Reordena los bloques para definir la secuencia. La sección admite hasta 12 tarjetas. Guarda y revisa la vista previa.

El selector de grupos de productos no ofrece selección individual en esta versión; por eso el vínculo usa el ID. Sigue estable si cambia el nombre o la posición del producto en el catálogo. El texto sigue el tratamiento de idiomas del nuevo editor.

El preset comienza con tres bloques vacíos. Las tarjetas sin video compatible muestran una instrucción en el editor y se ocultan en la tienda. Una sección sin tarjetas válidas también se oculta.

Reproducción y compra

La galería muestra una tarjeta por producto, en orden de primera aparición. Los bloques con el mismo ID forman una secuencia de stories; videos nativos y externos pueden formar el mismo grupo. El primer bloque define portada, título y configuración de compra. Con “Agrupar videos del mismo producto” activo, se eliminan duplicados de videos idénticos del mismo producto. Desactívalo para mostrar cada bloque como tarjeta independiente. Los videos externos sin producto siguen independientes.

En celulares, desliza horizontalmente; en computadoras, usa también las flechas. El reproductor conserva el producto elegido: solo flechas, teclas izquierda/derecha o gesto horizontal cambian de producto. Las barras aparecen solo cuando hay varios stories y permiten elegir uno. Los videos nativos y YouTube avanzan automáticamente solo dentro del grupo. El último mantiene el producto abierto; “Repetir videos al terminar” reinicia la secuencia del mismo producto. Abrir la compra interrumpe el avance automático hasta elegir otro producto, incluso al contraer el formulario. Vimeo conserva controles del proveedor; el tema sigue progreso, reanudación y final de cada story desde el reproductor. No se interceptan gestos sobre iframes externos. La selección de variantes sigue asociada al producto mientras la página esté abierta.

Las vistas previas de tarjetas visibles pueden reproducirse sin sonido, con carga bajo demanda. Desactiva “Reproducir vistas previas sin sonido” para mostrar solo portadas. Abrir un reproductor suspende las vistas previas. El video nativo comienza sin sonido cuando el navegador lo permite; YouTube también por defecto. El movimiento reducido desactiva el inicio automático. Cerrar o cambiar el video termina el reproductor anterior. Nativos y YouTube retoman la posición al volver mientras la página siga abierta; los finalizados reinician. La elección explícita de sonido se conserva durante la página abierta y se comparte con el modal flotante; su vista previa sigue silenciosa. Escape cierra el modal y devuelve el foco a la tarjeta.

La ficha compacta se superpone en la base del video. Tócala para abrir o contraer variantes y cantidad con transición corta, respetando movimiento reducido. Usan componentes de compra rápida; abrir opciones pausa el video nativo. La compra usa el carrito del tema. Las combinaciones sin stock bloquean el botón y la navegación se bloquea durante una adición. La plataforma valida de nuevo precio y stock al comprar.

Kits y suscripciones dirigen a la página completa. Para productos que requieren campos personalizados o aplicaciones en la página de producto, desactiva Permitir compra en el video: el video sigue disponible con Ver detalles del producto. El tema no puede identificar automáticamente todos los requisitos de aplicaciones externas.

En la página de producto, el carrusel puede coexistir con el video comprable flotante. Abrir el carrusel oculta y pausa el flotante. Sus variantes no cambian la selección del producto principal.

Límites de esta versión

• Hasta un producto opcional por video. “Shop the look” no está incluido.
• La carga nativa se realiza en los medios del producto, no en el bloque del carrusel. No hay selector del segundo video nativo por tarjeta.
• Los enlaces externos son YouTube/Vimeo; no se admiten URL MP4 directa, TikTok ni Instagram.
• YouTube usa controls=0 y rel=0, pero no se pueden eliminar por completo título, marca, anuncios y recomendaciones.
• Los videos externos deben permitir incorporación. El proveedor define restricciones, anuncios, cookies y mensajes.
• Los fallos del reproductor nativo permiten reintentar; los externos también muestran mensajes del proveedor. El enlace a la página de producto sigue disponible.
• No se sincroniza el progreso de reproducción entre carrusel, galería y flotante.

Controles de reproducción

En video nativo, haz clic o toca la imagen para pausar y reanudar. El ícono central aparece al pausar y el volumen sigue en un botón separado. El control de imagen también admite teclado. YouTube usa sus propios controles sin duplicación del tema.

Opciones de la galería

“Nombre del video (opcional)” identifica el video para accesibilidad; no reemplaza el nombre del producto. Si no se completa, se usa el nombre del producto.

“Navegación circular” funciona con al menos cuatro tarjetas mostradas y contenido suficiente para desplazarse: la flecha vuelve del final al inicio y viceversa. No duplica formularios ni crea un bucle continuo con clones. Se eliminó el contador numérico del reproductor; el progreso solo aparece en grupos con varios stories.

El preset “Videos destacados” ofrece fondo claro, texto oscuro y cuatro bloques. El oscuro sigue disponible. Ambos conservan configuraciones de módulos ya añadidos. El contenido usa grupos, títulos y textos nativos del editor, como las listas de productos.

Mostrar numeración de videos controla los números de las tarjetas y está activo por defecto. Se eliminó el ícono decorativo de reproducción; hacer clic sigue abriendo el reproductor.

Control de vistas previas y proveedores

Cada tarjeta tiene Reproducir/Pausar arriba a la derecha, con fondo translúcido y círculo de 36px (área de interacción de 44px). Controla solo la vista previa sin abrir el reproductor de compra. El resto abre el reproductor. La pausa individual permanece al navegar; mientras siga cargado, retoma el mismo punto. Al salir del área visible, se descarga: la pausa permanece, pero una reproducción posterior puede reiniciar. Se eliminó “Pausar vistas previas” colectivo. Con movimiento reducido o autoplay desactivado, el visitante todavía puede iniciar cada vista previa con su botón.

Vimeo también integra progreso, reanudación y pausa al abrir opciones de compra. Los videos externos mantienen sus propios controles; siguen las restricciones de privacidad e incorporación.

Videos destacados hereda colores de la tienda cuando los locales están vacíos. El preset oscuro conserva colores explícitos. No se reemplaza la configuración guardada.

Navegación y acceso a la compra

La galería usa el Swiper del tema para arrastre y transiciones de 300ms. Si caben todas las tarjetas, se ocultan flechas y se conserva la alineación. Con cuatro o más y espacio para desplazarse, las flechas de navegación circular vuelven al extremo opuesto sin clones. La navegación manual mantiene animación incluso con movimiento reducido, aunque esta preferencia impide el inicio automático de videos. Cada tarjeta mantiene su número según el orden configurado después del agrupamiento.

El resumen ofrece la acción terciaria Elegir opciones para productos con variantes, o Comprar sin variantes. La confirmación sigue en el formulario. Los talles tienen etiquetas centradas y área mínima de 44px de altura; los controles superiores usan fondo oscuro para ser legibles sobre videos claros.

Ancho y tarjetas en celulares

En Diseño, elige ancho Página (predeterminado) o Completo. Con ancho completo, el espacio horizontal es configurable. Videos visibles en celulares admite 1, 1,5 (predeterminado) o 2; controla cuántos aparecen, sin limitar el total registrado. Videos visibles en computadoras permite de 2 a 6, con predeterminado 4. Si hay menos videos, las tarjetas conservan el tamaño de la cantidad elegida y alineación, sin duplicar contenido. Con dos tarjetas, el resumen es compacto y omite el ícono de bolsa para conservar el precio.

En computadoras con mouse, reproducir/pausar aparece con hover o foco del teclado. Pausado permanece visible. En dispositivos sin hover, permanece visible.

Organización de configuraciones

• Contenido: añade bloques nativos de título, texto o grupo antes/después de videos.
• Disposición: alineación, cantidad visible en computadoras/celulares, agrupación por producto, numeración y navegación circular.
• Propiedades del video: reproducción de vistas previas y repetición en el reproductor.
• Diseño: ancho de sección y espacios vertical/horizontal.
• Colores: fondo y texto.

La reorganización conserva IDs, valores predeterminados y configuración guardada.

La antigua configuración de ancho en píxeles ya no se usa. No se eliminan los valores guardados, pero la galería usa cuatro columnas hasta elegir una cantidad.

Contenido y flechas

Título y descripción son bloques nativos con tipografía y alineación propias. La galería aparece en la posición del primer video; los demás forman la misma franja. Ubica títulos, textos o grupos antes del primer video o después de los videos. Los presets incluyen título editable. Los antiguos campos fijos de título, texto auxiliar y color de acento ya no se usan; no se eliminan los valores guardados.

Las flechas usan el componente compartido de listas de productos, en los laterales, con tamaño, color, ícono y visibilidad definidos por el tema.

Ejemplos en el editor

En el ejemplo se muestran cinco videos en computadora. Selecciona Galería de videos para ajustar presentación y cada bloque Video para configurar medios y producto asociado.

Usa Celular arriba del editor para revisar el resultado. 1,5 videos muestra una tarjeta completa y parte de la siguiente; no limita el total. Capturas del 6 de octubre de 2026, con contenido de demostración y configuración personalizada.

Idioma de las capturas

Las capturas muestran el editor y la tienda de ejemplo en portugués. Los nombres de este texto son descripciones traducidas; las etiquetas de la plataforma pueden variar según el idioma.