Insert a carousel with images in your store to invite your users to subscribe to your content in a more attractive way, share promotions or information.
The space to add Widgets allows you to insert HTML code. You can add a banner, text, an image, a video, a link to an external site, advertising, etc.
We will show you how to add a Carousel with images like this one:
There are two steps to follow:
1 - Insert the HTML code.
2 - Add the CSS code to control its size and positioning.
Step 1
You can create your own HTML code or use Bootstrap templates.
To add a banner like the example shown above, you can use the HTML code we share below, changing the spaces in the URL of each image for the ones you want to upload and appear in this carousel:
The bold "image_url" fields must be replaced by the URLs where your images are hosted.
In case you don't have them in any hosting service, you can use Imgbb which is free and easy to use, or you can search for others in your favorite search engine. If you use this tool, you must put the "URL to the image".
Once you have the code ready and your ready to insert it, you must go Control Panel -> Settings -> Widgets, paste it in the black field and then click save.
Step 2
Add the CSS styles so that the banner is well configured.
According to the plan you have contracted you will have to enter the CSS code in different places, but don't worry, it works in both in the same way.
Both can be configured from Control Panel > Settings > Advanced
If you have the Custom CSS box you must place the following CSS code in it:
.carousel-widget .flickity-slider .carousel-cell {
width: 100%;
text-align: center;
}
.carousel-widget .flickity-slider .carousel-cell img {
max-width: 100%;
}
If you don't have the Custom CSS box, you must add the additional <style> tag and place the CSS code in 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>
Done! Your carousel settings are configured.
💡If you want to add a link to the images so that when clicking on them users access a specific URL, you can place the <a> tag surrounding each image. For example:
<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>
ADDITIONAL INFORMATION:
- Our system supports Bootstrap 4, so if you have in-depth knowledge of HTML and CSS you can choose another carousel style or have additional personalizations. If you don't have knowledge in this you can always consult a specialist or use the code example that we provided.
- In case your are viewing your image "broken" your can verify if your URL has HTTPS, and in case that it isn't present it may be one of the reasons to why it's not showing correctly. You can try adding https:// to the URL or changing the hosting server for your image.
-If you cannot visualize your widget and something this appears :
It is possible that a tag may have an error and that's why the code is not working properly. In order to fix this you must check that the code is correct and exactly how we shared in this tutorial.
We hope you find this tutorial simple, if you have any questions you can email us at [email protected].