Adicionar FAQs na seção de assinaturas
Neste artigo vamos te mostrar como adicionar uma seção de perguntas frequentes para seus usuários.
Este tutorial pode ser útil se você recebe muitas perguntas sobre os mesmos temas ou se deseja se antecipar e fornecer informações aos seus usuários sobre como usar, ler ou comprar na sua loja.
Vamos mostrar como adicionar um acordeão de FAQs na seção de Assinaturas como este:
Os passos a seguir são dois:
1 - Inserir o código HTML.
2 - Adicionar o código CSS para controlar o tamanho e o posicionamento.
1. Copie o seguinte código:
<!-- Preguntas Frecuentes en la sección Suscribe -->
<script>
const subscribe = window.location.pathname.includes('/subscribe');
if (subscribe) {
document.querySelector('.Footer').insertAdjacentHTML('afterend','<div id="preg" style="width:80%; margin: 0 auto; ">'+
'<h3 id="titulo-faqs">Preguntas Frecuentes</h3>'+
'<input type="checkbox" id="spoiler1"></input>'+
'<label for="spoiler1">¿Cómo puedo ingresar a la tienda?</label>'+
'<div class="spoiler">Si ya tienes una cuenta puedes iniciar sesión con Google o Facebook. Si aún no tienes una cuenta puedes registrarte utilizando cualquiera de esas redes sociales.</div>'+
'<input type="checkbox" id="spoiler2"></input>'+
'<label for="spoiler2">Olvidé mi contraseña, ¿cómo puedo recuperarla?</label>'+
'<div class="spoiler">Aquí tu respuesta: <br><br>'+
'<ul><li>• opción 1 </li><br>'+
'<li>• opción 2</li><br>'+
'<li>• opción 3 </li> </ul></div>'+
'<input type="checkbox" id="spoiler3"></input>'+
'<label for="spoiler3">PREGUNTA</label>'+
'<div class="spoiler">RESPUESTA</div>'+
'<input type="checkbox" id="spoiler4"></input>'+
'<label for="spoiler4">PREGUNTA</label>'+
'<div class="spoiler">RESPUESTA</div>'+
'<input type="checkbox" id="spoiler5"></input>'+
'<label for="spoiler5">PREGUNTA</label>'+
'<div class="spoiler">RESPUESTA</div>'+
'</div>'); }
</script>
<!-- Fin de Preguntas Frecuentes en la sección Suscribe -->
NOTA: Os campos em negrito podem ser modificados adicionando suas perguntas e respostas onde indicado.
2. Modifique-o adicionando suas perguntas e respostas.
Quando estiver pronto, acesse Painel de Controle > Configurações > Avançado e cole o código em Custom before </body> code
Salve as alterações.
3. Agora vamos aplicar os estilos. Para que fique como a imagem mostrada no início deste tutorial, o código utilizado é:
#titulo-faqs{
margin-bottom: 25px;
text-align: center;
text-transform: uppercase;
}
input[id^="spoiler"]{
display: none;
}
input[id^="spoiler"] + label {
display: block;
margin: 0 auto;
padding: 5px 20px;
background: #fbd2ec;
cursor: pointer;
font-weight: bold;
font-size: large;
color: black;
border-radius: 10px
}
input[id^="spoiler"]:checked + label {
color: #333;
background: #ccc;
}
input[id^="spoiler"] ~ .spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
}
input[id^="spoiler"]:checked + label + .spoiler{
height: auto;
opacity: 1;
}
NOTA: Você pode modificar as cores e a aparência editando os valores de cada label. Para isso é necessário ter conhecimento em CSS ou contar com um especialista que possa ajudá-lo.
Dependendo do plano que você contratou, o código CSS deverá ser inserido em locais diferentes, mas não se preocupe, funciona da mesma forma nos dois casos.
Ambos são configurados a partir de Painel de Controle > Configurações > Avançado
- Caso você tenha a caixa CSS Personalizado, você deve inserir o código CSS como compartilhamos acima:
- Se você não tiver a caixa de CSS Personalizado, será necessário adicionar a tag adicional
<style>código</style>e inserir o código CSS em Custom before </head> code:
📌 Somente neste caso o código seria:
<style>
#titulo-faqs{
margin-bottom: 25px;
text-align: center;
text-transform: uppercase;
}
input[id^="spoiler"]{
display: none;
}
input[id^="spoiler"] + label {
display: block;
margin: 0 auto;
padding: 5px 20px;
background: #fbd2ec;
cursor: pointer;
font-weight: bold;
font-size: large;
color: black;
border-radius: 10px
}
input[id^="spoiler"]:checked + label {
color: #333;
background: #ccc;
}
input[id^="spoiler"] ~ .spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
}
input[id^="spoiler"]:checked + label + .spoiler{
height: auto;
opacity: 1;
}
</style>
Salve as alterações.
Pronto! Você já criou suas perguntas frequentes.
Talvez alguma label tenha algum erro e por isso o código não funcione. Para resolver, verifique se o código está correto e igual ao que compartilhamos neste tutorial.
Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para support@publica.la.
Atualizado em: 11/05/2026
Obrigado!