GemPages V7 unterstützt derzeit nicht die automatische Aufteilung der Produktbeschreibung in Akkordeon-Elemente anhand von Überschriften-Tags wie in V6. Sie können jedoch dasselbe Ergebnis erzielen, indem Sie Ihre Shopify-Produktbeschreibung mit Überschriften-Tags versehen und jedem Akkordeon-Element einen benutzerdefinierten Code-Schnipsel hinzufügen. Diese Anleitung führt Sie durch den gesamten Prozess, sodass Sie die Implementierung selbst durchführen können, ohne die Unterstützung des technischen Teams zu benötigen.
Übersicht
Diese Methode funktioniert, indem Ihre Produktbeschreibung mithilfe von HTML-Überschriften in mehrere Abschnitte unterteilt wird. Das Accordion-Element zeigt die Abschnitte dann in der vorgegebenen Reihenfolge mithilfe eines benutzerdefinierten Code-Snippets an. Sie können jede Überschriftenebene (H1–H6) verwenden. Das Snippet verwendet Dies ist nur ein Beispiel, Sie können es aber durch die Überschrift ersetzen, die Sie in Ihrer Produktbeschreibung verwenden.
Schritt 1: Produktbeschreibung in Shopify vorbereiten
- Gehen Sie zu Shopify Admin → Produkte → öffnen Sie Ihr Produkt.
- Teilen Sie Ihren Inhalt im Feld „Beschreibung“ in separate Abschnitte auf.
- Fügen Sie vor jedem Abschnitt eine Überschriften-Tag ein. Sie müssen durchgehend denselben Überschriftentyp (H1–H6) verwenden. Der Code erkennt die verwendete Überschriften-Tag automatisch.
Beispielstruktur:
Material
Einzelheiten zum Material…
Größenratgeber
Größenangaben…
Garantie
Garantieinformationen…
Wenn Sie H2, H3, H5 usw. bevorzugen, ersetzen Sie einfach Fügen Sie Ihre bevorzugte Überschriften-Tag ein und passen Sie den Code später an.
Schritt 2: Ein Akkordeon-Element in GemPages hinzufügen
- Öffnen Sie den GemPages-Editor (V7).
- Ziehen Sie das Akkordeon-Element per Drag & Drop auf Ihre Seite.
- Erstellen Sie so viele Akkordeon-Elemente wie nötig. Jedes Element zeigt einen Abschnitt Ihrer Produktbeschreibung an.
Schritt 3: Fügen Sie den benutzerdefinierten Codeausschnitt ein
Sie fügen denselben Codeabschnitt in jedes Akkordeon-Element ein. Anschließend ändern Sie für jeden Tab lediglich den Wert von secNum, je nachdem, welchen Abschnitt Sie anzeigen möchten.
So fügen Sie es ein:
1. Wählen Sie ein Akkordeon-Element aus.
2. Öffnen Sie in der linken Seitenleiste Inhalt → Benutzerdefinierter Code.
3. Fügen Sie den vollständigen Codeausschnitt ein.
|
{% assign secNum = 2 %} {% assign descSec = product.description | split: ' ' %} {% assign gPDCount = 0 %} {% assign chosenDescSec = ” %} {% for sec in descSec %} {% assign testDescSec = sec | split: ' ' %} {% if testDescSec[1] %} {% assign testDescSec = testDescSec[1] %} {% anders %} {% assign testDescSec = testDescSec[0] %} {% endif%}
{% assign checkSec = testDescSec | strip_html %} {% assign checkSec = checkSec | strip %}
{% assign isMediaSec = false %} {% if testDescSec contains 'img' or testDescSec contains 'video' or testDescSec contains 'iframe' %} {% if testDescSec contains 'src' %} {% assign isMediaSec = true %} {% endif%} {% endif%}
{% if checkSec != ” or isMediaSec %} {% assign gPDCount = gPDCount | plus: 1 %} {% if gPDCount == secNum %} {% assign chosenDescSec = testDescSec %} {% brechen %} {% endif%} {% endif%} {% endfor%}
{% if chosenDescSec %} {{ chosenDescSec | strip }} {% anders %} {{ product.description | strip }} {% endif%} |
Schritt 4: Überschrift anpassen
Der Code verwendet als Beispiel, weil es die am häufigsten verwendete Überschrift in Produktbeschreibungen ist.
Wenn Ihre Produktbeschreibung eine andere Überschrift verwendet, ersetzen Sie diese. mit Ihrem Überschriften-Tag innerhalb dieses Teils:
{% assign descSec = product.description | split: '' %}
Beispiele:
Wenn Ihre Shopify-Beschreibung verwendet , ändern in:
{% assign descSec = product.description | split: '' %}
Wenn Ihre Beschreibung verwendet , ändern in:
{% assign descSec = product.description | split: '' %}
Schritt 5: Legen Sie die Abschnittsnummer für jedes Akkordeonelement fest.
Die Variable secNum steuert, welcher Abschnitt in jedem Akkordeon-Element angezeigt wird.
Beispielsweise:
Akkordeon-Registerkarte 1 → secNum = 1
Akkordeon-Registerkarte 2 → secNum = 2
Akkordeon-Registerkarte 3 → secNum = 3
Um diese Nummer zu bearbeiten, ändern Sie diesen Teil:
{% assign secNum = 1 %}
Ändern Sie nur die Zahl für jeden Tab.
Schritt 6: Speichern und Vorschau
- Klicken Sie im GemPages-Editor auf „Speichern“.
- Vorschau Ihrer Produktseite.
- Bitte prüfen Sie, ob für jeden Akkordeon-Eintrag der richtige Abschnitt Ihrer Produktbeschreibung angezeigt wird.
Vielen Dank für Ihre Kommentare