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 acordeón de Preguntas Frecuentes en la sección de Suscripciones como éste:
Los pasos a seguir son dos:
1 - Insertar el código HTML.
2 - Agregar el código CSS para controlar su tamaño y posicionamiento.
1. Copia el siguiente 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: Los campos en negrita podrás modificarlos agregando tus preguntas y respuestas donde se indican.
2. Modifica el mismo, agregando tus preguntas y respuestas.
Una vez lo tengas listo, ve a Panel de Control > Ajustes > Avanzados, y pega el código en Custom before </body> code
Guarda los cambios.
3. Ahora vamos a darle los estilos. Para que quede tal como en la imágen que te mostramos al inicio de este instructivo, el código utilizado es:
#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: Podrás modificar los colores y apariencia editando los valores de cada etiqueta. Para esto es necesario que tengas conocimiento en CSS o que cuentes con algún especialista que pueda ayudarte.
De acuerdo al plan que tengas contratado deberás ingresar el código CSS en diferentes lugares, pero no te preocupes que funciona en ambos de la misma manera.
Ambos se configuran desde Panel de control > Ajustes > Avanzados
En el caso que cuentes con el recuadro de CSS Personalizado deberás colocar el código CSS tal como te lo compartimos arriba:
Si no tienes el recuadro de CSS Personalizado, deberás agregar la etiqueta adicional <style> código </style> y colocar el código CSS en Custom before </head> code:
📌 Solo en este caso el código sería:
<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>
Guarda los cambios.
¡Listo! Ya creaste tus preguntas frecuentes.
Puede que alguna etiqueta tenga algún error y es por eso que el código no funciona. Para solucionarlo revisa que el código esté correctamente y tal cual como te lo compartimos en este tutorial.
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].