Adicionar uma seção de FAQs na loja
Neste artigo vamos te mostrar como adicionar uma seção de perguntas frequentes para os seus usuários.
Este tutorial pode ser útil se você recebe muitas consultas sobre os mesmos temas ou se quiser antecipar informações para seus usuários sobre como usar, ler ou comprar na sua loja.
Vamos te mostrar como adicionar uma barra lateral com FAQs na loja como esta:
1. Vá para Painel de Controle > Configurações > Avançado
2. Copie o seguinte código:
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<h4 class="title-faqs">Preguntas Frecuentes</h4>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Compré un Ebook, ¿cómo puedo leer?
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Para acceder al contenido que adquiriste ingresa a la tienda con el email y contraseña con los que te registraste. Luego haz clic en el menú ubicado en el margen superior derecho y ve a <b>"Mis publicaciones"</b>.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
¿Puedo descargar el Ebook?
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Los Ebooks que adquieras son para consumo en la tienda y no pueden descargarse en dispositivos ni imprimirse.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFive">
<h2 class="mb-0">
<button class="btn btn-link btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
¿Cómo puedo leer offline?
</button>
</h2>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
Los Ebooks de tipo <b>PDF</b> podrás guardarlos en la sesión de tu navegador para poder leerlos sin conexión a internet.<br/> Los mismos serán almacenados en <b>"Mis descargas" </b> y permanecerán allí mientras tu sesión se encuentre activa (es decir, que no hayas cerrado sesión en la tienda) y durante 7 días, luego deberás descargar el ebook nuevamente.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Olvidé mi contraseña, ¿cómo puedo recuperarla?
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Para recuperar tu contraseña haz clic en Ingresar y elige la opción <b>Resetear contraseña</b>. Recibirás en tu correo un mail de recuperación para poder crear una nueva. <br/>Si tienes consultas o inconvenientes ponte en contacto con el equipo de Soporte de la tienda.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h2 class="mb-0">
<button class="btn btn-link btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
¿Dónde puedo ver la información de mi cuenta?
</button>
</h2>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body">
Ingresa a la tienda y desde el menú desplegable en el margen superior derecho, elige la opción <b>"Mi cuenta"</b>.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingSix">
<h2 class="mb-0">
<button class="btn btn-link btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
Tengo un cupón de descuento, ¿cómo puedo canjearlo?
</button>
</h2>
</div>
<div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordionExample">
<div class="card-body">
Para canjear un cupón elige un plan o publicación y haz clic en "Adquirir". Justo debajo de los medios de pago, selecciona <b>"Tengo un cupón"</b> e ingresa el mismo para obtener tu descuento.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingSeven">
<h2 class="mb-0">
<button class="btn btn-link btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
¿En qué dispositivos puedo acceder?
</button>
</h2>
</div>
<div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#accordionExample">
<div class="card-body">
Puedes acceder desde cualquier dispositivo con conexión a internet. Para más información consulta <a href="https://ayuda.publica.la/es/por-qu%C3%A9-puede-dar-error-la-descarga-para-lectura-offline" target="_blank" style="color: #f060bc; padding: 0px 0px; font-size: 16px; display: inline; ">este artículo</a> de nuestro Centro de ayuda.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingEight">
<h2 class="mb-0">
<button class="btn btn-link btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
¿Cómo puedo suscribirme a un plan?
</button>
</h2>
</div>
<div id="collapseEight" class="collapse" aria-labelledby="headingEight" data-parent="#accordionExample">
<div class="card-body">
Si la tienda posee suscripciones a la venta podrás suscribirte a un plan. Para hacerlo ingresa a la tienda y haz clic en <b>"Suscribirse"</b>. Elige el plan que desees y haz clic en "Seleccionar plan".
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingNine">
<h2 class="mb-0">
<button class="btn btn-link btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
Hice una compra duplicada, ¿qué debo hacer?
</button>
</h2>
</div>
<div id="collapseNine" class="collapse" aria-labelledby="headingNine" data-parent="#accordionExample">
<div class="card-body">
Ponte en contacto con el administrador de la tienda. Haz clic en "Contáctanos" y en el formulario indica los datos de la compra: email con el que realizaste el pago, título de la publicación y el número de recibo o número de transacción que figura en tu comprobante de pago.
</div>
</div>
</div>
</div>
<style>
@media only screen and (max-width: 768px) {
#mySidebar{
width: 100%;
padding-top: 70px;
margin-top: 60px;
};
.accordion .card-body{
padding: 0.5rem 0rem !important;
};
.card-header .btn{
padding: 5px;
font-size: small;
}
};
.accordion .card-body{
max-height: 200px;
overflow: scroll;
padding: 0.5rem 15rem;
text-align: center;
}
.accordion .card{
border-radius: 0;
border: 0px;
}
.card-header .btn{
background-color: #fff;
color: #444;
cursor: pointer;
width: 100%;
border: none;
outline: none;
transition: 0.4s;
font-weight: bold;
padding: 10px;
text-align: center;
}
.active, .card-header .btn:hover{
color: #f277c6 !important;
}
.card-header{
padding: 0 !important;
margin: auto auto;
border-bottom: 0.5 px solid rgba(0,0,0,.125);
}
.slick-slide a{
margin: 0 auto;
display: table;
}
.sidebar {
margin-top: 50px;
height: 100%;
width: 0;
position: fixed;
z-index: 1000;
top: 0;
right: 0;
background-color: #2b017d;
overflow-x: hidden;
transition: 0.5s;
padding-top: 30px;
overflow-y: scroll;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
padding-top: 15px;
}
.openbtn {
cursor: pointer;
background-color: transparent;
color: #FFFFFF !important;
padding: 10px 8px;
border: none;
font-weight: bold;
}
.openbtn:hover {
color: #444;
background-color: transparent;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px; }
.sidebar a {font-size: 18px;}
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.title-faqs{
padding: 0px 10px 10px 20px;
color: #ffd1ef;
font-family: 'Quincy CF',Georgia,sans-serif;
font-size: x-large;
text-align: center;
}
</style>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "500px";
document.getElementById("main").style.marginLeft = "250px";
};
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
var navbarLogin = document.querySelector('.MegaMenu ul:last-child');
var navbarGuest = document.querySelector('.navbar-nav .nav-item');
var navbar = navbarLogin ? navbarLogin : navbarGuest;
navbar.insertAdjacentHTML( 'beforebegin', '<li class="nav-item MegaMenu-navItem tColorPrContrast"><button class="openbtn" onclick="openNav()" style="text-transform: inherit; font-size: 14px">Preguntas Frecuentes</button></li>');
if (navbarGuest) {
navbarGuest.classList.add('pl-3')
}
</script>
3. Cole o código na caixa Custom before </body> code .
4. Salve as alterações.
Pronto! Você já tem suas FAQs disponíveis na loja.
Se quiser modificar a personalização, editar as perguntas e respostas ou fazer outras alterações, você precisará ter conhecimento em HTML , CSS e JavaScript ou pode consultar um especialista.
Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para support@publica.la.
Atualizado em: 11/05/2026
Obrigado!