Wenn in Ihrem Shop das Tabs in der Produktbeschreibung eingebaut wurde, finden Sie hier wichtige Infos zu den durchgeführten Änderungen und wie Sie sie nutzen.

Standardmäßig ist die Darstellung von Tabs deaktiviert. Um sie zu aktivieren, öffnen Sie den Theme-Konfigurator, navigieren Sie dann zu einer Produktdetailseite und aktivieren Sie dann die Tabs in der Produktbeschreibung:

Tabs in der Produktbeschreibung aktivieren

Um in einer Produktbeschreibung Tabs zu verwenden, gehen Sie wie folgt vor:

  • Geben Sie die Produktbeschreibung und alle gewünschten Zusatzinformationen wie gewohnt ein.
  • Fügen Sie vor jedem Abschnitt, der als Tab dargestellt werden soll, eine Überschrift der 6. Ebene ein, wie im nachfolgenden Screenshot zu sehen:

  • Speichern Sie das Produkt.

Optional: Text unterhalb der Tabs

Wenn Sie unterhalb der Tabs weitere Inhalte anzeigen möchten, gehen Sie wie folgt vor:

  • Wechseln Sie im Editor in den HTML-Modus, indem Sie in der rechten oberen Ecke auf den <> Button klicken.
  • Fügen Sie dann oberhalb des Textes, der nach den Tabs erscheinen soll, den folgenden HTML-Code ein: <!-- ENDTABS -->

Sämtliche Inhalte, die nach <!-- ENDTABS --> folgen, werden in der Produktbeschreibung unterhalb der Tabs angezeigt.

WICHTIG:

  • Achten Sie darauf, in Ihren Produktbeschreibungen ansonsten an keiner Stelle Überschriften der 6. Ebene zu verwenden, da diese immer als Tab interpretiert werden.
  • Sämtliche Inhalte, die auf eine Überschrift der 6. Ebene folgen, werden im jeweiligen Tab dargestellt. Es ist also nicht möglich, unterhalb der Tabs Inhalte darzustellen, nicht nicht in einem Tab platziert sind.

Probleme lösen

Auf Grund der Funktionsweise des Editors, den Shopify im Admin für Produktbeschreibungen verwendet, kann es gelegentlich zu Darstellungsproblemen kommen. Dieses rühren i. d. R. daher, dass der Editor unerwünschten HTML-Code erzeugt. Um die Darstellungsprobleme zu lösen, muss daher in aller Regel der HTML-Code manuell korrigiert werden. Wechseln Sie hierzu im Editor in den HTML-Modus, indem Sie in der rechten oberen Ecke auf den <> Button klicken, und folgende Sie dann den nachfolgenden Anweisungen.

Es werden leere Tabs ohne Bezeichung/Titel angezeigt

Die Ursache hierfür ist meist ein leerer <h6></h6> HTML Tag, der vom Editor erzeugt wurde. Durchsuchen Sie den HTML-Code der Produktbeschreibung also nach einem solchen Tag und löschen Sie ihn einfach. Danach sollte der leere Tab verschwinden.