Akkordeon

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zu Einstellungen für dynamische Inhalte
3. Shopify-Dokumentation zum Anpassen von Abschnitten
4. Company XYZ-Dokumentation zum Accordion-Block
5. Company XYZ-Dokumentation zu Header-Einstellungen
6. Company XYZ-Dokumentation zu Abschnitts-Innenabstand-Einstellungen
7. Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen
8. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
9. Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen
10. Company XYZ-Dokumentation zu Layout-Breiten-Einstellungen

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Verwenden Sie diesen Abschnitt, um FAQs, Richtlinien, Produktdetails oder andere längere Antworten in gestapelten, erweiterbaren Zeilen zu gruppieren. Sie können die Inhalte manuell mit Row-Blöcken erstellen, Einträge aus einem Blog abrufen oder beides kombinieren, wenn Sie eine Mischung aus kuratierten und automatisch aktualisierten Inhalten wünschen.

Für einen umfassenderen Überblick über das Verhalten von Abschnitten im Theme-Editor siehe Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Die Hauptsteuerelemente des Abschnitts bestimmen, wie sich das Akkordeon innerhalb der Seite einfügt. Content position ändert das Layout des erweiterbaren Inhaltsbereichs, und die Sticky-Optionen können den Header oder die Benutzeroberfläche des Abschnitts sichtbar halten, während Besucher durch längere Listen scrollen.

Die Positionierung links oder rechts eignet sich normalerweise am besten, wenn der Abschnitt zusammen mit seinem einleitenden Inhalt strukturiert wirken soll. Volle Breite ist die bessere Wahl, wenn das Akkordeon selbst im Mittelpunkt steht und die Seite ein einfacheres, großzügigeres Layout benötigt.

Tipp

Aktivieren Sie das Sticky-Verhalten, wenn der Abschnitt viele Zeilen oder besonders lange Antworten enthält. Bei kurzen Akkordeons wirkt eine einfachere nicht-Sticky-Einrichtung oft aufgeräumter.

Dynamische Inhalte

Diese Gruppe ermöglicht es Ihnen, das Akkordeon automatisch aus einem Blog zu befüllen. Siehe die Company XYZ-Dokumentation zu Einstellungen für dynamische Inhalte.

Für die allgemeine Einrichtung im Theme-Editor siehe Shopify-Dokumentation zum Anpassen von Abschnitten

Wählen Sie einen Blog aus, wenn sich der Abschnitt im Laufe der Zeit mit neuen Inhalten aktualisieren soll. Sie können die Ergebnisse mit einem Tag eingrenzen, steuern, wie viele Elemente angezeigt werden, und die Liste nach Titel oder Veröffentlichungsdatum sortieren, damit sie der Art entspricht, wie Besucher am ehesten darin stöbern.

Verwenden Sie Show excerpt, wenn vollständige Einträge jede Zeile zu lang machen würden. Show link to content ist hilfreich, wenn das Akkordeon als Vorschau dienen soll und der vollständige Artikel oder die vollständige Seite als nächster Schritt verfügbar sein soll.

Die Tag-Filterung funktioniert nur, wenn ein Blog ausgewählt ist. Wenn kein Blog gewählt ist, hängt der Abschnitt von den Row-Blöcken ab, die Sie manuell hinzufügen.

Farbeinstellungen

Diese Steuerelemente überschreiben die Standard-Textfarben für diesen Abschnitt. Sie sind besonders nützlich, wenn das Akkordeon auf einem benutzerdefinierten Hintergrund steht oder einen stärkeren Kontrast als die umgebende Seite benötigt.

Passen Sie die Farben für Symbole, Text und Zwischenüberschriften gemeinsam an, damit der Abschnitt weiterhin stimmig wirkt. Wenn Sie ein Hintergrundbild, einen Farbverlauf oder ein Video verwenden, prüfen Sie die Lesbarkeit sorgfältig, bevor Sie veröffentlichen.

Unterstützte Blocktypen

1. Row

Row

Ein Row-Block erstellt ein einzelnes aufklappbares Akkordeon-Element. Er kann benutzerdefinierten Rich Text verwenden, Inhalte aus einem Blogbeitrag oder einer Seite abrufen und optional eine Schaltfläche, ein Bild oder ein Video enthalten. Mehr dazu in der Company XYZ-Dokumentation zum Akkordeon-Block.

Wenn sowohl ein Blogbeitrag als auch eine Seite zugewiesen sind, hat die Seite Vorrang. Verwenden Sie Show open by default sparsam, damit der Abschnitt kompakt und leicht scannbar bleibt.

Show excerpt eignet sich gut, wenn die Quellinhalte für ein Akkordeon-Panel zu lang sind. Die optionale Schaltfläche passt gut, wenn eine Zeile zuerst den Inhalt vorab anzeigen und anschließend zu einer ausführlicheren Ressource verlinken soll.

Bildeinstellungen

Jede Row kann ein Bild oder Video enthalten, um erweiterte Inhalte nützlicher oder ansprechender zu machen. Das ist besonders hilfreich für Einrichtungsanleitungen, Funktionserklärungen, Pflegehinweise oder andere Antworten, die von einer visuellen Referenz profitieren.

Die Platzierung oben gibt den Medien mehr Gewicht, während die Platzierung unten die schriftliche Antwort zuerst stehen lässt. Bei Videos sorgt ein Vorschaubild normalerweise dafür, dass die Zeile vor dem Start der Wiedergabe etwas ausgereifter wirkt.

Achtung

Zu viele medienlastige Zeilen können den Abschnitt überladen wirken lassen und das Stöbern verlangsamen, insbesondere auf Mobile. Fügen Sie Bilder nur dort hinzu, wo sie das Verständnis verbessern.

Sichtbarkeitseinstellungen

Jede Row hat außerdem eine eigene Sichtbarkeitssteuerung. Verwenden Sie sie, wenn bestimmte Antworten oder Medientypen nur auf Mobile oder nur auf Desktop angezeigt werden sollen.

Standard-Abschnittseinstellungen

Header-Einstellungen

Verwenden Sie die gemeinsamen Header-Steuerelemente, um eine Einführung mit Beschriftung, Überschrift, Zwischenüberschrift, Symbol und optionaler Schaltfläche hinzuzufügen. Siehe die Company XYZ-Dokumentation zu Header-Einstellungen.

Eine klare Überschrift hilft Besuchern zu verstehen, worum es im Akkordeon geht, bevor sie eine Zeile öffnen. Wenn Sie eine Schaltfläche hinzufügen, halten Sie sie auf eine sinnvolle nächste Aktion fokussiert, etwa den Besuch einer Hilfeseite oder einer verwandten Ressource.

Padding-Einstellungen

Verwenden Sie die gemeinsamen Padding-Steuerelemente, um den Abstand ober- und unterhalb des Abschnitts anzupassen. Siehe die Company XYZ-Dokumentation zu Padding-Einstellungen.

Weniger Padding hilft dem Akkordeon, eng mit verwandten Inhalten zusammenzubleiben. Größeres Padding ist besser geeignet, wenn es als eigener Informationsabschnitt hervorstechen soll.

Abschnittshintergrund-Einstellungen

Verwenden Sie die gemeinsamen Hintergrund-Steuerelemente, um dem Abschnitt eine Farbe, einen Farbverlauf, ein Bild oder ein Video hinzuzufügen. Siehe die Company XYZ-Dokumentation zu Abschnittshintergrund-Einstellungen.

Hintergrundgestaltungen können dem Akkordeon mehr Präsenz verleihen, wirken sich aber auch auf die Lesbarkeit aus. Wenn Sie medienbasierte Hintergründe verwenden, prüfen Sie den Textkontrast, die Stärke des Overlays und wie dicht sich der Abschnitt anfühlt, sobald die Zeilen aufgeklappt sind.

Trennlinien-Einstellungen

Verwenden Sie die gemeinsamen Trennlinien-Steuerelemente, um oberhalb oder unterhalb des Abschnitts eine Linie hinzuzufügen. Siehe die Company XYZ-Dokumentation zu Trennlinien-Einstellungen.

Trennlinien sind nützlich, wenn das Akkordeon zwischen anderen inhaltsreichen Abschnitten steht und eine subtile visuelle Begrenzung benötigt. Halten Sie sie einfach, wenn die Zeilenstruktur bereits genügend Trennung bietet.

Sichtbarkeitseinstellungen

Verwenden Sie die gemeinsamen Sichtbarkeits-Steuerelemente, um den gesamten Abschnitt je nach Gerät ein- oder auszublenden. Siehe die Company XYZ-Dokumentation zu Sichtbarkeitseinstellungen.

Das ist nützlich, wenn Sie auf Mobile und Desktop unterschiedliche Informationslayouts wünschen. Wenn Sie den Abschnitt auf einem Gerät ausblenden, stellen Sie sicher, dass derselbe Inhalt an anderer Stelle weiterhin verfügbar ist.

Breiten-Einstellungen

Verwenden Sie die gemeinsamen Breiten-Steuerelemente, um sowohl den Abschnittsrahmen als auch den darin enthaltenen Inhaltsbereich zu steuern. Siehe die Company XYZ-Dokumentation zu Breiten-Einstellungen.

Schmalere Inhaltsbreiten sind oft leichter zu lesen, wenn Antworten lang sind. Größere Einstellungen können gut für kurze Einträge oder Zeilen mit mehr visuellem Inhalt funktionieren, es lohnt sich jedoch, das Ergebnis im Live-Storefront in der Vorschau zu prüfen.

Nutzungshinweise

1. Wählen Sie eine klare Inhaltsquelle. Verwenden Sie bloggestützte Inhalte für FAQs, die sich häufig ändern, und manuelle Row-Blöcke für immergrüne Antworten oder reichere benutzerdefinierte Layouts.
2. Schreiben Sie gut scannbare Zeilentitel. Klare Überschriften im Frage- oder Themenstil helfen Besuchern, die richtige Antwort zu finden, ohne mehrere Zeilen zu öffnen.
3. Halten Sie erweiterte Inhalte fokussiert. Verwenden Sie Auszüge, Schaltflächen und Links, wenn vollständige Quellinhalte das Akkordeon zu lang oder zu dicht wirken lassen würden.
4. Beschränken Sie standardmäßig geöffnete Zeilen. Öffnen Sie standardmäßig nur das wichtigste Element, damit der Abschnitt sein kompaktes Akkordeon-Verhalten beibehält.
5. Prüfen Sie die mobile Lesbarkeit. Kontrollieren Sie Sticky-Verhalten, Medien, Abstände und Kontrast zusammen auf kleineren Bildschirmen, bevor Sie veröffentlichen.
6. Vergleichen Sie beide Viewport-Größen. Prüfen Sie Desktop- und Mobile-Layouts getrennt, wenn Sie Positionierungs-, Sichtbarkeits- oder Medienoptionen verwenden, da das Akkordeon auf jeder Bildschirmgröße anders dargestellt werden kann.
7. Verwenden Sie Überschreibungen gezielt. Lassen Sie Farben und Medien auf ihren Standard- oder leeren Werten, wenn der Abschnitt die umgebende Gestaltung übernehmen soll; fügen Sie explizite Farben, Farbverläufe oder separate Medien nur hinzu, wenn sich das Akkordeon abheben soll.