> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://supr-bundles-and-subscriptions.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# So aktivierst du das Abonnement-Widget im Onlineshop

| Du erreichst diese Seite über [**Supr Bundles & Subscriptions > Design**](https://admin.shopify.com/apps/super-subscriptions/app/widget)

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](#3-video-anleitung)
* [Schritt-für-Schritt-Anleitung](#3-schritt-fur-schritt-anleitung)
* [Wo das Widget erscheint](#3-wo-das-widget-erscheint)
* [Eine genaue Position wählen](#3-eine-genaue-position-wahlen)
* [Das Widget auf anderen Seiten anzeigen](#3-das-widget-auf-anderen-seiten-anzeigen)
* [Schnellkauf- und Schnellansicht-Popups](#3-schnellkauf-und-schnellansicht-popups)
* [PageFly und andere Page Builder](#3-pagefly-und-andere-page-builder)
* [Einrichtung in einem unveröffentlichten Theme](#3-einrichtung-in-einem-unveroffentlichten-theme)
* [Fehlerbehebung](#3-fehlerbehebung)
* [Häufige Fragen](#3-haufige-fragen)
* [Verwandte Anleitungen](#3-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.

${frame}[](https://www.youtube.com/embed/UpHcV7CoYVg)

### Schritt-für-Schritt-Anleitung

1. Öffne in deinem Shopify-Adminbereich **Supr Bundles & Subscriptions** und gehe zu **Design**.
2. 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).
3. 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](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/screenshot-2025-07-12-at-19571_gm3jkw.png =757xauto)
4. 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](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/5c6ce361-b562-467d-bf5c-f57834_bnt2do.png)
5. 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)**.

### Wo das Widget erscheint

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](#3-eine-genaue-position-wahlen).

* 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“:**

1. Gehe in der App zu **Design**. Der Abschnitt **Platzierung** erscheint, sobald das Widget aktiviert ist (siehe die Schritte oben).
2. 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.
3. 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:

1. Gehe zu **Onlineshop > Themes** und klicke auf **Anpassen**.
2. Öffne über die Vorlagenauswahl oben im Editor eine Produktseite (zum Beispiel **Produkte > Standardprodukt**).
3. Klicke im Abschnitt mit den Produktinformationen auf **Block hinzufügen**, dann auf **Apps** und dann auf **Subscriptions + Bundles**.
4. 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“.

### Das Widget auf anderen Seiten anzeigen

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.

1. Öffne in deinem Theme-Editor die gewünschte Seite.
2. Füge einen Abschnitt hinzu, der ein Produkt zeigt. Die meisten Themes nennen ihn **Vorgestelltes Produkt**.
3. Klicke in diesem Abschnitt auf **Block hinzufügen**, dann auf **Apps** und dann auf **Subscriptions + Bundles**.
4. 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**.
5. Behalte den eigenen Block **Kauf-Buttons** des Abschnitts. Das Widget verwendet diese Schaltfläche „In den Warenkorb“.
6. 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)](https://supr-bundles-and-subscriptions.crisp.help/de/article/creating-subscription-invitations-quick-subscribe-links-1vgl8ss/).

### 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](#3-eine-genaue-position-wahlen) 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:**

1. Ö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.
2. Folge dem Hinweis von PageFly, um den Theme-Editor zu öffnen, und klicke dann auf **Block hinzufügen**, **Apps**, **Subscriptions + Bundles**.
3. Klicke auf den Block und setze sein **Produkt** auf das Produkt, auf das dein Angebot abzielt.
4. 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](https://help.pagefly.io/page-structure-and-elements/shopify-elements/custom-content/how-to-use-shopify-app-block-element-with-pagefly-section).

**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:

1. Gehe zu **Onlineshop > Themes**, suche das Theme und klicke auf **Anpassen** (oder **Theme bearbeiten**).
2. Öffne **App-Einbettungen**, schalte **Supr Bundle & Subscriptions** ein und klicke auf **Speichern**.
3. 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](https://supr-bundles-and-subscriptions.crisp.help/de/article/the-subscription-widget-is-not-displayed-in-my-store-1fvp4wc/) durch. Erscheint es doppelt oder an der falschen Stelle, siehe [Das Abonnement-Widget erscheint doppelt oder unten auf der Seite](https://supr-bundles-and-subscriptions.crisp.help/de/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-mmfknd/).

### 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](#3-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](https://supr-bundles-and-subscriptions.crisp.help/de/article/what-shoppers-see-in-the-cart-and-at-checkout-16sxmpe/#3-im-checkout-zu-einem-abonnement-wechseln-shopify-plus). Siehe [Warenkorb-Upsell](https://supr-bundles-and-subscriptions.crisp.help/de/article/product-page-add-ons-6tqow3/#3-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](#3-eine-genaue-position-wahlen).

**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](https://supr-bundles-and-subscriptions.crisp.help/de/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-mmfknd/).

### Verwandte Anleitungen

* [[Videoanleitung] So aktivierst du die APP-EINBETTUNG](https://supr-bundles-and-subscriptions.crisp.help/de/article/video-guide-how-to-enable-app-embed-lyoczq/)
* [Das Abonnement-Widget](https://supr-bundles-and-subscriptions.crisp.help/de/article/the-subscription-widget-2fgv0c/)
* [Das Abonnement-Widget wird in meinem Shop nicht angezeigt](https://supr-bundles-and-subscriptions.crisp.help/de/article/the-subscription-widget-is-not-displayed-in-my-store-1fvp4wc/)
* [Das Abonnement-Widget erscheint doppelt oder unten auf der Seite](https://supr-bundles-and-subscriptions.crisp.help/de/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-mmfknd/)
* [Abonnement-Einladungen erstellen (Schnell-Abo-Links)](https://supr-bundles-and-subscriptions.crisp.help/de/article/creating-subscription-invitations-quick-subscribe-links-1vgl8ss/)
* [Was mit dem Widget-Editor passiert ist](https://supr-bundles-and-subscriptions.crisp.help/de/article/what-happened-to-the-widget-editor-1qeawln/)