Een FAQ maken in Shopify Dawn

Deze code aanpassingen zijn voor het thema Dawn in Shopify. In andere thema's kan dit ook werken, maar heb ik geen ervaring mee.

Let op, maak altijd een back-up voordat je aan de code gaat beginnen. Alle aanpassingen zijn op eigen risico.

Bekijk de video voor de uitgebreide stap-voor-stap uitleg. De code kan je hieronder vinden.

Stap 1) Maak een FAQ pagina

Maak een pagina aan in Shopify waar je meest gestelde vragen komen. Plak deze code in de HTML editor van je nieuwe pagina:

<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header"><button class="accordion-button"><B> Vraag 1 </B></button></h2>
<div class="accordion-content">
<p>Antwoord op vraag 1</p>
</div>
</div>
<!-- Je kunt meer items toevoegen door de structuur van .accordion-item te kopiëren en te plakken. --></div>

Je kan dit zo vaak onder elkaar plakken als je wilt.

Als eenmaal je CSS en Javascript zijn ingesteld, hoef je alleen deze code te plakken op alle pagina’s waar je het wilt hebben. CSS en Javascript hoeven maar één keer neergezet te worden om te werken op je hele site.

Stap 2) Pas theme.liquid aan met de CSS

Dan ga je naar je thema’s. Maak een backup!

Bij code bewerken zoek je naar theme.liquid. Plaats de code in de <style> hiertussen dus </style>. Gebruik ctrl+f of cmd+f om deze te zoeken op de pagina.

Kan je hem niet vinden, dan moet je het zelf aan de code toevoegen.

Als je geen Style tag hebt, zoek dan naar </head> en plaats je nieuwe code hier direct boven.

/* === JOUW CODE BEGINT HIER === */

/* Doel: Stijlen voor de accordeonfunctionaliteit in de FAQ-sectie */

/* Basisstijlen voor accordeon-knoppen */
.accordion-button {
background-color: #003366;
color: #ffffff;
cursor: pointer;
padding: 14px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

/* Stijl voor hover-toestand van accordeon-knoppen */
.accordion-button:hover {
background-color: #004480; /* Een iets donkerdere tint van #003366 voor het hover-effect */
}

/* Stijl voor actieve toestand van accordeon-knoppen */
.accordion-button.active {
background-color: #ccc;
}

/* Stijlen voor de inhoud van de accordeon */
.accordion-content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
background-color: #f9f9f9;
transition: max-height 0.3s ease;
}

/* Reset focus-stijl voor accordeon-knoppen */
.accordion-item .accordion-button:focus {
outline: none;
}

/* Stijl voor het geopende deel van de accordeon */
.accordion-item.active > .accordion-content {
max-height: 100vh;
}

/* === JOUW CODE EINDIGT HIER === */

Stap 3) Pas theme.liquid aan met JS

Als je dit hebt gedaan, ga je in hetzelfde bestand helemaal naar beneden (in theme.liquid). Plak hier het Javascript vlak boven </body> om te zorgen dat je site niet vertraagd raakt door het laden van je script.

<script>
/* === JOUW CODE BEGINT HIER === */
// Doel: Accordeonfunctionaliteit voor FAQ-sectie
document.addEventListener("DOMContentLoaded", function() {

// Selecteer alle accordeonknoppen
var acc = document.getElementsByClassName("accordion-button");

// Voeg een klik-eventlistener toe aan elke accordeonknop
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {

// Wissel de 'active'-klasse voor de bovenliggende accordeon-item-div
this.parentNode.parentNode.classList.toggle("active");
});
}

});
/* === JOUW CODE EINDIGT HIER === */
</script>

That’s it, je accordeon zou nu moeten werken. Heel veel plezier met het vullen van je FAQ / Veel gestelde vragen sectie.

Als je vragen hebt, of als het is gelukt. Plaats dan je reactie onder de video!