FAQ Sectie met Categorieën voor Shopify Thema

‍

Documentatie & Stappenplan: DT FAQ Sectie met Categorieën voor Shopify Thema

Met de DT FAQ Sectie bied je bezoekers eenvoudig toegang tot veelgestelde vragen, gegroepeerd per categorie. Dit verhoogt de gebruiksvriendelijkheid van je webshop en vermindert de hoeveelheid klantvragen via je klantenservice.

Wat doet deze feature?

• Toont veelgestelde vragen (FAQ) gesorteerd op categorieën.
• Biedt snelle navigatie tussen categorieën zonder paginaverversing.
• Toont antwoorden pas na een klik op de vraag, zodat de pagina overzichtelijk blijft.
• Responsief design, optimaal voor desktop en mobiele apparaten.

Stappenplan

Stap 1: Maak een nieuwe sectie aan in je Shopify thema

1. Log in op je Shopify admin dashboard.
2. Ga naar Online Store > Themes.
3. Klik op Actions bij je live thema en kies Edit code.
4. Klik onder de map Sections op Add a new section.
5. Geef het bestand de naam dt-faq.liquid.
6. Kopieer en plak de volledige FAQ-sectie code (zie je eigen aangeleverde code) in dit nieuwe bestand.

‍

Code:

{% comment %}

 Basis FAQ Section  - Simplele Versie

 This version uses inline JavaScript for maximum reliability

{% endcomment %}

<div class="faq-section">

 <div class="faq-container">

   <!-- Category navigation -->

   <div class="faq-sidebar">

     <ul class="faq-categories">

       {%- for block in section.blocks -%}

         {%- if block.type == 'category' -%}

           <li class="faq-category-item{% if forloop.first %} active{% endif %}">

             <button class="faq-category-button" onclick="showCategory('{{ block.id }}')">

               {{ block.settings.category_name }}

             </button>

           </li>

         {%- endif -%}

       {%- endfor -%}

     </ul>

   </div>

   <!-- FAQ content -->

   <div class="faq-content">

     {%- for block in section.blocks -%}

       {%- if block.type == 'category' -%}

         <div id="category-{{ block.id }}" class="faq-category-content{% if forloop.first %} active{% endif %}">

           <h2 class="faq-category-title">{{ block.settings.category_name }}</h2>

           <div class="faq-items">

             {%- for question_block in section.blocks -%}

               {%- if question_block.type == 'question' and question_block.settings.category_tag == block.settings.category_name -%}

                 <div class="faq-item" {{ question_block.shopify_attributes }}>

                   <button class="faq-question" onclick="toggleQuestion(this)">

                     <span class="faq-question-text">{{ question_block.settings.question }}</span>

                     <span class="faq-icon">+</span>

                   </button>

                   <div class="faq-answer">

                     <div class="faq-answer-content">

                       {{ question_block.settings.answer }}

                     </div>

                   </div>

                 </div>

               {%- endif -%}

             {%- endfor -%}

           </div>

         </div>

       {%- endif -%}

     {%- endfor -%}

   </div>

 </div>

</div>

<style>

/* Basic styles for layout */

.faq-section {

 margin: 60px 0;

 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

 color: {{ section.settings.text_color }};

 background-color: {{ section.settings.background_color }};

}

.faq-container {

 max-width: 1200px;

 margin: 0 auto;

 padding: 0 20px;

 display: flex;

 gap: 40px;

}

/* Sidebar styles */

.faq-sidebar {

 width: 25%;

 min-width: 200px;

}

.faq-categories {

 list-style: none;

 padding: 0;

 margin: 0;

}

.faq-category-item {

 margin-bottom: 10px;

}

.faq-category-button {

 display: block;

 width: 100%;

 text-align: left;

 padding: 12px 15px;

 background: none;

 border: none;

 border-left: 3px solid transparent;

 font-size: 16px;

 font-weight: 500;

 cursor: pointer;

 color: {{ section.settings.text_color }};

}

.faq-category-item.active .faq-category-button {

 border-left-color: {{ section.settings.accent_color }};

 color: {{ section.settings.accent_color }};

 background-color: rgba(0, 0, 0, 0.03);

}

/* Content styles */

.faq-content {

 flex: 1;

}

.faq-category-content {

 display: none;

}

.faq-category-content.active {

 display: block;

}

.faq-category-title {

 margin-top: 0;

 margin-bottom: 30px;

 font-size: 24px;

 font-weight: 600;

 color: {{ section.settings.text_color }};

}

/* FAQ items */

.faq-items {

 border-top: 1px solid rgba(0, 0, 0, 0.1);

}

.faq-item {

 border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

.faq-question {

 display: flex;

 justify-content: space-between;

 align-items: center;

 width: 100%;

 text-align: left;

 padding: 20px 0;

 background: none;

 border: none;

 font-size: 18px;

 font-weight: 500;

 cursor: pointer;

 color: {{ section.settings.text_color }};

}

.faq-question-text {

 flex: 1;

}

.faq-icon {

 font-size: 20px;

 margin-left: 10px;

}

.faq-question.active {

 color: {{ section.settings.accent_color }};

}

.faq-question.active .faq-icon {

 content: "-";

}

.faq-answer {

 display: none;

 padding: 0 0 20px;

}

.faq-answer.active {

 display: block;

}

.faq-answer-content {

 line-height: 1.6;

}

/* Mobile styles */

@media screen and (max-width: 768px) {

 .faq-container {

   flex-direction: column;

 }

 .faq-sidebar {

   width: 100%;

 }

 .faq-categories {

   display: flex;

   flex-wrap: wrap;

   gap: 10px;

 }

 .faq-category-button {

   border-left: none;

   border-bottom: 3px solid transparent;

   padding: 10px 15px;

 }

 .faq-category-item.active .faq-category-button {

   border-left-color: transparent;

   border-bottom-color: {{ section.settings.accent_color }};

 }

}

</style>

<script>

 function showCategory(categoryId) {

   // Hide all category contents

   var categoryContents = document.querySelectorAll('.faq-category-content');

   for (var i = 0; i < categoryContents.length; i++) {

     categoryContents[i].classList.remove('active');

   }

   // Show the selected category content

   var selectedCategory = document.getElementById('category-' + categoryId);

   if (selectedCategory) {

     selectedCategory.classList.add('active');

   }

   // Update category button styles

   var categoryItems = document.querySelectorAll('.faq-category-item');

   for (var i = 0; i < categoryItems.length; i++) {

     categoryItems[i].classList.remove('active');

   }

   // Find the clicked button's parent and add active class

   var clickedButton = event.currentTarget;

   var parentItem = clickedButton.parentNode;

   parentItem.classList.add('active');

 }

 function toggleQuestion(button) {

   // Toggle active class on the button

   button.classList.toggle('active');

   // Get the answer element (next sibling)

   var answer = button.nextElementSibling;

   answer.classList.toggle('active');

   // Update the icon

   var icon = button.querySelector('.faq-icon');

   if (button.classList.contains('active')) {

     icon.textContent = '-';

   } else {

     icon.textContent = '+';

   }

 }

</script>

{% schema %}

{

 "name": "👨‍💻 DT FAQ",

 "tag": "section",

 "class": "section",

 "settings": [

   {

     "type": "color",

     "id": "background_color",

     "label": "Background Color",

     "default": "#ffffff"

   },

   {

     "type": "color",

     "id": "text_color",

     "label": "Text Color",

     "default": "#333333"

   },

   {

     "type": "color",

     "id": "accent_color",

     "label": "Accent Color",

     "default": "#0066cc"

   }

 ],

 "blocks": [

   {

     "type": "category",

     "name": "FAQ Category",

     "limit": 10,

     "settings": [

       {

         "type": "text",

         "id": "category_name",

         "label": "Category Name",

         "default": "Category"

       }

     ]

   },

   {

     "type": "question",

     "name": "FAQ Question",

     "settings": [

       {

         "type": "text",

         "id": "question",

         "label": "Question",

         "default": "Frequently asked question"

       },

       {

         "type": "richtext",

         "id": "answer",

         "label": "Answer",

         "default": "<p>Provide the answer to your FAQ here. You can use basic HTML formatting.</p>"

       },

       {

         "type": "text",

         "id": "category_tag",

         "label": "Category",

         "info": "Enter the exact category name this question belongs to",

         "default": "Category"

       }

     ]

   }

 ],

 "presets": [

   {

     "name": "FAQ with Categories",

     "blocks": [

       {

         "type": "category",

         "settings": {

           "category_name": "Orders & Shipping"

         }

       },

       {

         "type": "category",

         "settings": {

           "category_name": "Returns & Exchanges"

         }

       },

       {

         "type": "question",

         "settings": {

           "question": "How long will it take for my order to arrive?",

           "answer": "<p>Orders typically ship within 1-2 business days. Delivery times vary by location but generally take 3-5 business days after shipping.</p>",

           "category_tag": "Orders & Shipping"

         }

       },

       {

         "type": "question",

         "settings": {

           "question": "What is your return policy?",

           "answer": "<p>We offer a 30-day return policy for most items. Products must be unused and in original packaging.</p>",

           "category_tag": "Returns & Exchanges"

         }

       }

     ]

   }

 ]

}

{% endschema %}

Stap 2: Voeg de FAQ sectie toe aan je thema via Theme Editor

1. Ga naar Online Store > Themes en klik op Customize bij je actieve thema.
2. Selecteer de pagina waar je de FAQ wilt tonen (bijvoorbeeld een speciale FAQ-pagina).
3. Klik op Add section in de linker zijbalk.
4. Zoek naar 👨‍💻 DT FAQ en klik erop om deze toe te voegen.
5. Sleep de sectie naar de gewenste positie op de pagina.
6. Configureer de kleuren en styling via de instellingen in de sectie.
7. Klik op Save.

Stap 3: Configureer je FAQ sectie

In de theme editor kun je het volgende aanpassen:

• Achtergrondkleur: Achtergrondkleur van de FAQ-sectie.
• Tekstkleur: Algemene tekstkleur van vragen en antwoorden.
• Accentkleur: Kleur voor actieve categorieën en vragen.

Categorieën en vragen toevoegen:

1. Klik in de Theme Editor op DT FAQ sectie.
2. Klik op Add block om een nieuwe FAQ Category of FAQ Question toe te voegen.

FAQ Categorie

• Geef elke categorie een unieke naam (bijvoorbeeld: "Verzending", "Retourbeleid", etc.).

FAQ Vraag

• Geef een duidelijke vraag op.
• Geef een gedetailleerd antwoord (gebruik eenvoudige HTML voor opmaak).
• Zorg ervoor dat de categorie exact overeenkomt met de naam van de categorie waarin deze vraag moet verschijnen.

Stap 4: Test de functionaliteit

1. Open de FAQ-pagina in je webshop.
2. Controleer of alle categorieën duidelijk zichtbaar en aanklikbaar zijn.
3. Klik op een categorie en controleer of alleen vragen uit deze categorie worden weergegeven.
4. Klik op een vraag en controleer of het antwoord netjes openklapt en leesbaar is.
5. Controleer de weergave op zowel desktop als mobiele apparaten.

Probleemoplossing

Vragen klappen niet uit

• Controleer in de browser-console (F12) op JavaScript-fouten.
• Zorg ervoor dat alle benodigde JavaScript code correct is toegevoegd en niet conflicteert met andere scripts.

Categorieën functioneren niet

• Controleer of de categorie-tags bij vragen exact overeenkomen met de naam van de categorieën.
• Zorg ervoor dat elk antwoord aan de juiste categorie is toegewezen.

Aanpassingsmogelijkheden

Voor ontwikkelaars zijn verdere aanpassingen mogelijk:

• Voeg animaties toe bij het uitklappen van antwoorden.
• Breid styling uit om deze verder aan te passen aan je merkidentiteit.
• Integreer zoekfunctionaliteit binnen de FAQ-sectie.

Compatibiliteit

Deze code is getest en geschikt voor:

• Shopify Dawn thema (standaard)
• Moderne Shopify-thema’s
• Zowel desktop als mobiele browsers.

‍