Modal de maioridade

Configure um modal para que seus usuários confirmem a maioridade antes de entrar na sua loja.

Em alguns casos, devido ao material que você disponibiliza na sua loja, pode ser necessário confirmar a idade dos usuários para permitir o acesso à sua loja. Nesses casos, você pode seguir os passos deste artigo para configurar um modal com uma mensagem sobre a informação que eles devem confirmar e os botões de confirmação.

Faça login na loja com o seu usuário administrador.
Acesse o Painel de controle > Configurações > Avançado.
Você deverá copiar o código a seguir e colá-lo na seção Custom before code

   <script type="text/javascript">

   $(window).on("load", function () {
     if (!localStorage.getItem("modalShown")) {
       $("#exampleModal").modal("show");
       $(".Landing").css("filter", "blur(4px)");
       $("#App").css("pointer-events", "none");
     }

     $(".btn-cerrar").click(function () {
       $("#exampleModal").modal("hide");
       localStorage.setItem("modalShown", 'true');
       $("#App").css("filter", "none");
       $("#App").css("pointer-events", "auto");
     });

     $("#btn-no").click(function () {
      let prevUrl = history.go(-1);
      if(typeof prevUrl === 'undefinded'){
      }

     });


   });

   </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-body">
   <div class="d-flex">
   <img style="margin: auto auto" src="https://i.ibb.co/NxnV2xC/Captura-de-pantalla-2024-11-06-a-la-s-6-49-42-p-m.png"/>
   </div>
           <p style="margin-top: 1.5rem; text-align: center; margin-bottom: 2rem;">Este sitio contiene <strong>contenido para adultos</strong>. <br /> ¿Eres mayor de edad?<p>
   <div class="buttons" style="text-align: center; display: flow-root;">
           <button type="button" id="btn-yes" class="btn btn-success btn-cerrar btn-modal-style" data-bs-dismiss="modal">SÍ</button>
    <button type="button" id="btn-no" class="btn btn-danger btn-modal-style" data-bs-dismiss="modal">NO</button>
   </div>
         </div>
       </div>
     </div>
   </div>
   <style>
   .btn-modal-style{
       width: 125px;
       border-radius: 20px;
   }

   .btn-danger:focus, #btn-no:focus{
   box-shadow: 0 0 0 3px rgb(239 184 17 / 50%) !important;
   }


   /* Ajustar el tamaño de la imagen */

   #exampleModal .modal-body img {
     width: 100px !important;         /* Ajusta el ancho de la imagen */
     display: block;                         /* Asegura que se centre */
     margin: 0 auto;              /* Centra la imagen horizontalmente */
   }

   /* Ajustar color del boton SI*/

   #btn-yes {
     background-color: #4CAF50; /* Cambia el color de fondo */
     border-color: #4CAF50;     /* Cambia el color del borde */
     color: white;              /* Cambia el color del texto */
   }


   /* Ajustar color del boton NO*/

   #btn-no {
     background-color: #f44336; /* Cambia el color de fondo */
     border-color: #f44336;     /* Cambia el color del borde */
     color: white;              /* Cambia el color del texto */
   }

   /* Ajustar color y fuente del texto del modal*/

   #exampleModal .modal-body {
     color: #333333;                     /* Cambia el color del texto */
     font-family: 'Arial', sans-serif;            /* Cambia la fuente */
     font-size: 16px;                /* Ajusta el tamaño de la fuente */
   }

   #exampleModal .modal-body p {
     color: #555555;            /* Color específico para los párrafos */
   }


   </style>

Clique em Salvar. Ficará assim

Você notará que o código tem notas como, por exemplo, _/ Muda a cor do texto _/**. Use as notas para se orientar dentro do código e modificar a aparência do modal. Você poderá alterar as cores e a fonte dos botões, o texto do modal e a imagem exibida nele.

Encontre o seguinte trecho de código para alterar o logotipo ou a imagem exibida no modal. Você pode hospedar sua imagem em sites como https://imgbb.com/. Você deverá substituir a URL da imagem, neste caso https://i.ibb.co/NxnV2xC/Captura-de-pantalla-2024-11-06-a-la-s-6-49-42-p-m.png . Não apague as aspas nem nenhum outro caractere.

  <img style="margin: auto auto" src="https://i.ibb.co/NxnV2xC/Captura-de-pantalla-2024-11-06-a-la-s-6-49-42-p-m.png"/>

Nesta seção do código, você poderá alterar o texto do seu modal.

Este sitio contiene contenido para adultos. ¿Eres mayor de edad?<div class="buttons" style="text-align: center; display: flow-root;">

O texto que está entre as tags aparece em negrito na imagem.

Este sitio contiene contenido para adultos. ¿Eres mayor de edad? <div class="buttons" style="text-align: center; display: flow-root;">

Você encontrará uma seção para alterar o botão SIM e outra para alterar o botão NÃO.

/* Ajustar color del boton SI*/ #btn-yes { background-color: #4CAF50; /* Cambia el color de fondo */ border-color: #4CAF50; /* Cambia el color del borde */ color: white; /* Cambia el color del texto */ }

Na página a seguir você poderá encontrar os códigos das cores: https://htmlcolorcodes.com/es/ . Você deve procurar a cor que deseja usar e copiar seu identificador para depois colá-lo dentro do código.

Por fim, também poderemos ajustar a cor e a fonte do texto dentro do modal na seção a seguir:

/* Ajustar color y fuente del texto del modal*/ #exampleModal .modal-body { color: #333333; /* Cambia el color del texto */ font-family: 'Arial', sans-serif; /* Cambia la fuente */ font-size: 16px; /* Ajusta el tamaño de la fuente */

Ao acessar a página a seguir, você poderá encontrar uma lista de fontes e testá-las antes de selecionar uma para o seu modal: https://fonts.google.com/

Dicas:

Sempre tenha um backup do seu código para poder desfazer qualquer alteração que tenha feito, caso ocorra algum erro.

Complemente este modal ativando a Tela de início. Ela também serve para bloquear o conteúdo da loja antes de permitir que o usuário acesse.

Esperamos que este artigo tenha sido útil. Se tiver dúvidas, escreva para [email protected].

Modifique a aparência e o texto do seu modal.​

Modifique a aparência e o texto do seu modal.