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 FAQ accordion in the Subscriptions section like this one:
The steps to follow are two:
1 - Insert the HTML code.
2 - Add the CSS code to control its size and positioning.
1. Copy the following code:
<!-- 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 -->
NOTE: The fields in bold can be modified by adding your questions and answers where indicated.
2. Modify it, adding your questions and answers.
Once you have it ready, go to Control Panel > Settings > Advanced , and paste the code in Custom before </body> code
Save the changes.
3. Now we are going to give it the styles. To make it look like the image we showed you at the beginning of this instructable, the code used is:
#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;
}
NOTE: You can modify the colors and appearance by editing the values of each label. For this it is necessary that you have knowledge in CSS or that you have a specialist who can help you.
Depending on the plan you have contracted, you must enter the CSS code in different places, but don't worry, it works the same way in both.
Both are configured from Control Panel> Settings> Advanced
In the case that you have the Custom CSS box, you must place the CSS code as we share it with you above:
If you don't have the Custom CSS box , you'll need to add the additional <style> code </style> tag and place the CSS code in the Custom before </head> code:
📌 Only in this case the code would be:
<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>
Save the changes.
Ready! You already created your frequently asked questions.
Maybe some label has some error and that's why the code doesn't work. To solve it, check that the code is correct and as we share it with you in this tutorial.
We hope this tutorial has been easy for you. If you have questions, write to us at [email protected] .