Widgets ​

Mit Widgets kannst du ganz einfach voraussichtliche Liefertermine in deinem Shop anzuzeigen.

Widgets können auf verschiedenen Seiten und Abschnitten eingebunden werden, z. B. auf Produktseiten, in Kategorien und im Warenkorb.

Themes mit Unterstützung für App-Blöcke (Online Store 2.0) können Widgets im Shopify-Theme-Editor über den Delm Widget Block einbinden. Alternativ können Widgets auch durch Hinzufügen von Code eingebunden werden.

Widgets erstellen ​

In Delm kannst du beliebig viele Widgets erstellen, um verschiedene Anwendungsfälle abzudecken. Hier sind einige Möglichkeiten:

• Ein detailliertes Widget für deine Produktseiten, das alle relevanten Informationen anzeigt.
• Ein vereinfachtes Widget für deinen Warenkorb und deine Kategorien, das eine übersichtliche Darstellung bietet.
• Verschiedene Versionen eines Widgets, um A/B-Tests mit unterschiedlichen Designs oder Inhalten durchzuführen.

Widget-ID ​

Alle Widgets erhalten eine eindeutige und dauerhafte ID, die nicht geändert werden kann. Diese ID dient als Referenz und ermöglicht es dir, bestimmte Widgets in verschiedenen Bereichen deines Shops zu laden.

Widget-Status ​

Der Status eines Widgets bestimmt dessen Sichtbarkeit für Kunden.

• Entwurf: Widgets im Entwurfsstatus sind nur sichtbar, wenn sie über den Shopify-Theme-Editor angezeigt werden. So kannst du eine Vorschau anzeigen und Änderungen am Widget vornehmen, ohne dass deine Kunden es zu sehen bekommen.
• Aktiv: Wenn ein Widget in den aktiven Status gesetzt wird, wird es für Kunden sichtbar.

Widget-Inhalt ​

Du hast die volle Kontrolle über den Inhalt des Widgets. Jeder Aspekt des Inhalts kann nach deinen Wünschen angepasst werden. Der Inhalt des Widgets kann für jede Sprache separat bearbeitet werden, was es ideal für mehrsprachige Shops macht.

Um dynamische Inhalte, wie z. B. das voraussichtliche Lieferdatum, einzubinden, kannst du Platzhalter wie {delivery_date} verwenden. Diese Platzhalter können einfach in die Inhaltsfelder des Widgets eingefügt werden. Eine umfassende Liste der verfügbaren Platzhalter findest du unter jedem Feld.

Beispiele ​

Besuche unseren Demo-Shop, um Widgets in Aktion zu sehen und zu erfahren, wie sie angepasst werden können. Der Code für jedes Beispiel ist auf GitHub verfügbar.

Widgets ins Theme einbinden ​

Widgets können entweder über den App-Block Delm Widget oder durch Hinzufügen von Code zu den Liquid-Templates eingebunden werden.

Folge diesen Schritten, um Widgets zu integrieren:

1. Erstelle ein Widget.
2. Aktiviere die Delm Core App-Einbettung.
3. Füge den Delm Widget App-Block zu deinem Theme-Abschnitt hinzu.
4. Füge Code zu deinem Liquid-Template hinzu, wenn dein Theme keine App-Blöcke unterstützt.

App-Einbettung aktivieren ​

Folge diesen Schritten, um Delm Core zu aktivieren:

1. Gehe in deinem Shopify-Konto zu Vertriebskanäle > Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest, und klicke auf Anpassen.
3. Klicke im Anpassungsfenster auf die Registerkarte App-Einbettungen.
4. Aktiviere die Option für Delm Core.
5. Vergiss nicht, deine Änderungen zu speichern, indem du auf Speichern klickst.

Widgets über App-Block einbinden ​

Mit dem Delm Widget-Block können Widgets einfach über den visuellen Shopify-Theme-Editor eingebunden werden, ohne dass Programmierkenntnisse erforderlich sind.

So kannst du Delm-Widgets mit dem App-Block einbinden:

1. Aktiviere die Delm Core App-Einbettung, wie in der vorherigen Dokumentation beschrieben.
2. Gehe in deinem Shopify-Konto zu Vertriebskanäle > Onlineshop > Themes.
3. Suche das Theme, das du bearbeiten möchtest, und klicke auf Anpassen.
4. Suche den Bereich deines Shops, in dem du das Widget einbinden möchtest, und klicke auf Block hinzufügen.
5. Suche nach dem Block Delm Widget im Abschnitt Apps.
6. Vergiss nicht, deine Änderungen zu speichern, indem du auf Speichern klickst.

Bitte beachte jedoch, dass es bei der Verwendung von Blöcken zu Einschränkungen bei der Positionierung kommen kann. Diese Einschränkungen lassen sich umgehen, indem der Widget-Code manuell in das Liquid-Template eingefügt wird.

Widgets über Code einbinden ​

Das HTML-Element <delm-widget> kann zu jedem Liquid-Template hinzugefügt werden und bietet somit unzählige Möglichkeiten bei der Einbindung von Widgets. Dieses HTML-Element ist verfügbar, wenn du die Delm Core App-Einbettung aktiviert hast.

Attribute des Widget-Elements ​

Diese optionalen Attribute werden von <delm-widget> unterstützt:

• data-widget-id zum Laden eines bestimmten Widgets anhand seiner eindeutigen ID
• data-variant-id um eine Produktvariante mit diesem Widget zu verknüpfen, damit produktspezifische Daten angezeigt werden.
• data-watch-variant-id-selector um das Widget zu aktualisieren, wenn sich die aktive Produktvariante ändert. Gebe den eindeutigen Selektor für das Eingabeelement an, das die aktuelle Varianten-ID enthält.

Code-Beispiel ​

<delm-widget
  data-variant-id="{{ product.selected_or_first_available_variant.id }}"
  data-watch-variant-id-selector="{{ 'form[action*="/cart/add"] [name="id"]' | escape }}"
></delm-widget>

A/B-Tests für Widgets ​

Um A/B-Tests für Widgets durchzuführen, kannst du dein bevorzugtes A/B-Testing-Tool wie VWO verwenden. Dabei fügst du mehrere Widgets zu deiner Seite hinzu und zeigst sie selektiv für verschiedene Testvarianten an.

Das folgende Codebeispiel zeigt, wie du mehrere Widgets mit leicht selektierbaren IDs erstellst:

{% assign variant_id = product.selected_or_first_available_variant.id %}
{% assign watch_variant_id_selector = 'form[action*="/cart/add"] [name="id"]' | escape %}
 
<div id="delm-widget-variant-a" style="display: none;">
  <delm-widget 
    data-widget-id="widget-id-variante-a-eingeben"
    data-variant-id="{{ variant_id }}"
    data-watch-variant-id-selector="{{ watch_variant_id_selector }}"
  ></delm-widget>
</div>
 
<div id="delm-widget-variant-b" style="display: none;">
  <delm-widget 
    data-widget-id="widget-id-variante-b-eingeben"
    data-variant-id="{{ variant_id }}"
    data-watch-variant-id-selector="{{ watch_variant_id_selector }}"
  ></delm-widget>
</div>
 
<!-- Bei Bedarf weitere Varianten hinzufügen  -->

In diesem Beispiel wird jedes Widget in ein <div>-Element mit einer eindeutigen ID eingeschlossen. Das Attribut style="display: none;" sorgt dafür, dass alle Widgets standardmäßig ausgeblendet bleiben.

Durch die IDs der Widget-Container lässt sich die Sichtbarkeit der einzelnen Widgets über dein A/B-Testing-Tool steuern. Auf diese Weise kannst du mit verschiedenen Varianten experimentieren und die effektivste Widget-Präsentation für deine Kunden ermitteln.

Unterstützte Sprachen ​

Bitte kontaktiere uns, wenn du eine Sprache benötigst, die unten nicht aufgeführt ist.

Erkennung der Sprache ​

Delm liest den Sprachcode des Shops aus der window.Shopify.locale JavaScript-Variable und wandelt ihn in ISO 639-1 um. Zum Beispiel wird en-US in en umgewandelt.