Agregar imágenes en una tienda online es fundamental para atraer y retener la atención de los visitantes. Estos elementos visuales no solo mejoran la apariencia de la tienda en línea, sino que también pueden aumentar la interacción del usuario y las conversiones al presentar información importante de manera atractiva y accesible.
Tabla de contenidos

Crea un carrusel (imagen + texto)

Un carrusel es una sección dinámica en la que puedes cargar imágenes y resaltar información relevante añadiendo un botón que redireccione a los clientes a diferentes partes de la tienda.

Las medidas recomendadas para las imágenes del carrusel son de 1600 x 400 a 600 píxeles de alto para la versión de escritorio y de 400 x 500 píxeles para la versión móvil.

Cada carrusel está compuesto por imágenes llamadas sliders, que pueden permanecer fijas mientras el cliente desliza hacia los lados o tener un autoplay para moverse automáticamente.

Dentro de esta sección, puedes agregar un texto de bajada, título, subtítulo y un botón de llamada a la acción en cada imagen del slider. Esto permite que el cliente pueda hacer clic en el botón y ser redirigido a una parte específica de la tienda relacionada con la información destacada en la imagen.

Para agregar un Carrusel (imágen + texto) realiza los siguientes pasos:

Paso 1.  Desde el menú lateral ingresa a Tienda online > Personalizar diseño.

Paso 2. Presiona la opción + Añadir sección.

Paso 3. Selecciona la opción  Carrusel (imagen + texto) yPresiona el botón +Añadir

Paso 4. Ingresa la sección recién creada. La misma se compone de dos partes, Contenido y Configuraciones.

Contenido:

Paso 5. Presiona  + Añadir slide, y haz clic en Ítem.

Paso 6. Presiona en +Imagen y  selecciona desde el banco de imágenes o carga una desde tu ordenador. 

Paso 7. Personaliza el contenido aplicando un estilo, y activa el botón mostrar contenido paraasignar descripción, título, subtítulo y botón.

Repite los pasos para cada uno de los sliders, pueden agregarse hasta 6.

Configuraciones: 

Paso 8. Presiona la opción Comportamiento para asignar altura, autoplay y duración de los ítems.  

Paso 9. Presiona la opción Indicador para establecer los colores del punto que indica en slide.

Paso 10. Presiona la opción Sección para configurar reglas de posicionamiento como el ancho, distancia con otras secciones, color de fondo y visibilidad en dispositivos. 

Paso 11. Presiona Guardar y luego el botón Publicar que se encuentran en la parte superior a la derecha.

Crea un carrusel (imagen)

Un carrusel es una sección dinámica en la que puedes cargar imágenes y resaltar información relevante añadiendo un botón que redireccione a los clientes a diferentes partes de la tienda.

Las medidas recomendadas para las imágenes del carrusel son de 1600 x 400 a 600 píxeles de alto para la versión de escritorio y de 400 x 500 píxeles para la versión móvil.

Cada carrusel está compuesto por imágenes llamadas sliders, que pueden permanecer fijas mientras el cliente desliza hacia los lados o tener un autoplay para moverse automáticamente.

Para agregar un Carrusel (imágen) realiza los siguientes pasos:

Paso 1.  Desde el menú lateral ingresa a Tienda online > Personalizar diseño.

Paso 2. Presiona la opción + Añadir sección.

Paso 3. Selecciona la opción  Carrusel (imagen) yPresiona el botón +Añadir

Paso 4. Ingresa la sección recién creada. La misma se compone de dos partes, Contenido y Configuraciones.

Contenido:

Paso 5. Presiona  + Añadir slide, y haz clic en Ítem.

Paso 6. Presiona en +Imagen y  selecciona desde el banco de imágenes o carga una desde tu ordenador. 

Paso 7. Asigna un color de fondo y el link donde dirige el slider.

Repite los pasos para cada uno de los sliders, pueden agregarse hasta 6.

Configuraciones: 

Paso 8. Presiona la opción Comportamiento para asignar altura, autoplay y duración de los ítems.  

Paso 9. Presiona la opción Estilo para establecer el redondeo de los bordes.

Paso 10. Presiona la opción Sección para configurar reglas de posicionamiento como el ancho, distancia con otras secciones, color de fondo y visibilidad en dispositivos. 

Paso 11. Presiona Guardar y luego el botón Publicar que se encuentran en la parte superior a la derecha.

Que es un lotti file y su formato

Un Lottie es un formato de archivo de animación que combina elementos vectoriales y de animación. Los archivos Lottie se basan en el estándar de animación JSON (JavaScript Object Notation) y utilizan la biblioteca Lottie para interpretar y renderizar las animaciones. Estas animaciones pueden ser creadas en software de diseño gráfico o de animación, y luego exportadas en formato JSON compatible con Lottie, o incluso existen plataformas que ofrecen estas animaciones de manera gratuita,  y con la posibilidad de personalizarlo como por ejemplo https://lottiefiles.com/La principal ventaja de utilizar animaciones Lottie es su capacidad para mantener una alta calidad visual sin aumentar significativamente el tamaño del archivo. Esto los hace ideales para agregar interactividad y dinamismo a las interfaces de usuario y experiencias de usuario.

Hero bar

Un Hero bar es un elemento de diseño utilizado en una página web, para captar la atención de los visitantes de manera efectiva. Colocado en la parte superior de la página, el herobar ocupa un espacio amplio y destacado.

Ofrece la posibilidad de incluir una imagen o un lotti file, acompañado de un título, un subtítulo que complementa la información, dos botones o llamados a la acción que invitan a interactuar, y un texto adicional que proporciona información adicional o destacada.

El objetivo principal del hero bar es llamar la atención de los visitantes de manera inmediata y transmitir el mensaje clave de la página. Al combinar elementos visuales atractivos con contenido relevante, el hero bar se convierte en una herramienta efectiva para generar interés y motivar a los usuarios a explorar más en la página web.

Para agregar un Hero bar, realiza los siguientes pasos

Paso 1.  Desde el menú lateral ingresa a Tienda online > Personalizar diseño.

Paso 2. Presiona el botón personalizar sobre el tema a editar.

Paso 3. Presiona la opción + Añadir sección.

Paso 4. Selecciona la opción Hero y Presiona el botón + Añadir

Paso 5. Ingresa la sección recién creada, y agrega una imagen presionando  +Imagen. 

Paso 6. Opcional: es posible incorporar un lotti file en lugar de una imagen, ingresando en la opción Lotti file y pegando el link Json.

Paso 7. Configura la alineación de la imagen 

Paso 8. Agrega un título, subtítulo, botones y texto adicional si se desea. 

Paso 9. Presiona la opción Sección para configurar reglas de posicionamiento como el ancho, distancia con otras secciones, color de fondo y visibilidad en dispositivos. 

Paso 10. Presiona Guardar y luego el botón Publicar que se encuentran en la parte superior a la derecha.

Imagen

La sección de Imagen en una tienda online es un elemento que permite mostrar una imagen destacada o relevante en la página que al hacer clic lleva a una sección específica de la tienda o incluso a enlaces externos. Se puede utilizar para resaltar productos, promociones, eventos, o cualquier otro contenido visualmente atractivo que se desea destacar.

Para agregar una imagen, realiza los siguientes pasos.

Paso 1.  Desde el menú lateral ingresa a Tienda online > Personalizar diseño.

Paso 2. Presiona el botón personalizar sobre el tema a editar.

Paso 3. Presiona la opción + Añadir sección.

Paso 4. Selecciona la opción Imagen y Presiona el botón + Añadir

Paso 5. Presiona el botón + Imagen y selecciona o carga la imagen a mostrar.

Paso 6. Configura las dimensiones de la imagen e incorpora el link donde redirige.

Paso 7. Presiona la opción Sección para configurar reglas de posicionamiento como el ancho, distancia con otras secciones, color de fondo y visibilidad en dispositivos. 

Paso 8. Presiona Guardar y luego el botón Publicar que se encuentran en la parte superior a la derecha.