Artigos sobre: Personalize sua loja

Adicionar um carrossel de imagens

Neste artigo vamos te mostrar como adicionar um carrossel de imagens na seção de widgets da sua loja para exibir promoções, convites para assinar, informações ou links para download do app.

O espaço de widgets suporta inserção de código HTML, o que permite adicionar banners, textos, imagens, vídeos, links externos e anúncios.

1. Acesse o Painel de Controle > Configurações > Widgets e insira o seguinte código HTML no campo correspondente:

<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="URL_DA_IMAGEM" class="img-fluid"/>
            </div>
        </div>
    </div>
</div>

Substitua URL_DA_IMAGEM pelo endereço real de cada imagem. Para hospedar imagens gratuitamente, você pode usar o Imgbb.

Para adicionar links nas imagens (para que o usuário acesse uma URL ao clicar), envolva a tag <img> com uma tag <a href="URL_DESTINO">.

2. Adicione o seguinte código CSS. Dependendo do seu plano, você deverá inserir em CSS Personalizado ou em Código personalizado antes de </head>:

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

Dicas para solução de problemas: Verifique se as URLs das imagens usam o protocolo HTTPS. Certifique-se de que as URLs incluam www onde necessário. Revise as tags HTML em busca de erros de sintaxe. O carrossel usa Bootstrap 4.

Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para support@publica.la.

Atualizado em: 16/04/2026

Este artigo foi útil?

Obrigado!