--- title: "Abo-Widget: Subscriptions-Doku | Chargezen" description: "Füge das Abo-Widget von Chargezen deinen Shopify-Produktseiten hinzu, wähle eine Vorlage, lege Texte und Aussehen fest und ergänze Angebote vor dem Hinzufügen zum Warenkorb." url: "https://chargezen.com/de/docs/subscriptions/subscription-widget" lang: "de" updated: "2026-10-18" --- Canonical URL: https://chargezen.com/de/docs/subscriptions/subscription-widget # Abo-Widget Füge das Abo-Widget von Chargezen deinen Shopify-Produktseiten hinzu, wähle eine Vorlage, lege Texte und Aussehen fest und ergänze Angebote vor dem Hinzufügen zum Warenkorb. Zuletzt aktualisiert: 2026-10-18 Das Abo-Widget ist die Kaufbox auf deinen Produktseiten, in der Käufer zwischen Einmalkauf und Abo wählen, einen Lieferrhythmus aussuchen und in den Warenkorb legen. Hier beginnen die meisten Abos, deshalb lohnt es sich, es klar zu gestalten. Öffne **Subscriptions → Customer experience → Subscription widget**. ## Einrichten 1 #### Widget erstellen Wähle **Create widget** und dann **Use template** bei **Product widget** (eine kompakte Kaufbox für jede Produktseite) oder **Variant cards** (Variantenkarten, Einmalkauf oder Abo und Angebote vor dem Hinzufügen zum Warenkorb). 2 #### Texte und Aussehen bearbeiten Geh die Bereiche des Editors durch (Content, Layout, Behavior, Style und weitere). Wähle mit **Previewing** ein Produkt und prüfe mit den Schaltflächen für Desktop und Mobil beide Größen. 3 #### Festlegen, wo es erscheint Gib unter **Publish** einen **Widget name** ein (nur du siehst ihn) und setze **Show on** auf **All products** oder **Specific products**. 4 #### Speichern Wähle **Save**. 5 #### Block zu deinem Theme hinzufügen Wähle unter **On your store** die Option **Add the block in Shopify**. Öffne in Shopify **Online Store → Themes → Customize**, öffne eine Produktvorlage, füge den Block **Chargezen product widget** oder **Chargezen variant cards** hinzu und speichere das Theme. Von einem Plan aus starten In der Karte **Storefront widget** eines Plans öffnet **Customize widget** das Widget für die Produkte dieses Plans oder legt ein neues an. ## Optionen des Produkt-Widgets * **Content**: Schaltflächentext (Add to cart, Buy now), Titel und Untertitel der Einmalkauf-Option, Titel, Untertitel und **Delivery selector label** der Abo-Option sowie die Mengenbezeichnung. Anfangs „One-time purchase“, „Subscribe and save“ und „Pause, skip, or cancel anytime.“ * **Layout**: Hersteller, Produkttitel, Preis, Variantenauswahl, Einmalkauf- und Abo-Optionen, Lieferauswahl, Mengenauswahl, Add to cart und Buy now ein- oder ausblenden. * **Behavior**: **Selected by default** (Auto, One-time oder Subscription), **Shown first**, Mengenlimits und ob das Widget Variantenbilder zeigt oder das Produktbild des Themes aktualisiert. * **Rules**: **Allow preorders** mit Bestätigungs-Pop-up, **Confirm before purchase** mit Warnhinweis, **Discount this product** mit Bezeichnung und Prozentrabatt sowie **Offer all variants as a bundle**. * **Style**: Farben und Text der Schaltflächen, Textfarben, Auswahlfarben, Flächen und Rahmen. ## Optionen der Variantenkarten * **Content**: die Karten für Einmalkauf und Abo, Schaltflächentext, Text für „ausverkauft“ und das Währungssymbol. Im Abo-Titel wird `{{savings}}` zum gesparten Betrag. * **Layout**: Preise, Variantenkarten und Spalten sowie welche Karten und Schaltflächen erscheinen. * **Offers**: Füge **Bundle (try them all)**, **Upsell**, **Buy more**, **Sell as another variant** oder **Preorder** hinzu. Jedes hat **Show this offer** und bleibt aus, bis seine Pflichtfelder ausgefüllt sind. Ein Upsell kann bei Ablehnung ein weiteres Angebot zeigen oder nichts. * **Variants**: Karten nach niedrigstem Preis, höchstem Preis oder eigener Reihenfolge sortieren; eine Variante umbenennen, ausblenden oder als ausverkauft anzeigen. * **Behavior**: **Selected by default**; Auto wählt bei Links auf /start und /pay das Abo und überall sonst den Einmalkauf. * **Style** und **Custom CSS**: Farben, Ecken, Typografie und CSS, das nach den eigenen Styles des Widgets geladen wird (beginne Selektoren mit `#ketonaid-widget`). ## Welches Widget ein Produkt verwendet Ein Widget mit **All products** erscheint bei jedem Produkt, außer ein Produkt hat ein eigenes Widget. Enthalten mehrere spezifische Widgets dasselbe Produkt, gewinnt die höhere **Priority**. Die Widget-Liste zeigt für jedes Widget **Type**, **Template**, **Status**, **Scope** und **Offers**. Mit **Filter** zeigst du All, Active oder Draft, und über das Zeilenmenü kannst du **Edit** oder **Delete** wählen. ## Fehlerbehebung ### Das Widget erscheint nicht auf meiner Produktseite * Prüfe, ob der Block zur verwendeten Produktvorlage hinzugefügt ist und ob du das Theme gespeichert hast. * Prüfe, ob das Widget für dieses Produkt oder für All products eingestellt ist. * Prüfe, dass kein anderes Widget mit diesem Produkt eine höhere Priorität hat. ### Das Widget erscheint, aber ohne meine Abo-Option * Der Plan muss Active sein, das Produkt enthalten und den Kanal **Online Store** eingeschaltet haben. Ein Plan, der im Online Store ausgeblendet ist, wird von keinem Widget angeboten. * Füge dem Plan Produkte hinzu, damit Käufer auf deren Produktseiten abonnieren können. ### Das Widget lässt sich nicht speichern Gib dem Widget einen Namen und wähle mindestens ein Produkt oder zeig es bei jedem Produkt. ## Verwandte Artikel * [Upselling und Cross-Selling](https://chargezen.com/de/subscriptions/upsells-and-cross-sells): Mach aus Einmalkäufern Abonnenten. * [Neu bei Abos](https://chargezen.com/de/subscriptions/getting-started): Starte dein erstes Programm. * Glossar: [abonnieren und sparen](https://chargezen.com/glossary/subscribe-and-save), [Produktseite](https://chargezen.com/de/glossary/product-detail-page), [in den Warenkorb](https://chargezen.com/de/glossary/add-to-cart). ### Verwandte Artikel [ #### Abo-Pläne erstellen Die Pläne, die das Widget anbietet ](https://chargezen.com/de/docs/subscriptions/create-product)[ #### So funktionieren Verkaufspläne Warum der Kanal Online Store wichtig ist ](https://chargezen.com/de/docs/subscriptions/selling-plans-explained)[ #### Boxen nach Wahl Eine Box, die Kunden selbst füllen ](https://chargezen.com/de/docs/subscriptions/build-a-box) War diese Seite hilfreich? Brauchst du mehr Hilfe? [Support kontaktieren](https://chargezen.com/docs/checkoutos/troubleshooting/support)