Centro de Atención Nube Configurá tu tienda Diseño Personalizar el diseño Página de Inicio Carrusel de imágenes

¿Cómo agregar un carrusel de imágenes en mi tienda?

Pasos para subir imágenes a tu slider o carrusel en el inicio de tu Tiendanube

Última actualización: 20/10/2023

El slider o carrusel de imágenes te permite comunicar a tus clientes información importante sobre tu negocio y le da la identidad de tu marca a tu Tiendanube. Generalmente, está formado por varias imágenes, texto y botones para incentivar a tus clientes a realizar una acción.

En este tutorial te contamos cómo usar el carrusel de imágenes de tu tienda, contándote:

  • Algunas recomendaciones
  • Cómo configurar el carrusel (subiendo y editando las imágenes)
  • Y qué hacer si la imagen aparece cortada en el celular
Carrusel de imágenes de ejemplo mostrando que tiene dos imágenes que cambian

Recomendaciones sobre el carrusel

Como el carrusel de imágenes es el primer contenido que se muestra en tu tienda, te recomendamos que comuniques en estas imágenes información muy relevante, como ventajas competitivas, promociones, productos exclusivos, o fechas especiales.

Es muy importante que no sobrecargues de contenido cada imagen, ya que los mensajes deben ser impactantes y tus clientes deben captarlos con un simple vistazo. Además, aunque podés cargar la cantidad de imágenes que quieras, recomendamos no agregar más de cinco.

También es fundamental que las imágenes del carrusel tengan un link. Si, por ejemplo, comunicás un descuento para ciertos productos, los usuarios van a querer hacer clic en la imagen para verlos rápidamente. 


Pasos de configuración

1. Subir imágenes para el carrusel

1.1. Ingresar a Mi Tiendanube > Diseño dentro del Administrador de tu tienda.


1.2. Hacer clic en "Personalizar el diseño actual".


1.3. Seleccionar la opción de "Página de inicio".

Barra lateral de Personalizar el diseño actual, con la opción "Página de inicio" resaltada


1.4. Hacer clic en "Carrusel de imágenes"

Opción Carrusel de imágenes resaltada en la barra lateral


1.5. Hacer clic en "Elegir imagen" y cargar una imagen desde tu computadora.

Botón para elegir la imagen a cargar, mostrando las medidas recomendadas
Delete

Success

Tené en cuenta las medidas recomendadas para las imágenes que agregues, ya que te van a ayudar a que se vean bien en tu tienda. Para conocer más, te recomendamos 📝 ¿Cuál es el tamaño recomendado del carrusel de imágenes de mi Tiendanube?.

Las plantillas Atlántico, Amazonas, Idea, Cubo y Bahía están desarrolladas especialmente para ajustarse a pantallas de celulares, por lo que el carrusel se adapta recortándolo, como indica el modelo que vas a ver en esa sección:

GIf mostrando cómo se recorta la imagen del carrusel en el celular vs. la computadora

Por eso te recomendamos leer también el tutorial:

📝 ¿Cómo usar el carrusel de imágenes para las plantillas Amazonas, Atlántico, Bahia, Cubo e Idea?

1.6. Algunas plantillas (Amazonas, Atlántico, Bahía, Idea, Trend, Simple, Rio, Lima, Cali, Uyuni, Toluca, Morelia y Recife) ofrecen la opción de agregar una imagen diferente para la versión móvil. Para usarla, marcar "Cargar otras imágenes para celulares" y elegir la imagen.

❗ Es muy recomendable usar esta opción, para obtener la mejor visualización del carrusel en diferentes dispositivos.

Casilla para Cargar otras imágenes para celulares marcada y resaltada. Botón para Elegir imagen y medidas recomendadas

Delete

Warning

Las medidas recomendadas de las imágenes para celulares son diferentes a las sugeridas para la versión desktop (de computadora).

1.7. Agregar las demás imágenes que quieras. Luego, vas a poder modificar el orden en el que se muestran en tu tienda, haciendo clic sobre la imagen y arrastrándola hasta la posición deseada.

GIF mostrando cómo se selecciona y arrastra una imagen para cambiar su orden

Info

Si necesitás eliminar alguna imagen de tu carrusel, podés hacer clic en el botón del tachito "🗑️".

1.8. Hacer clic en "Publicar cambios".

Delete

2. Editar las imágenes del carrusel

Después de cargar las imágenes del carrusel, vas a tener algunas opciones de edición, según la plantilla de diseño de tu tienda:

Simple, Material, Silent, Lifestyle, Trend, Focus

Para estos diseños, solo es posible agregar un link en cada imagen del carrusel, para redirigir a quién haga clic sobre ella a una página dentro o fuera de tu Tiendanube.


Para esto, hacer clic en el botón con el icono de link "🔗".

Icono de cadenas para agregar un link sobre la imagen resaltado


Copiar y pegar el link de la página a la que dirija al hacer clic sobre esa imagen.

Campo para link a la página a la que debe dirigir


Luego, hacer clic en "Publicar cambios".

Delete

Atlántico, Amazonas, Idea, Bahía, Cubo

Estas plantillas permiten agregar un título, descripción, botón y editar el color del texto, además del link para redirigir a otra página, ya sea de tu tienda o externa.


Que el carrusel tenga un texto editable tiene ventajas como:

  • El tamaño del texto se ajusta automáticamente a la pantalla del usuario

  • Podés agregar una imagen sin texto sin editarla externamente para agregar el texto

  • El texto editable es detectado e indexado por los buscadores, por lo que es una buena práctica de SEO

  • Podés modificar el texto rápidamente desde tu Administrador

Para agregarlo, hacer clic sobre el botón con la letra "T".

Icono de T para agregar texto sobre la imagen resaltado

Vas a ver los campos a completar:

  • Link al que querés que se dirija quien haga clic sobre el botón

  • Título, que puede ser una frase muy corta sobre lo que querés comunicar

  • Descripción, para dar más detalles e información al respecto

  • Botón, un texto corto, como "Comprar" "Ver más"

  • Color del texto, para que coincida con el de otros textos o el del fondo de tu tienda

Campos para completar la información mencionada arriba

Una vez completada la información, hacer clic en "Publicar cambios".

Delete


Delete

Info

Si querés saber cómo crear banners para tu carrusel de imágenes, te recomendamos ver 📝¿Cómo diseñar un banner para mi tienda usando Canva?.

Delete

¡Listo! 🙌

Ya se van a mostrar las imágenes que agregaste y editaste en el carrusel de imágenes de tu tienda. 

GIF mostrando un carrusel de ejemplo publicado


¿Qué hacer si la imagen aparece cortada?

Si las imágenes del carrusel se muestran cortadas, te sugerimos desmarcar la siguiente casilla, dentro de la sección de configuración del carrusel en tu administrador:

  • "Usar un alto máximo para las imágenes",
  • "Usar el mismo alto para todas las imágenes",
  • O "Extender el alto de la pantalla".

❗ El nombre de la casilla varía según el diseño que estés usando.

Se muestra cortada en el celular

Como mencionamos en los pasos de configuración, los banners del carrusel de imágenes se muestran en una escala reducida en los diseños Idea, Bahía, Cubo, Atlántico y Amazonas.

Por eso, si identificás que tu banner no aparece completo al verlo desde un celular y tu tienda tiene alguno de los diseños mencionados antes, te sugerimos ver este tutorial para crear un banner que se vea bien en todos los dispositivos: