Adicionar um modal informativo
Neste artigo vamos te mostrar como inserir uma janela popup na loja com uma mensagem informativa para seus usuários.
Isso pode ser útil para informar seus usuários que os livros adquiridos são para consumo dentro da loja e não podem ser baixados nem impressos, dar-lhes uma mensagem de boas-vindas, ou comunicar o que você precisar.
Compartilhamos um exemplo de uso da Editorial UPC:
1. Vá para Painel de Controle > Configurações > Avançado
2. Copie o seguinte código e cole de preferência em um editor de código ou no bloco de notas:
<!-- Inicio Modal-Popup inform -->
<script type="text/javascript">
$(window).on("load", function () {
if (!localStorage.getItem("modalShown") && window.location.pathname.includes('/library')) {
$("#exampleModal").modal("show");
}
$(".btn-cerrar").click(function () {
$("#exampleModal").modal("hide");
localStorage.setItem("modalShown", 'true');
});
});
</script>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p>Bem-vindo(a) à loja de .... <br/> Lembramos que os ebooks que você adquirir são para consumo dentro da loja e não podem ser baixados em nenhum dispositivo.<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-cerrar" data-bs-dismiss="modal">Aceitar</button>
</div>
</div>
</div>
</div>
<style>
#exampleModal .modal-body p {
font-size: 20px;
}
</style>
<!-- Fin Modal-Popup inform -->
Substitua os textos inserindo a mensagem que você deseja. Preste atenção nas tags do código, pois elas devem estar escritas corretamente para evitar erros.
3. Cole o código que você editou na seção Custom before </body> code:
4. Salve as alterações.
Seus usuários verão esta mensagem informativa apenas uma vez e, ao clicar no botão "Aceitar", essa informação ficará armazenada na memória do navegador a partir do qual estão acessando (Google Chrome, por exemplo) para evitar que a mensagem seja exibida toda vez que entrarem. Tenha em mente que, se você limpar o cache do navegador ou acessar por um navegador diferente (Firefox, por exemplo), a mensagem será exibida novamente.
⚠️ Recomendamos sempre criar uma cópia de backup do código que você inserir na loja. Você pode usar ferramentas online gratuitas; compartilhamos um exemplo de site: codepen.io
Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para support@publica.la.
Atualizado em: 11/05/2026
Obrigado!