Este tutorial puede ser de utilidad para ti si recibes muchas consultas sobre los mismos temas o bien, si quieres adelantarte y brindar información a tus usuarios sobre cómo utilizar, leer o comprar en tu tienda.
Vamos a enseñarte a agregar un sidebar con Preguntas Frecuentes en la tienda como este:
1. Ve a Panel de control >Ajustes > Avanzados
2. Copia el siguiente 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. Pega el código en el recuadro Custom before </body> code.
4. Guarda los cambios.
¡Listo! ya tienes tus FAQs disponibles en la tienda.
Si quieres modificar la personalización, editar las preguntas y respuestas o realizar otros cambios debes contar con conocimiento en HTML, CSS y JavaScript o bien, puedes consultar con un especialista.
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].