Showcase

Un Showcase es una sección de diseño dividido pensada para presentar productos de una manera más refinada y editorial. En lugar de mostrar productos en una cuadrícula tradicional, divide la pantalla en dos áreas diferenciadas: un lado dedicado al contenido (Media) — como un título, subtítulo, descripción e imagen o contenido multimedia — y el otro a una selección curada de productos que los usuarios pueden explorar a través de un carrusel.

Otra característica clave de este componente es que puedes elegir la posición de ambas columnas disponibles en él, simplemente arrastrándolas y soltándolas, lo que te permite crear composiciones atractivas si por ejemplo optas por añadir varios componentes uno después del otro.

Este diseño es ideal para destacar una colección específica, una campaña de temporada o un grupo de productos destacados que merecen mayor presencia visual. La combinación de imágenes, texto y navegación de productos crea una experiencia más inmersiva, animando a los clientes a interactuar con lo que estás mostrando en lugar de simplemente recorrer una lista.

Funciona de manera muy similar al componente Product collection, ya que ambos comparten varias opciones y configuraciones. La diferencia clave radica en cómo se estructura y presenta el contenido: en lugar de apilar todo verticalmente, el Showcase coloca tu mensaje y tus productos uno al lado del otro, dándole a cada uno el espacio y la atención que merece.

---

Configuración del componente

Al hacer clic en el nombre del componente encontrarás el mismo conjunto de opciones generales que en el componente Product collection:

• Colección
• Límite
• Ancho
• Visualización
• Configuración del carrusel
• Opciones de encabezado
• Apariencia
• Animaciones

Además de las opciones de la lista anterior, este componente incluye dos adicionales, que se explican a continuación:

Espacio izquierdo y derecho

Permite añadir o eliminar el espacio izquierdo y derecho entre la sección y los bordes del navegador.

Esquinas redondeadas

Permite definir si las esquinas de la sección serán redondeadas y el tamaño de las mismas.

Esta opción solo será visible y estará disponible si la opción Esquinas redondeadas está habilitada en el panel Configuración del tema del Editor Visual.

---

Columna de Media

El bloque Media es uno de los subcomponentes utilizados para mostrar el contenido de la colección — como el título, descripción, enlace/botón —, así como el tipo de contenido multimedia que deseas usar, que funcionará como fondo decorativo para la columna.

Tipo

Aquí puedes elegir qué tipo de elemento multimedia deseas usar como fondo de la columna de Media. Dependiendo de cuál selecciones, las opciones estarán disponibles para que puedas personalizarlas.

Imagen

Encontrarás dos opciones para subir imágenes para dispositivos de escritorio y móviles.

Si solo subes la primera y no usas la de dispositivos móviles, se utilizará para todos los dispositivos.

Al usar esta opción, otras también estarán disponibles para personalizar aún más:

• Recortar automáticamente: permite adaptar automáticamente las imágenes que subas a las dimensiones ideales definidas en el código del tema.
• Transición: permite definir una transición que se aplicará a la imagen de fondo cuando los usuarios pasen el cursor dentro del área de la columna.

Insertar video

Aquí puedes copiar y pegar el código de inserción que plataformas como YouTube y Vimeo proporcionan para compartir, comúnmente conocido como iframe.

URL de video

Esta opción te permite copiar y pegar URLs de plataformas como las mencionadas anteriormente, así como videos alojados en fuentes externas como un sitio web o CDN.

Al elegir esta opción, las siguientes estarán disponibles para personalizar cómo se comportará el video:

• Controles: si los controles del video deben mostrarse.
• Reproducción automática: si el video debe comenzar a reproducirse automáticamente.
• Sin sonido: si el video debe iniciarse sin audio.
• Bucle: si el video debe reproducirse en bucle.

Visualización

Esta opción permite definir cómo el elemento multimedia se adaptará al espacio disponible dentro de la columna, y solo está disponible para Imagen y URL de video.

Al elegir Cubrir, llenará toda el área con la mayor parte del elemento multimedia. Es muy probable que algunos lados del elemento multimedia no sean visibles si por ejemplo:

• El elemento multimedia tiene una dimensión horizontal y el Ratio es cuadrado, por lo tanto, los lados izquierdo y derecho no serán visibles.
• El elemento multimedia tiene una dimensión vertical y el Ratio es horizontal, por lo tanto, los lados superior e inferior no serán visibles.

Al usar esta opción, encontrarás opciones para escritorio y móvil para elegir la posición vertical y horizontal del elemento multimedia, dándote mayor control sobre cómo se muestra dentro del espacio.

Para el caso de Contener, el elemento multimedia se adaptará tanto vertical como horizontalmente y será visible en su totalidad.

Ratio

Encontrarás dos opciones para definir la dimensión de la columna Media en dispositivos de escritorio y móviles. La altura de esta columna afectará la altura de todo el componente y, por lo tanto, definirá la altura de la columna donde se muestran los productos.

Si la altura de la columna Media es menor que la de los productos, esa columna tomará precedencia y definirá la altura de todo el componente.

Opciones de contenido

Este grupo de opciones te permite personalizar el aspecto de los bloques de contenido, como título, subtítulo, texto, etc.

Superposición

Permite definir la opacidad o transparencia de este elemento, que se posiciona entre el elemento multimedia (ej. imagen) y el contenido (ej. título), para crear contraste y mejorar la legibilidad de estos últimos.

Colores del contenido

Permite elegir el Paquete de colores para la columna Media, que afectará a todos los elementos dentro de ella.

Alineación y posición

Encontrarás opciones para dispositivos de escritorio y móviles para controlar la alineación horizontal del contenido, así como la posición vertical, siempre de acuerdo con el ancho y el alto de la columna.

---

Bloques de Media

Nos referiremos como bloques a los subcomponentes que pueden añadirse dentro de la columna Media.

Puedes encontrar detalles sobre qué son, cómo funcionan y qué puedes lograr con ellos en este artículo.

---

Productos

El subcomponente Productos es sencillo en sus configuraciones, ofreciendo solo una opción para definir el Paquete de colores para la columna en la que se mostrarán los productos.

Sin embargo, hay algunas consideraciones sobre el componente Showcase que debes tener en cuenta al usarlo:

• Los productos siempre se mostrarán dentro de un Carrusel y las opciones para controlar su comportamiento se pueden encontrar dentro de la Configuración del componente.
• Siempre se mostrará un producto a la vez, principalmente para preservar el diseño dado el espacio disponible dentro de la columna. Esto también significa que el carrusel estará centrado tanto vertical como horizontalmente dentro de ella.