Add an image carousel

In this article we will show you how to add an image carousel in your store widget.

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.

In this article:

Step 1
Step 2
Image recommendations

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 you're ready to insert it, you must go to 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 tag and place the CSS code in 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>

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 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 you are viewing your image "broken", you 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 like this appears:

It is possible that a tag may have an error and that's why the code is not working properly. To fix this, check that the code is correct and exactly as we shared in this tutorial.

Image recommendations

There is no official size defined in the platform, so these are suggestions based on best practices for web carousels. Feel free to adapt them to the type of images you use and the result you're looking for.

Dimensions: 1920 × 1080 px (16:9 ratio) is a solid starting point. That resolution looks good on large screens and maintains adequate proportions on mobile devices, avoiding distortions or cropping. If you want to optimize for mobile, you can also consider lower resolution versions (720–1080 px wide).
Format: JPEG is the preferred option for photographs due to better compression. PNG works well for graphics or images with transparency. In both cases, compress your images before uploading.
File size: Try not to exceed 500 KB per image to ensure fast loading times and a good experience for your users.
Aspect ratio: Maintaining a 16:9 ratio (or similar) helps images display correctly on different devices without cropping or distortion.

We hope you find this tutorial simple. If you have any questions you can email us at support@publica.la.

Updated on: 02/07/2026

Was this article helpful?

Thank you!