Akkordeon (z.B. FAQ-Bereich) mit Bordmitteln professionell umsetzen

Häufig gestellte Fragen gehören zu den Seitenelementen, die direkt auf die Kaufentscheidung einzahlen. Gut strukturierte FAQs reduzieren Rückfragen, stärken das Vertrauen und verbessern die Nutzerführung. In der Praxis zeigt sich, dass ein aufklappbares Akkordeon hier die beste Darstellungsform ist: kompakt, übersichtlich und sofort verständlich. Shopware 6 bringt dafür alles mit, was Sie brauchen. Ein Plugin ist nicht notwendig.

Was ist ein Akkordeon?

Ein Akkordeon besteht aus mehreren aufklappbaren Bereichen: Sichtbar ist zunächst nur die Frage. Erst durch einen Klick öffnet sich die zugehörige Antwort. So bleibt die Seite übersichtlich, selbst wenn Sie eine größere Anzahl an Inhalten unterbringen möchten.

HTML-Block einfügen

Öffnen Sie im Erlebniswelten-Editor die Seite, auf der Ihr FAQ-Akkordeon erscheinen soll. Legen Sie dort eine neue Sektion an und wählen Sie „Volle Breite".

Fügen Sie anschließend einen HTML-Block ein. Dieses Element steht Ihnen in Shopware als Erlebniswelt-Baustein nativ zur Verfügung.

<div class="accordion" id="accordionQuestions">
     <div class="accordion-item">
          <h2 class="accordion-header" id="headingQuestionOne">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionOne" aria-expanded="false" aria-controls="collapseQuestionOne">
                    1. - Lorem Ipsum
               </button>
          </h2>
          <div id="collapseQuestionOne" class="accordion-collapse collapse" aria-labelledby="headingQuestionOne" data-bs-parent="#accordionQuestions">
               <div class="accordion-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </div>
          </div>
     </div>
     <div class="accordion-item">
          <h2 class="accordion-header" id="headingQuestionTwo">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionTwo" aria-expanded="false" aria-controls="collapseQuestionTwo">
                    2. - Lorem Ipsum
               </button>
          </h2>
          <div id="collapseQuestionTwo" class="accordion-collapse collapse" aria-labelledby="headingQuestionTwo" data-bs-parent="#accordionQuestions">
               <div class="accordion-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </div>
          </div>
     </div>
     <div class="accordion-item">
          <h2 class="accordion-header" id="headingQuestionThree">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionThree" aria-expanded="false" aria-controls="collapseQuestionThree">
                    3 - Lorem Ipsum
               </button>
          </h2>
          <div id="collapseQuestionThree" class="accordion-collapse collapse" aria-labelledby="headingQuestionThree" data-bs-parent="#accordionQuestions">
               <div class="accordion-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </div>
          </div>
     </div>
     
     <div class="accordion-item">
          <h2 class="accordion-header" id="headingQuestionFour">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionFour" aria-expanded="false" aria-controls="collapseQuestionFour">
                    4 - Lorem Ipsum
               </button>
          </h2>
          <div id="collapseQuestionFour" class="accordion-collapse collapse" aria-labelledby="headingQuestionFour" data-bs-parent="#accordionQuestions">
               <div class="accordion-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </div>
          </div>
     </div>
     
     <div class="accordion-item">
          <h2 class="accordion-header" id="headingQuestionFive">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionFive" aria-expanded="false" aria-controls="collapseQuestionFive">
                    5 - Lorem Ipsum
               </button>
          </h2>
          <div id="collapseQuestionFive" class="accordion-collapse collapse" aria-labelledby="headingQuestionFive" data-bs-parent="#accordionQuestions">
               <div class="accordion-body">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </div>
          </div>
        </div>
</div>

Dieser Code enthält fünf fertige Akkordeon-Elemente. Ersetzen Sie die Platzhalter-Überschriften und -Texte durch Ihre eigenen Fragen und Antworten.

Eigene Fragen und Antworten eintragen

Im HTML beginnt jede Frage mit einem Abschnitt <div class="accordion-item">. Innerhalb dieses Abschnitts finden Sie den Fragetext im Button und darunter im <div class="accordion-body"> den Antworttext.

Ersetzen Sie den Text in diesen beiden Bereichen durch Ihre Inhalte. Achten Sie darauf, ausschließlich den Text zu ändern und die IDs sowie die HTML-Struktur unverändert zu lassen.

Weitere Fragen hinzufügen

Wenn Sie mehr als fünf Fragen benötigen, lässt sich das Akkordeon problemlos erweitern:

1. Kopieren Sie einen kompletten Block, am besten einen mittleren wie z. B. den zu „Question 2". Achten Sie darauf, vom öffnenden <div class="accordion-item"> bis zum schließenden </div> dieses Blocks alles zu kopieren.
2. Fügen Sie diesen Block direkt vor dem letzten </div> (ganz unten im HTML) ein.
3. Ändern Sie alle Vorkommen der ID von „2" auf „6" (bzw. entsprechend fortlaufend, z. B. „7", „8" …). Jede Frage verwendet die ID fünfmal: dreimal im Fragetitel und zweimal in der Antwort.
4. Passen Sie die Texte für Frage und Antwort an.

Ein wichtiger Hinweis: Wenn sich beim Klick auf eine Frage mehrere Fragen gleichzeitig öffnen, wurde eine ID nicht korrekt angepasst. Prüfen Sie in diesem Fall den HTML-Block noch einmal sorgfältig.

Vorlage für ein einzelnes Akkordeon-Element

Damit beim Kopieren keine Fehler in der HTML-Struktur entstehen, finden Sie hier ein einzelnes Akkordeon-Element als Vorlage. Sie können es beliebig oft einfügen. Entscheidend ist, die Zahl in den IDs und Attributen konsequent anzupassen. Im Beispiel unten steht überall „Six". Beim nächsten Element ersetzen Sie „Six" durch „Seven", dann durch „Eight" usw.

<div class="accordion-item">
    <h2 class="accordion-header" id="headingQuestionSix">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQuestionSix" aria-expanded="false" aria-controls="collapseQuestionSix">
            6 - Lorem Ipsum
        </button>
    </h2>
    <div id="collapseQuestionSix" class="accordion-collapse collapse" aria-labelledby="headingQuestionSix" data-bs-parent="#accordionQuestions">
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
    </div>
</div>

Achten Sie bei jeder neuen Frage darauf, alle fünf Stellen mit der alten Zahl durch die neue zu ersetzen:

• headingQuestionSix
• collapseQuestionSix
• aria-controls="collapseQuestionSix"
• aria-labelledby="headingQuestionSix"
• data-bs-target="#collapseQuestionSix"

Wenn Sie das konsequent durchführen, funktioniert Ihr Akkordeon auch mit zehn, zwanzig oder mehr Fragen.

Vorschau und Kontrolle

Nach dem Speichern können Sie sich Ihr Akkordeon direkt auf der Seite ansehen. Shopware nutzt standardmäßig Bootstrap-Klassen. Das Akkordeon wird daher automatisch korrekt dargestellt, ohne dass Sie eigenes CSS schreiben müssen. Das ist der entscheidende Vorteil dieser nativen Lösung: Sie bleibt bei Shopware-Updates stabil und verursacht keine Kompatibilitätsprobleme.

Fazit

Mit dieser Methode erstellen Sie ein FAQ-Akkordeon, das nativ in Shopware 6 läuft, update-sicher ist und sich beliebig skalieren lässt. Sie behalten die volle Kontrolle über Struktur und Inhalte, ohne auf Drittanbieter-Plugins angewiesen zu sein. Das Ergebnis: eine professionelle FAQ-Seite, die Ihren Kunden schnelle Orientierung bietet und Ihr Support-Aufkommen messbar reduziert.

Bei komplexeren Anforderungen, etwa mehrsprachigen FAQs oder einer dynamischen Anbindung an Ihr Ticketsystem, unterstütze ich Sie gern.