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:
Los pasos a seguir son dos:
1 - Insertar el código HTML.
2 - Agregar el codigo CSS para controlar su tamaño y posicionamiento.
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 <style> y colocar el código CSS en Custom before </head> 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 <a> envolviendo cada imágen. 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>
INORMACIÓ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 imágen 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 y te aparece algo como esto:
- Puede que alguna etiqueta tenga algún error y es por eso que el código no funciona. Para solucionarlo revisa que el código esté correctamente y tal cual como te lo compartimos en este tutorial.
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].