Artículos sobre: Personaliza tu tienda

Agregar un carrusel de imágenes

Agregar un carrusel de imágenes


En este artículo te mostraremos cómo agregar un carrusel de imágenes en el Widget de tu tienda.


Inserta un carrusel con imágenes en tu tienda para invitar a tus usuarios a suscribirse a tu contenido de una manera más atractiva, compartirles promociones, información o para llevarlos a donde pueden descargar tu aplicación para dispositivos móviles.


El espacio para agregar Widgets permite insertar código HTML. Puedes agregar un banner publicitario, texto, una imágen, un video, un link a algún sitio externo, publicidad, etc.


Te enseñaremos cómo añadir un Carrusel con imágenes como este:




📹 Ver video tutorial


Los pasos a seguir son dos:


1 - Insertar el código HTML.


2 - Agregar el código CSS para controlar su tamaño y posicionamiento.


En este artículo:


  1. Paso 1
  2. Paso 2
  3. Recomendaciones para las imágenes



Paso 1


Puedes crear tu propio código HTML o utilizar plantillas de Bootstrap.


Para agregar un banner como el del ejemplo que te mostramos más arriba, puedes utilizar el código HTML que te compartimos a continuación, cambiando los espacios de las url de cada imagen por las que tu quieras subir y que aparezcan en este carrusel:


<div class="container-fluid p-0">
    <div
        class="carousel-widget"
        data-flickity='{"autoPlay": 3500,"wrapAround": true,"contain": false,"imagesLoaded": true,"lazyLoad": 3,"prevNextButtons": false,"cellAlign": "center","adaptiveHeight": true}'
    >
        <div class="carousel-cell w-100 is-selected">
            <div class="w-100">
                <img
                  data-flickity-lazyload="image_url"
                    class="img-fluid"
                />
            </div>
        </div>
        <div class="carousel-cell w-100">
            <div class="w-100">
                <img
                  data-flickity-lazyload="image_url"
                    class="img-fluid"
                />
            </div>
        </div>
        <div class="carousel-cell w-100">
            <div class="w-100">
                <img
                  data-flickity-lazyload="image_url"
                    class="img-fluid"
                />
            </div>
        </div>
    </div>
</div>


Los campos en negrita "image_url" deben ser reemplazados por las URL donde se encuentran alojadas tus imágenes.


En el caso que no las tengas en ningún servicio de alojamiento, puedes utilizar Imgbb que es gratuito y sencillo de usar, o puedes buscar otros en tu motor de búsqueda favorito. Si utilizas esta herramienta, debes colocar la "URL a la imagen".


Una vez que tienes listo el código que deseas colocar, debes ingresar en Panel de Control → Ajustes → Widgets, pegarlo en el recuadro negro y dar clic en guardar.




Paso 2


Agrega los estilos CSS para que el banner quede bien configurado.


De acuerdo al plan que tengas contratado deberás ingresar el código CSS en diferentes lugares, pero no te preocupes que funciona en ambos de la misma manera.


Ambos se configuran desde Panel de control → Ajustes → Avanzados


  • En el caso que cuentes con el recuadro de CSS Personalizado deberás colocar en el mismo el siguiente código CSS:


.carousel-widget .flickity-slider .carousel-cell {
width: 100%;
text-align: center;
}
.carousel-widget .flickity-slider .carousel-cell img {
max-width: 100%;
}



  • Si no tienes el recuadro de CSS Personalizado, deberás agregar la etiqueta adicional y colocar el código CSS en Custom before code


<style> 

.carousel-widget .flickity-slider .carousel-cell {
width: 100%;
text-align: center;
}
.carousel-widget .flickity-slider .carousel-cell img {
max-width: 100%;
}

</style>



¡Listo! tu carrusel se encuentra configurado.


💡Si deseas agregar un link a las imágenes, para que al dar clic sobre ellas los usuarios accedan a una URL específica, puedes colocar la etiqueta envolviendo cada imagen. Por ejemplo:


<div class="container-fluid p-0">
    <div
        class="carousel-widget"
        data-flickity='{"autoPlay": 3500,"wrapAround": true,"contain": false,"imagesLoaded": true,"lazyLoad": 3,"prevNextButtons": false,"cellAlign": "center","adaptiveHeight": true}'
    >
        <div class="carousel-cell w-100 is-selected">
            <div class="w-100">
                <a href="url">
<img
                  data-flickity-lazyload="image_url"
                    class="img-fluid"
                />
</a>
            </div>
        </div>
        <div class="carousel-cell w-100">
            <div class="w-100">
                 <a href="url">
<img
                  data-flickity-lazyload="image_url"
                    class="img-fluid"
                />
</a>
            </div>
        </div>
        <div class="carousel-cell w-100">
            <div class="w-100">
                 <a href="url">
<img
                  data-flickity-lazyload="image_url"
                    class="img-fluid"
                />
</a>
            </div>
        </div>
    </div>
</div>


INFORMACIÓN ADICIONAL:


  • Soportamos Bootstrap 4, por lo que si tienes conocimiento avanzado en código HTML y CSS puedes elegir otro estilo de carrusel o lograr personalizaciones adicionales. Si no cuentas con este conocimiento puedes consultar con algún especialista o utilizar el código ejemplo que te compartimos.


  • En el caso que tu imagen se vea "rota"


puedes:


Revisar si la URL tiene HTTPS, en el caso de no tenerlo puede que sea uno de los motivos por lo que no se muestra correctamente. Puedes probar agregando https:// a la url o cambiando el sitio de alojamiento para la imagen.


Revisar si la URL contiene WWW. Puedes probar agregando https://www a la url o cambiando el sitio de alojamiento para la imagen.


  • Si no visualizas correctamente tu widget puede ser que alguna etiqueta tenga algún error y por eso el código no funcionae. Para solucionarlo revisa que el código esté correctamente y tal cual como te lo compartimos en este tutorial.



Recomendaciones para las imágenes


No existe un tamaño oficial definido en la plataforma, por lo que estas son sugerencias basadas en las buenas prácticas para carruseles web. Podés adaptarlas según el tipo de imágenes que uses y el resultado que busques.


  • Dimensiones: 1920 × 1080 px (relación 16:9) es un punto de partida sólido. Esa resolución funciona bien en pantallas grandes y mantiene proporciones adecuadas en dispositivos móviles, evitando distorsiones o recortes. Si querés optimizar para móviles, podés considerar también versiones de menor resolución (720–1080 px de ancho).
  • Formato: JPEG es la opción preferible para fotografías por su mejor compresión. PNG funciona bien para imágenes con gráficos o transparencia. En ambos casos, comprimí las imágenes antes de subirlas.
  • Peso: Intentá no superar los 500 KB por imagen para garantizar tiempos de carga rápidos y una buena experiencia para tus usuarios.
  • Proporción: Mantener una relación 16:9 (o similar) ayuda a que las imágenes se vean bien en distintos dispositivos sin recortes ni deformaciones.



Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a support@publica.la.

Actualizado el: 02/07/2026

¿Este artículo te resultó útil?

Comparte tu opinión

Cancelar

¡Gracias!