Artikel über: Widgets

So aktivierst du das Abonnement-Widget im Onlineshop

Du erreichst diese Seite über Supr Bundles & Subscriptions > Design

Mit dem Widget wählen deine Kunden auf deinen Produktseiten ein Abonnement oder ein Bundle aus. Ein Widget zeigt beides: deine Abonnementoptionen und deine Bundle-Optionen. Um es einzuschalten, klicke auf der Seite Design auf Widget aktivieren und dann in deinem Theme-Editor auf Speichern. Es gibt keinen Code, Einbettungscode oder Snippet zum Einfügen.

Inhaltsverzeichnis

Video-Anleitung
Schritt-für-Schritt-Anleitung
Wo das Widget erscheint
Eine genaue Position wählen
Das Widget auf anderen Seiten anzeigen
Schnellkauf- und Schnellansicht-Popups
PageFly und andere Page Builder
Einrichtung in einem unveröffentlichten Theme
Fehlerbehebung
Häufige Fragen
Verwandte Anleitungen

Video-Anleitung

Wenn du lieber zuschaust als liest: Dieses Video zeigt, wie die App-Einbettung im Theme-Editor eingeschaltet wird. Genau diesen Schalter schaltet Widget aktivieren für dich ein.

Schritt-für-Schritt-Anleitung

Öffne in deinem Shopify-Adminbereich Supr Bundles & Subscriptions und gehe zu Design.
Ist das Widget noch nicht eingeschaltet, siehst du ein Banner Deine Widgets sind noch nicht live. Klicke auf Widget aktivieren (im Banner oder oben auf der Seite).
Klicke im sich öffnenden Fenster auf Aktivieren. Dein Theme-Editor öffnet sich in einem neuen Tab, und unter App-Einbettungen ist Supr Bundle & Subscriptions eingeschaltet.

Schaltfläche Aktivieren

Klicke im Theme-Editor oben rechts auf Speichern. Bis du das tust, zeigt der Editor die Erinnerung One more step. Wenn du den Editor ohne Speichern schließt, bleibt das Widget aus.

Schaltfläche Speichern im Theme-Editor

Wechsle zurück zum Tab der App. Du siehst Widget aktiviert, sobald die App den gespeicherten Schalter gefunden hat. Steht dort Widget nicht aktiviert, klicke erneut auf Aktivieren und achte darauf, diesmal auf Speichern zu klicken.

Du kannst auch auf der Startseite beginnen: Der Schritt Widget aktiviert der Einrichtungsanleitung (oder Abonnement-Widget aktiviert / Bundle-Widget aktiviert, je nachdem, was du verkaufst) hat dieselbe Schaltfläche Widget aktivieren. Sobald das Widget eingeschaltet ist, wird daraus Widget anpassen, und sie führt dich zu Design.

Lieber von Hand? Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes, klicke bei deinem Live-Theme auf Anpassen, öffne App-Einbettungen (das Symbol unten in der linken Seitenleiste), schalte Supr Bundle & Subscriptions ein und klicke auf Speichern. In älteren Versionen der App hieß dieser Schalter Subscriptions (1.0 themes only).

Du musst nichts verschieben. Das Widget platziert sich auf deinen Produktseiten selbst direkt über der Schaltfläche „In den Warenkorb“, und es funktioniert in jedem Theme gleich, auch in älteren (Vintage-)Themes. Wie du es woanders platzierst, erfährst du unter Eine genaue Position wählen.

Es erscheint auf jeder Produktseite, deren Produkt in einem veröffentlichten Angebot ist, unabhängig davon, welche Produktvorlage das Produkt verwendet.
Deine Bundle-Optionen stehen direkt neben den Abonnementoptionen. Ob die Bundle-Optionen darüber oder darunter stehen, legst du unter Design > Elemente > Seitenlayout > Bundle oben fest.
Den Abstand über und unter dem Widget legst du unter Design > Abstände > Um das Widget fest.
Das Widget hat keine eigene Schaltfläche „In den Warenkorb“. Es verwendet die deines Themes, deshalb braucht deine Produktseite den Block Kauf-Buttons des Themes.

Eine genaue Position wählen

Es gibt zwei Wege, das Widget zu verschieben: die Einstellung Platzierung auf der Seite Design, die für alle Produktseiten auf einmal gilt (ein gespeichertes Design hat eine eigene Platzierung für die Angebote, die es verwenden), oder den Block Subscriptions + Bundles, den du genau dorthin ziehst, wo du ihn haben möchtest.

Mit der Einstellung „Platzierung“:

Gehe in der App zu Design. Der Abschnitt Platzierung erscheint, sobald das Widget aktiviert ist (siehe die Schritte oben).
Wähle eine Position auf der Produktseite:
- Über der Schaltfläche In den Warenkorb (automatisch): die Standardeinstellung.
- Unter den Kauf-Buttons: unter der Schaltfläche „In den Warenkorb“ und den Express-Checkout-Schaltflächen wie „Jetzt kaufen“.
- Über der Mengenauswahl: über dem Mengenfeld. Zeigt dein Theme die Menge in derselben Zeile wie die Schaltfläche „In den Warenkorb“, kommt das Widget über diese Zeile.
- Benutzerdefiniert (CSS-Selektor): an einer beliebigen Stelle der Seite. Gib unter CSS-Selektor einen CSS-Selektor für ein Element deiner Produktseite ein, zum Beispiel .product__title, und wähle unter Widget platzieren, ob das Widget vor oder nach diesem Element oder darin am Anfang oder am Ende stehen soll.
Klicke auf Speichern.

Gibt es die gewählte Position auf einer Seite nicht (zum Beispiel eine Produktseite ohne Mengenauswahl oder ein Selektor, der nichts findet), fällt das Widget auf seine automatische Position über „In den Warenkorb“ zurück, sodass es nie verschwindet. Die Einstellung gilt für jedes Theme, in dem du das Widget aktivierst.

Du weißt nicht, welchen CSS-Selektor du verwenden sollst? Wende dich mit einem Link zu deiner Produktseite und der gewünschten Position an den Support, und wir schicken dir einen.

Mit dem Block: Wenn das Widget an einer genauen Stelle stehen soll, zum Beispiel unter dem Preis oder unter einer Bewertungszeile, füge den Block Subscriptions + Bundles dort hinzu, wo du ihn haben möchtest:

Gehe zu Onlineshop > Themes und klicke auf Anpassen.
Öffne über die Vorlagenauswahl oben im Editor eine Produktseite (zum Beispiel Produkte > Standardprodukt).
Klicke im Abschnitt mit den Produktinformationen auf Block hinzufügen, dann auf Apps und dann auf Subscriptions + Bundles.
Zieh den Block an die gewünschte Stelle für das Widget und klicke auf Speichern.

Lass die App-Einbettung eingeschaltet. Wo immer ein Block Subscriptions + Bundles auf der Seite ist, entfernt sich die Kopie der Einbettung selbst, sodass du dadurch nie zwei Widgets erhältst.

Ein Block gehört zur Vorlage, nicht zu einem einzelnen Produkt. Verschiebst du ihn, verschiebt sich das Widget bei jedem Produkt, das diese Vorlage verwendet. Wenn deine Produkte mehr als eine Produktvorlage verwenden, wiederhole das bei jeder Vorlage, in der du die neue Position möchtest. Vorlagen ohne Block behalten die automatische Position über „In den Warenkorb“.

Du kannst auch auf einer Seite verkaufen, die nicht die eigene Seite des Produkts ist, etwa auf einer Landingpage, einer Kategorieseite, deiner Startseite oder in einem Blogbeitrag. Dort erscheint das vollständige Widget mit denselben Bundle-Optionen, Abonnementoptionen und demselben Design, das du auf der Seite Design eingerichtet hast.

Öffne in deinem Theme-Editor die gewünschte Seite.
Füge einen Abschnitt hinzu, der ein Produkt zeigt. Die meisten Themes nennen ihn Vorgestelltes Produkt.
Klicke in diesem Abschnitt auf Block hinzufügen, dann auf Apps und dann auf Subscriptions + Bundles.
Klicke auf den Block und lege sein Produkt fest. Außerhalb einer Produktseite kann der Block nicht erkennen, welches Produkt du meinst, deshalb musst du es ihm sagen. Bis dahin zeigt der Theme-Editor Nothing to show yet: this block has no product selected.
Behalte den eigenen Block Kauf-Buttons des Abschnitts. Das Widget verwendet diese Schaltfläche „In den Warenkorb“.
Klicke auf Speichern.

Du kannst mehr als einen auf derselben Seite platzieren. Jeder behält seine eigenen Optionen und Preise, und die Schaltfläche „In den Warenkorb“ jedes Produkts übernimmt die Auswahl, die der Kunde für dieses Produkt getroffen hat.

Die App-Einbettung allein zeigt das Widget nur auf Produktseiten. Für alle anderen Seiten verwendest du den Block wie oben beschrieben.

Eine weitere Möglichkeit für eine Schaltfläche, ein Banner oder eine E-Mail ist ein Schnell-Abo-Link: Wachstum > Schnell-Abo-Links erstellt einen Link, der direkt zum Checkout führt, in dem Produkt und Abonnement bereits ausgewählt sind. Siehe Abonnement-Einladungen erstellen (Schnell-Abo-Links).

Schnellkauf- und Schnellansicht-Popups

Viele Themes haben auf Produktkarten in Kategorien und auf der Startseite eine Schaltfläche für Schnellkauf oder Schnellansicht. Ob das Widget dort erscheint, hängt vom Theme ab:

Themes, deren Popup das vollständige Produktformular lädt (zum Beispiel Dawn mit dem Standard-Schnellkauf): Das Widget und die Bundle-Optionen erscheinen im Popup, wenn der Block Subscriptions + Bundles in deiner Produktvorlage ist. Füge ihn wie unter Eine genaue Position wählen beschrieben hinzu.
Horizon und darauf aufbauende Themes: Bei einem Produkt mit Abonnement öffnet die Schnellkauf-Schaltfläche statt eines Popups die Produktseite, und dort ist das Widget wie gewohnt.
Andere Themes: Zeigt das Popup kein oder ein fehlerhaftes Widget, schalte den Schnellkauf im Theme-Editor aus (meist eine Einstellung im Abschnitt mit dem Kategorie- oder Produktraster), damit Kunden zur Produktseite gelangen, oder wende dich an den Support, und wir prüfen dein Theme.

PageFly und andere Page Builder

Es gibt keine Widget-ID, keinen Shortcode und keinen Einbettungscode, und Code in ein Custom-Code- oder HTML-Element einzufügen funktioniert nicht. Das Widget ist ein Shopify-App-Block, und Shopify erlaubt es nur, App-Blöcke über den Theme-Editor hinzuzufügen. Page Builder unterstützen das mit ihrem eigenen App-Block-Element.

Auf einer PageFly-Produktseite musst du nichts tun. Mit aktivierter App-Einbettung (siehe die Schritte oben) platziert sich das Widget selbst über der Schaltfläche „In den Warenkorb“, genau wie auf einer Produktseite des Themes.

Auf einer PageFly-Landingpage:

Öffne im PageFly-Editor deine Seite und zieh das Element App blocks (unter Shopify elements) an die Stelle, an der das Widget stehen soll. PageFly erlaubt ein App-blocks-Element pro Seite, und es braucht ein Online Store 2.0-Theme.
Folge dem Hinweis von PageFly, um den Theme-Editor zu öffnen, und klicke dann auf Block hinzufügen, Apps, Subscriptions + Bundles.
Klicke auf den Block und setze sein Produkt auf das Produkt, auf das dein Angebot abzielt.
Stelle sicher, dass die Seite auch die PageFly-Schaltfläche „In den Warenkorb“ für dasselbe Produkt hat, und speichere und veröffentliche dann.

Die eigene Anleitung von PageFly zu diesem Element: How to use the App blocks element.

GemPages, Shogun und andere Builder funktionieren genauso: Produktseiten erhalten das Widget über die App-Einbettung, und andere Seiten brauchen das Element des Builders für Shopify-App-Blöcke, dem Subscriptions + Bundles hinzugefügt wird. Wenn dein Builder den Block nicht aufführt, wende dich an den Support.

Sobald deine Seite live ist, lege das Produkt mit ausgewähltem Abonnement in den Warenkorb und prüfe, ob der Warenkorb es anzeigt. Falls nicht, schick uns den Link zur Seite, und wir platzieren das Widget für dich.

Einrichtung in einem unveröffentlichten Theme

Widget aktivieren öffnet immer dein Live-Theme (das veröffentlichte). So richtest du zuerst ein anderes Theme ein und testest es:

Gehe zu Onlineshop > Themes, suche das Theme und klicke auf Anpassen (oder Theme bearbeiten).
Öffne App-Einbettungen, schalte Supr Bundle & Subscriptions ein und klicke auf Speichern.
Sieh dir dieses Theme in der Vorschau an und öffne ein Produkt, das in einem deiner Angebote ist.

Das Widget erscheint nur in Themes, in denen es eingeschaltet ist, dein Live-Theme bleibt also unverändert, bis du es dort ebenfalls einschaltest. Deine Angebote gelten für alle Themes: Sobald das Widget in deinem Live-Theme eingeschaltet ist, erscheint dort jedes veröffentlichte Angebot.

Fehlerbehebung

Wenn das Widget nach dem Speichern nicht erscheint, prüfe, ob der Theme-Editor erfolgreich gespeichert hat. Du kannst erneut auf Widget aktivieren klicken, um es noch einmal zu versuchen.

Wenn du das Widget weiterhin nicht auf deinen Produktseiten siehst, geh die Anleitung Das Abonnement-Widget wird in meinem Shop nicht angezeigt durch. Erscheint es doppelt oder an der falschen Stelle, siehe Das Abonnement-Widget erscheint doppelt oder unten auf der Seite.

Häufige Fragen

Gibt es einen Einbettungscode oder ein Liquid-Snippet, das ich meinem Theme hinzufügen muss?
Nein. Design > Widget aktivieren schaltet das Widget in deinem Theme ein, und du klickst im Theme-Editor auf Speichern. Es muss nichts eingefügt werden.

Ich habe auf „Widget aktivieren“ geklickt, aber in meinem Shop hat sich nichts geändert. Warum?
Fast immer wurde der Theme-Editor ohne Klick auf Speichern geschlossen. Klicke erneut auf Widget aktivieren und oben rechts im Theme-Editor auf Speichern.

Brauche ich die App-Einbettung und den App-Block?
Du brauchst die App-Einbettung. Der Block Subscriptions + Bundles ist optional: Füge ihn nur hinzu, um eine genaue Position zu wählen oder das Widget auf einer Seite anzuzeigen, die keine Produktseite ist. Wenn du beides verwendest, erscheint das Widget nie doppelt.

Der Theme-Editor meldet, dass der App-Block nicht hinzugefügt werden konnte. Was tun?
Verwende stattdessen die App-Einbettung: Design > Widget aktivieren, dann Speichern. Die Einbettung braucht keinen Platz in deinem Produktabschnitt und funktioniert daher auch in Themes, deren Produktabschnitt keine App-Blöcke annimmt.

Muss ich das Widget jedem Produkt hinzufügen?
Nein. Das Widget erscheint bei jedem Produkt, das in einem veröffentlichten Angebot ist. Die Produkte wählst du im Angebot unter Gilt für, nicht im Theme.

Kann ich das Widget auf meiner Startseite oder einer Landingpage anzeigen?
Ja. Füge einen Abschnitt Vorgestelltes Produkt hinzu, füge ihm den Block Subscriptions + Bundles hinzu und lege sein Produkt fest. Siehe Das Widget auf anderen Seiten anzeigen.

Können Kunden auf der Warenkorbseite ein Abonnement wählen?
Ja, mit dem Add-on Warenkorb-Upsell auf der Seite Design: Eine Schaltfläche Abonnieren und sparen unter jedem einmalig gekauften Produkt, auf der Warenkorbseite und im Warenkorb-Drawer, stellt dieses Produkt auf seine erste Abonnementoption um. Um eine andere Häufigkeit zu wählen, entscheiden sich Kunden auf der Produktseite. Bei Shopify Plus können sie mit dem Checkout Subscription Picker auch im Checkout wechseln, siehe Im Checkout zu einem Abonnement wechseln. Siehe Warenkorb-Upsell.

Kann ich das Widget stattdessen unter die Schaltfläche „In den Warenkorb“ setzen?
Ja. Setze auf der Seite Design Platzierung > Position auf der Produktseite auf Unter den Kauf-Buttons und klicke auf Speichern. Siehe Eine genaue Position wählen.

Wie verschiebe ich das Widget über die Schaltfläche „In den Warenkorb“?
Bei eingeschalteter App-Einbettung steht es von selbst dort. Steht es woanders, siehe Das Abonnement-Widget erscheint doppelt oder unten auf der Seite.