This tutorial can be useful for you if you receive many queries on the same topics or if you want to go ahead and provide information to your users on how to use, read or buy in your store.
We are going to show you how to add a sidebar with FAQs in the store like this:
1. Go to Control Panel > Settings > Advanced
2. Copy the following code:
<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. Paste the code into the Custom before </body> code box .
4. Save the changes.
Ready! You already have your FAQs available in the store.
If you want to modify the personalization, edit the questions and answers or make other changes, you must have knowledge of HTML , CSS and JavaScript or you can consult a specialist.
We hope this tutorial has been easy for you. If you have questions, write to us at [email protected] .