So baust du ein Akkordeon in Shopware 6 (z.B. FAQs)

Wenn du häufig gestellte Fragen (FAQs) in deinem Shopware 6 Shop präsentieren möchtest, bietet dir ein Akkordeon eine besonders kompakte und elegante Möglichkeit. In diesem Tutorial siehst du, wie du ganz ohne Plugin und ohne Agentur-Unterstützung ein solches Akkordeon direkt in deinem Shop anlegst.

Was ist ein Akkordeon?

Ein Akkordeon besteht aus mehreren aufklappbaren Elementen: Du siehst nur die Frage, und erst durch einen Klick öffnet sich die zugehörige Antwort. So bleibt die Seite übersichtlich, auch wenn du viele Inhalte unterbringen möchtest.

Die Lösung im Video

HTML-Block einfügen

Öffne im Erlebniswelten-Editor die Seite, auf der dein FAQ-Akkordeon erscheinen soll – zum Beispiel die Startseite. Lege dort eine neue Sektion an und wähle „Volle Breite“.

Füge dann einen HTML-Block ein. Dieser steht dir in Shopware als Erlebniswelt-Element zur Verfügung.

     

          

               
                    1. - Lorem Ipsum
               
          
          

               

                    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.
                    
          
     
     

          

               
                    2. - Lorem Ipsum
               
          
          

               

                    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.
               
          
     
     

          

               
                    3 - Lorem Ipsum
               
          
          

               

                    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.
               
          
     
     
     

          

               
                    4 - Lorem Ipsum
               
          
          

               

                    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.
               
          
     
     
     

          

               
                    5 - Lorem Ipsum
               
          
          

               

                    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.
                    
          
        

Dieser Code enthält bereits fünf fertige Fragen. Du kannst die Überschriften sowie die Inhalte natürlich durch deine eigenen Fragen und Antworten ersetzen.

Eigene Fragen und Antworten eintragen

Du siehst im HTML jeweils einen Abschnitt, der mit 

 beginnt. Innerhalb dieses Abschnitts findest du den Fragetext im Button und darunter im 

 den Antworttext.

Ersetze den Text in diesen beiden Bereichen durch deine Inhalte. Achte darauf, dass du nur den Text änderst – nicht die IDs oder HTML-Struktur.

Weitere Fragen hinzufügen

Wenn du mehr als fünf Fragen benötigst, kannst du das Akkordeon ganz einfach erweitern:

1. Kopiere einen kompletten Block, am besten einen mittleren wie z. B. den zu „Question 2“. Achte darauf, dass du vom öffnenden 
    bis zum schließenden 
    dieses Blocks alles kopierst.
2. Füge diesen Block am besten direkt vor dem letzten 

 (ganz unten im HTML) ein.

Ändere alle Vorkommen der ID von „2“ auf „6“ (bzw. entsprechend fortlaufend, z. B. „7“, „8“ …). Jede Frage nutzt die ID fünfmal: dreimal im Fragetitel und zweimal in der Antwort.

Passe wieder die Texte für Frage und Antwort an.

Ein kleiner Tipp: Wenn sich beim Klick auf eine Frage plötzlich mehrere Fragen gleichzeitig öffnen, hast du wahrscheinlich eine ID vergessen zu ändern. Prüfe in diesem Fall nochmals sorgfältig deinen HTML-Block.

Extra-Service: Vorlage für ein einzelnes Akkordeon-Element

Damit dir das Kopieren leichter fällt und keine Fehler bei der HTML-Struktur passieren, findest du hier ein einzelnes Akkordeon-Element als Vorlage. Du kannst es beliebig oft einfügen, musst dabei aber unbedingt die Zahl in den IDs und Attributen anpassen. Im Beispiel unten steht überall „Six“. Beim nächsten Akkordeon-Element ersetzt du „Six“ einfach durch „Seven“, dann durch „Eight“ usw.

    

        
            6 - Lorem Ipsum
        
    
    

        

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        
    

Achte bei jeder neuen Frage darauf, dass du alle fünf Stellen mit der alten Zahl durch die neue ersetzt:

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

Wenn du das konsequent durchziehst, funktioniert dein Akkordeon auch mit zehn, zwanzig oder mehr Fragen – ganz ohne Programmierkenntnisse.

Vorschau und Kontrolle

Nach dem Speichern kannst du dir dein Akkordeon direkt auf der Seite ansehen. Dank der Bootstrap-Klassen, die Shopware standardmäßig nutzt, wird das Design automatisch korrekt angezeigt – ohne dass du selbst CSS anpassen musst.

Fazit

Mit dieser Methode kannst du beliebig viele Fragen in einem aufgeräumten Akkordeon-Stil darstellen. Du brauchst kein Plugin, keine Agentur und keine Programmierkenntnisse – nur ein wenig Geduld und Übersicht beim Einfügen und Anpassen des HTMLs. So machst du deinen Shop für Kunden noch hilfreicher und professioneller.