Skip to main content
All CollectionsCustomize your store
Add an informative modal
Add an informative modal

In this article we show you how you can insert a popup window in the store with an informative message for your users.

Lara Macarena Sastre avatar
Written by Lara Macarena Sastre
Updated over a year ago

This can be useful to inform your users that the books purchased are for in-store consumption and cannot be downloaded or printed, give them a welcome message, or whatever you need to communicate.


We share an example of the use of Editorial UPC:

1. Go to Control Panel > Settings > Advanced

2. Copy the following code and paste it preferably in a code editor or in a notepad:

<!-- 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>Bienvenido(a) a la tienda de .... <br/> Te recordamos que los ebooks que adquieras son para consumo en tienda y no pueden ser descargados en ningún dispositivo.<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-cerrar" data-bs-dismiss="modal">Aceptar</button>
</div>
</div>
</div>
</div>
<style>
#exampleModal .modal-body p {
font-size: 20px;
}
</style>
<!-- Fin Modal-Popup inform -->

Replace the texts by placing the message you want. Pay attention to the code tags as they must be spelled correctly to avoid errors.

3. Paste the code you edited into the Custom before </body> code section:

4. Save the changes.

Your users will see this informative message only once, and by clicking the "Accept" button, this information will be stored in the memory of the browser from where they are entering (Google Chrome for example) to prevent the message from being displayed every time they enter . Keep in mind that if you clear the browser's cache or access it from a different one (Firefox for example), you will see the message again.

⚠️ We always recommend you try to create a backup copy of the code you insert in the store. You can use free online tools, we share an example site codepen.io

We hope this tutorial has been easy for you. If you have questions, write to us at [email protected] .

Did this answer your question?