¿Cómo agregar un rotador de productos con imagen?

Un rotador de destacados es una herramienta que funciona similar al rotador de productos pero con una imagen que da inicio al mismo.

Puede ser útil para promocionar ofertas especiales o productos nuevos.

En general, un rotador de productos puede ser una forma efectiva de mejorar la presentación de los productos en nuestra tienda en línea y promover la venta.🤩📈

Funciona como un carrusel, donde van rotando los productos con una imagen relacionada a la izquierda o a la derecha y ocupando un 75%, un 50% o un 25% de la seccion,

Paso a paso👣 para agregar la sección “Destacados”

1. Dentro del Diseñador vamos a hacer clic en «Botón turquesa (+)

2. Ahora se abrirá una ventana con todas las secciones que podemos agregar, lo siguiente es seleccionar la sección Destacados

Luego de haber cliqueado🖱️ se mostrará la sección de productos destacados como viene estilada por defecto, como se ve en la preview.

‼️A continuación te detallamos algunos ejemplos. Agregarlas como están estiladas, te va a permitir ahorrarte tiempo, ya que van a encontrarse pre-configuradas. De todos modos, te indicamos acá mismo, como modificarla por completo.

Ejemplo Destacados#2 

Unicamente con texto

En la vista Mobile👇

Ejemplo Rotador – Oferta #2

Con el texto de portada a la derecha de la pantalla

Ejemplo Destacados#1 

Con la imagen a la izquierda de la pantalla ocupando el 25% de la sección

En la vista Mobile👇

Ejemplo Rotador – Destacado #2

Con la imagen a la derecha de la pantalla ocupando el 25% de la sección

Ejemplo Rotador – Destacado #3

Con la imagen a la derecha de la pantalla ocupando el 75% de la sección

Ahora, vamos a avanzar con la edición de la sección

3. Lo siguiente es editarlo, vamos a pasar el cursor por encima de la sección y vamos a ver todas estas opciones🖱️

4. Haciendo clic sobre cualquiera de los recuadros, se nos abrirá una ventana con las ediciones que podemos realizar!

Seleccionando sobre las opciones de la derecha de la pantalla (Flecha roja) vamos a poder mover la sección hacia arriba o hacia abajo, Configurar la disposición de la sección, agregarle un fondo a la seccion, Acceder a la configuración o eliminarla.

Haciendo clic sobre el icono del filtro (central), vamos a poder editar los productos que se muestran en ese rotador

Y Haciendo clic sobre el icono de imagen modificar la misma y sobre el icono del enlace, modificar el mismo.

¡No te preocupes que a continuación te explicamos que hacer en cada configuración!

📏 Disposición 

En 📏 Disposición  vamos a ver 3 pestañas: General, Relleno y Margen. Vamos a repasar cada una de ellas👇

General

Podremos elegir si queremos que el contenedor este limitado por el ancho de seccion o no limitar el ancho de sección y seleccionar la visibilidad (si queremos que la sección se muestre en Desktop y Mobile, Solo en Desktop o Solo en Mobile.

Relleno | Margen

En Relleno podremos ajustar los espacios visuales entre secciones, mientras que el margen, nos permitirá ajustar los espacios internos, entre el contenedor y los productos por ejemplo.

🖼️ Estilo de Fondo

 

Imagen

Podremos agregar una imagen y configurar su transparencia, repetición, sombreado, entre otros.

Textura

Podremos agregar una opción de textura entre las disponibles de nuestro banco.

Color

Podremos agregarle un color de fondo a la sección.

Estilo

Podremos agregarle un sombreado a los límites de la sección.

⚙️ Configuración

Vamos a ver 4 pestañas: Información, Rotación, Distribución y Contenedor. Vamos a repasar cada una de ellas👇

Información

Desde este apartado podremos elegir qué información queremos mostrar dentro de los productos:

• Informacion sobre los productos: Solo Mostrar el nombre, Mostrar nombre, categoría y marca, Mostrar nombre y categoría o Mostrar nombre  y marca.
• Precios: Actual y anterior, Solo el precio actual o No mostrar precio
• Etiquetas: Si mostrarlas o no

Rotación

Desde este apartado podremos elegir qué comportamiento queremos que tengan los productos al rotar:

• Rotación automática de productos: Si queremos que los productos roten automáticamente o de forma manual
• Tiempo de rotación automática: Podes elegir la velocidad de rotación (de 1 a 8 segundos)
• Visibilidad en rotación: Si queres que roten de a uno o todos los visibles.

Distribución

Acá empieza la magia! Y es la pantalla que verás diferente en cada una de las secciones de Destacados presentadas. Las siguientes opciones corresponden a la sección Destacados

Desde acá vas a poder elegir y configurar:

• Textos/Imagenes: Si queres configurarle en vez de imagen, un título, subtítulo y boton.
• Cantidad de productos visibles por fila: Podes elegir en este caso (Destacados#2) de 2 a 4 productos
• Cantidad de filas de productos: Solo una fila de productos o 2
• Y mostrar o no la imagen de muestra.

 

En caso de seleccionar la sección Destacados#2 la pestaña de Distribución se mostrará con las siguientes opciones

Tipo de Contenido del panel : Aqui vas a poder elegir si queres que se muestre una imagen o un fondo de color degradé/Venta Flash (O cuenta regresiva)

Posición del panel: Aqui vas a poder elegir si queres que la imagen se ubique a la izquierda o a la derecha de la pantalla

Tamaño del panel: Desde aqui vas a poder seleccionar si queres que la imagen sea el 25% de la seccion, el 50% o el 75%

Productos visibles por fila: Desde aqui vas a poder seleccionar si queres que se muestren 2 o 3 productos por fila.

Cantidad de filas visibles: Desde aqui vas a poder seleccionar si queres que se muestren los productos en 1 o 2 filas de productos.

 

Contenedor

Te va a permitir modificar el color de fondo del contenedor de los productos y la imagen, que por defecto, en este caso, viene gris

En caso de seleccionar la sección Destacados#2 #3 o los rotadores de oferta la pestaña de Contenedor es reemplazada por Personalizar

• Allí podrás configurar:
• Sección: Color de fondo de la sección.
• Degradé: Si en lugar de una imagen decidís utilizar un degradé, desde aqui lo configuras.
• Visibilidad: Donde podes configurar si queres mostrar título, Subtitulo, Párrafo, Boton y cuenta regresiva.
• Elementos: Donde configuraras fecha y hora de la cuenta regresiva.

Filtros

Haciendo clic en este ícono podrás configurar los productos que queres que se muestren en el rotador.

• Productos destacados: Aquí podrás mostrar solo aquellos productos marcados como novedad y destacado, Solo los nuevos, Solo los destacados, Novedad o Destacado o simplemente no filtrar por productos seleccionados.
• Filtro: Podes elegir filtrar por Marca, Categoría y tags o bien, seleccionar productos específicos. En este ultimo caso, te va a aparecer esta otra pantalla para que elijas los productos que querés mostrar. (Un máximo de 25).

Haces clic en Seleccionar y podrás buscar los productos que quieras: Haciendo clic sobre cada uno, los vas seleccionando.

Los Filtros son combinables!

Ediciones de Imagen

Haciendo clic en estos iconos estaremos editando la imagen en particular de la sección y además podremos configurarle un link.

Es desde la opción #imagen donde  vas a poder cargarla y configurar el link al que redirigirá y el estilo y layout como en el resto de las secciones

‼️ Tamaños Sugeridos para este tipo de sección:

El tamaño sugerido para Destacados y Destacados#2 donde la imagen ocupa el 25% de la seccion es de 2200 px de ancho x 3500 px de alto 

El tamaño sugerido para cuando la imagen ocupa el 50% de la seccion es de 3500 px de ancho x 3500 px de alto 

El tamaño sugerido para cuando la imagen ocupa el 75% de la seccion es de 5690 px de ancho x 3250 px de alto 

Recordá también que la imagen solo se verá en Desktop. Si queres sumarle imagenes arriba o abajo de la seccion, podes configurar Destacados para que sea visible únicamente en Desktop y en Mobile utilizar otra sección o bien, sumarle una nueva que únicamente sea visible en Mobile.

Dentro del ícono de la imagen, además de tener el apartado para poder subirla,

Vamos a poder darle Estilo: Darle un sombreador a la imagen, un radio (bordes redondeados) Ajustar el color, el foco, la opacidad, la alineación y darle un alto máximo.

En el caso de la pestaña de Disposición vas a poder ajustar los márgenes.

Y por último, haciendo clic en el ícono del enlace, vas a poder configurar cualquiera de estas opciones de enlace

Cuando termines de realizar las ediciones recordá que podés salir del diseñador sin publicar los cambios o lo podes publicar inmediatamente en el portal público!

Fin del post!📃 Buen trabajo!👏