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.

Recomendações para as imagens

Não existe um tamanho oficial definido na plataforma, por isso estas são sugestões baseadas nas boas práticas para carrosséis web. Você pode adaptá-las de acordo com o tipo de imagens que usar e o resultado que quiser alcançar.

Dimensões: 1920 × 1080 px (proporção 16:9) é um bom ponto de partida. Essa resolução funciona bem em telas grandes e mantém proporções adequadas em dispositivos móveis, evitando distorções ou cortes. Se quiser otimizar para celular, considere também versões de menor resolução (720–1080 px de largura).
Formato: JPEG é a opção preferível para fotografias, pela melhor compressão. PNG funciona bem para imagens com gráficos ou transparência. Em ambos os casos, comprima as imagens antes de fazer o upload.
Peso: Tente não ultrapassar 500 KB por imagem para garantir tempos de carregamento rápidos e uma boa experiência para seus usuários.
Proporção: Manter uma proporção 16:9 (ou similar) ajuda a que as imagens fiquem bem em diferentes dispositivos, sem cortes nem deformações.

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

Atualizado em: 02/07/2026

Este artigo foi útil?

Obrigado!