> ## 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). # Das Abonnement-Widget | Diese Seite öffnest du unter [**Supr Bundles & Subscriptions > Design**](https://admin.shopify.com/apps/super-subscriptions/app/widget) Auf der Design-Seite legst du fest, wie deine Abonnement- und Bundle-Widgets auf deinen Produktseiten aussehen: das Design, die Farben, die Ecken und Abstände, welche Teile angezeigt werden, die Texte, die deine Kunden lesen, und dein eigenes CSS. Beide Widgets gestaltest du gemeinsam auf dieser einen Seite, damit sie zueinander und zu deinem Theme passen. Das ist das **einheitliche Widget-Erlebnis**: ein Satz Einstellungen, beide Widgets, jedes Design. Wenn die Seite **Deine Widgets sind noch nicht live** anzeigt, klicke zuerst auf **Widget aktivieren**. Siehe [So aktivierst du das Abonnement-Widget im Onlineshop](https://supr-bundles-and-subscriptions.crisp.help/de/article/how-to-enable-the-subscription-widget-in-the-online-store-1n3vz7z/). ### Inhaltsverzeichnis * [Was ist das Abonnement-Widget?](#3-was-ist-das-abonnement-widget) * [So ist die Seite aufgebaut](#3-so-ist-die-seite-aufgebaut) * [Die Vorschau](#3-die-vorschau) * [Design](#3-design) * [Farben](#3-farben) * [Form](#3-form) * [Abstände](#3-abstande) * [Schrift](#3-schrift) * [Elemente](#3-elemente) * [Überschriften und der Angebotstitel](#3-uberschriften-und-der-angebotstitel) * [Eine Elementzeile lesen](#3-eine-elementzeile-lesen) * [Badges](#3-badges) * [Standardfarben und eigene Farben](#3-standardfarben-und-eigene-farben) * [Preise](#3-preise) * [Die Reihenfolge der Elemente](#3-die-reihenfolge-der-elemente) * [Beschriftungen](#3-beschriftungen) * [Eigenes CSS](#3-eigenes-css) * [Designs pro Angebot](#3-designs-pro-angebot) * [Änderungen speichern](#3-anderungen-speichern) * [Dein vorheriges Design wiederherstellen](#3-dein-vorheriges-design-wiederherstellen) * [Die Zeile Powered by Supr](#3-die-zeile-powered-by-supr) * [Hilfe bei deinem Design](#3-hilfe-bei-deinem-design) * [Tipps und Empfehlungen](#3-tipps-und-empfehlungen) * [Häufige Fragen](#3-haufige-fragen) * [Weitere Anleitungen](#3-weitere-anleitungen) ### Was ist das Abonnement-Widget? || Das Abonnement-Widget sitzt über deinem Button „In den Warenkorb“ und zeigt, wie ein Produkt gekauft werden kann: als Einmalkauf und über deine Abonnementoptionen. Kunden wählen ihre Lieferhäufigkeit, sehen einen eventuellen Rabatt und legen das Produkt in den Warenkorb. Wenn dein Angebot auch Bundle-Optionen hat, erscheint das Bundle-Widget auf derselben Produktseite mit dazu. Was die Widgets anbieten, also welche Optionen, welche Rabatte und ob die Zeile Einmalkauf angezeigt wird, legst du in jedem Angebot unter [**Angebote**](https://admin.shopify.com/apps/super-subscriptions/app/offers) fest. Wie die Widgets aussehen und die gemeinsamen Texte, die sie anzeigen, stellst du auf dieser Seite ein. ### So ist die Seite aufgebaut * **Die Vorschau** links, die beim Scrollen mitläuft. * **Eine Einstellungskarte** rechts, mit ihren Abschnitten in dieser Reihenfolge: **Design**, **Farben**, **Form**, **Abstände**, **Schrift**, **Elemente** und **Eigenes CSS**. * **Beschriftungen**, eine eigene Karte unter der Einstellungskarte, für die Texte, die deine Kunden lesen. * **Add-on-Einstellungen** unter beiden, für die Extras rund um das Widget, etwa das Badge neben dem Produktpreis, den Text des Buttons „In den Warenkorb“ und die Lieferdatumsauswahl. Siehe [Add-ons für die Produktseite](https://supr-bundles-and-subscriptions.crisp.help/de/article/product-page-add-ons-6tqow3/). * **Vorheriges Design wiederherstellen**, nur in Shops, die ihre Widgets gestaltet haben, bevor es diese Seite gab. * **Möchtest du Hilfe, das an deine Marke anzupassen?**, mit einem Button **Mit einem Experten chatten**, der einen Chat mit unserem Team öffnet. ### Die Vorschau Die Vorschau steht neben den Einstellungen und läuft beim Scrollen mit, sodass du siehst, was du änderst, während du es änderst. Sie zeigt deine Produktseite so, wie ein Käufer sie sieht, mit den Bundle- und Abonnement-Widgets in der Reihenfolge, in der sie wirklich erscheinen, und dem Lieferdatumsfeld darunter, falls du eines verwendest. Mit **Vorschauprodukt** darüber zeigst du die Vorschau mit den Optionen und Preisen eines echten Produkts statt mit Beispieldaten, und mit **Vorschauvariante** prüfst du ein Produkt, dessen Varianten unterschiedlich viel kosten. Jede Änderung erscheint in der Vorschau, bevor du speicherst, sodass du einiges ausprobieren und wieder verwerfen kannst. Auf einem Desktop-Bildschirm wird die Vorschau nie höher als das Fenster: Überschrift und Fußzeile bleiben stehen, und die Widgets scrollen dazwischen. | Farben und Abstände können in deinem Live-Theme trotzdem leicht abweichen, weil die Vorschau im Shopify-Adminbereich läuft und nicht in deinem Onlineshop. Öffne eine Produktseite in deinem Shop, um das endgültige Ergebnis zu sehen. ### Design Dieser Abschnitt zeigt das Abonnement-Design und das Bundle-Layout, die gerade live sind, jeweils mit einem Vorschaubild. 1. Klicke auf **Ändern**, um **Design auswählen** zu öffnen. 2. Wähle mit dem Schalter oben **Abonnement-Widget** oder **Bundle-Widget**. Du kannst in **Designs durchsuchen** tippen oder nach Kategorie filtern. 3. Klicke auf das gewünschte Design. Die Galerie schließt sich, und die Vorschau zeigt es. 4. Speichere über die Speicherleiste oben auf der Seite. In deinem Shop ändert sich nichts, bis du speicherst. Abonnement-Designs, nach den Kategorien der Galerie: * **Conversion** * **Checkbox**: ein einzelnes Kontrollkästchen zum Wechsel zwischen Einmalkauf und Abonnement. * **Aurora**: fließende Verlaufsrahmen mit Schimmereffekt. Damit startet ein neuer Shop. * **Lure**: das Flaggschiff-Design, mit hervorgehobenen Vorteilen und einem Rabattbanner. * **Klassisch** * **Classic+**: ein detailliertes Layout mit Platz für Vorauszahlungsoptionen und mehrere Auswahlmöglichkeiten. Der Preis steht oben und folgt der Option, die ein Kunde gewählt hat, und jede Option behält ihren eigenen Preis mit dem Rabatt-Tag daneben. * **Dropdown+**: alle Details in einem kompakten Dropdown. Der Preis steht oben und folgt der Option, die ein Kunde gewählt hat, sodass die Zeilen im Dropdown eine schlichte Liste von Häufigkeiten bleiben. * **Panel+**: ein Layout mit Tabs und einem Optionsfeld bei jeder Option. * **Minimalistisch** * **Classic**: ein einfaches Layout für Optionen mit Zahlung pro Bestellung und bis zu drei Auswahlmöglichkeiten. * **Dropdown**: die kompakteste Art, deine Optionen zu zeigen. * **Panel**: klare, einfache Panel-Buttons. * **Ästhetisch** * **Blobs**: ein animierter Stil, der Aufmerksamkeit weckt. Bundle-Layouts: * **Panels**: Zeilen, jede in einem eigenen umrandeten Panel. Damit startet ein neuer Shop. * **Karten**: horizontale Karten, gut, um zwei oder drei Optionen nebeneinander zu vergleichen. * **Liste**: vertikale Zeilen mit einem Optionsfeld bei jeder Option. Am kompaktesten. Jedes Design wird von dieser Seite aus gestaltet, in den Abschnitten unten, es gibt also nichts zu öffnen und nichts doppelt einzustellen. In deinem Shop ist immer nur ein Abonnement-Design und ein Bundle-Layout live, und jedes Angebot verwendet sie. Die Einstellungen der anderen bleiben erhalten, ein Hin- und Herwechseln kostet dich also nichts. Ein Designwechsel wirkt sich nie auf deine Angebote, deine Preise oder deine Abonnenten aus. | **Neon** und die **benutzerdefinierten** Designs werden in der Galerie nicht mehr angeboten. Ein Shop, der eines davon schon nutzt, behält es und sieht weiterhin seine Karte. Ein benutzerdefiniertes Design ist in HTML und CSS geschrieben und nicht aus Einstellungen zusammengesetzt, daher behält es einen Link **Anpassen**, der den Code öffnet, den unser Team für dich geschrieben hat. Siehe [Was ist mit dem Widget-Editor passiert](https://supr-bundles-and-subscriptions.crisp.help/de/article/what-happened-to-the-widget-editor-1qeawln/#3-eigene-designs-von-unserem-team). Sobald du auf dieser Seite Änderungen gespeichert hast, erscheint in diesem Abschnitt ein Button **Auf Standard zurücksetzen**. Er setzt deine Farben, Form, Abstände, Schrift, Elemente, Beschriftungen und dein eigenes CSS in jedem Design auf den Auslieferungszustand der App zurück und behält das Design und das Bundle-Layout, das du veröffentlichst. Wie alles hier wirkt er erst, wenn du speicherst. ### Farben Eine Entscheidung, die in jedes Design gleichzeitig geschrieben wird, sodass dein Shop sein Aussehen behält, wenn du später das Design wechselst. Jede Art von Antwort steht in einer eigenen Zeile unter einer kleinen Überschrift: * **Aus deinem Theme**, zuerst: Das gestrichelte Farbfeld **Von deinem Theme übernehmen** übernimmt alles aus deinem Theme, gefolgt von den Farbschemas deines Themes, als Farbfelder in ihren eigenen Farben. Wählst du ein Schema, werden sein Hintergrund und sein Text übernommen. Diese Zeile erscheint nur, wenn dein Theme Farbschemas bereitstellt. * **Hauptfarbe** und **Hintergrund**, bei Themes, die statt Farbschemas eine Farbpalette bereitstellen, etwa Horizon. Siehe unten. * **Eine Farbe, nach der sich alles richtet**: die gewöhnlichen Farben, einmal um den Farbkreis von Blau bis Pink und Rot, mit den neutralen Tönen zuletzt und deiner eigenen am Ende. Wählst du eine, wird sie deine Primärfarbe, und alles, was die Widgets zeichnen, richtet sich danach: die Option, die ein Kunde gewählt hat, die Rahmen, die Optionsfelder und die Ersparnis-Badges. Der Text auf einem Badge wird für dich gewählt, damit er bei jeder Farbe lesbar bleibt. Für die meisten Shops ist damit alles erledigt. * **Farbverlauf**: dreizehn fertige Verläufe, jeder in seinen eigenen Farben dargestellt, beginnend mit **Aurora** und endend mit dem einzigen neutralen, **Tinte und Silber**. Dazwischen liegen **Mitternacht**, **Blüte**, **Rose**, **Sonnenuntergang**, **Sand**, **Glut**, **Minze**, **Wald**, **Ozean**, **Lagune** und **Amethyst**. Wähle einen, und seine drei Farbstopps erscheinen darunter, **Basis**, **Zweite** und **Dritte**, sodass du sie anpassen kannst. Diese Zeile erscheint nur, solange ein Design veröffentlicht ist, das einen Farbverlauf zeichnen kann; bei den anderen hätte sie nichts zu tun. Wenn dein Theme statt Farbschemas eine Farbpalette bereitstellt, gibt es kein Paar zum Übernehmen, also wählst du selbst eines aus zwei Zeilen, die in den Farben des Themes dargestellt sind: * **Hauptfarbe** ist die Farbe, in der deine Widgets gezeichnet werden: die Option, die ein Kunde gewählt hat, die Rahmen, die Optionsfelder und die Badges. Deine Texte richten sich danach, du musst also nichts weiter einstellen. * **Hintergrund** ist die Karte dahinter. Eine Farbe kann nicht beides sein. Wählst du eine, die die andere Zeile schon verwendet, werden die beiden getauscht. So kehrst du ein Paar hell auf dunkel mit einem Klick statt mit dreien um. Es sind Alternativen und keine Ebenen, denn sie beantworten dieselbe Frage. Ein Farbverlauf ist eine Farbe wie jede andere: Sein Farbstopp **Basis** ist das, was der Rest des Widgets übernimmt, also richten sich die gewählte Option, die Rahmen und die Badges danach. Wählst du stattdessen eine einfache Farbe, werden diese Designs flach gezeichnet, und wählst du ein Theme-Schema, wird dessen Paar übernommen und die Farbe aus seinem Text abgeleitet. Ein Farbverlauf erreicht alles am Widget, was ins Auge fallen soll, nicht nur seinen Umriss. Auf der Option, die ein Kunde gewählt hat, zeichnet er den Optionsnamen und den Preis. Auf jeder Option, gewählt oder nicht, zeichnet er die Badges, die Ersparnis-Chips und die Zeilen für Gratisgeschenk und kostenlosen Versand. Die Zeilen für Gratisgeschenk und kostenlosen Versand bewegen sich langsam, was den Blick einfängt, ohne ihn vom Preis abzulenken. Dein Rabatt-Badge übernimmt den Verlauf in jedem Design, denn das Badge auf einer Abonnementoption und das Badge auf einer Bundle-Option sind dasselbe Objekt; gib dem Badge in seiner Zeile unter **Elemente** eine eigene Farbe, dann behält es stattdessen diese. Eine Zeile für Gratisgeschenk oder kostenlosen Versand ist in deiner Farbe umrandet, solange ihre Option nicht gewählt ist, und füllt sich damit, sobald ein Kunde diese Option wählt. Das gilt bei einer einfachen Farbe genauso wie bei einem Farbverlauf. So zeigt eine Reihe von Optionen einen einzigen vollen Farbblock, auf der Option, die der Käufer tatsächlich gewählt hat, und der Rest wirkt wie Angebote, die darauf warten, angenommen zu werden. Welcher Verlauf es auch wird, der Text darauf wird so gewählt, dass er lesbar bleibt. Die Einzeloption bleibt außen vor: Sie ist die schlichte Zeile zum vollen Preis und kein Deal, daher behält sie einen gewöhnlichen Umriss und ihren Preis in deiner üblichen Farbe. Stelle das zuerst ein und nutze **Elemente** unten nur für die Teile, die davon abweichen sollen. | **Den Schimmer von Aurora ausschalten.** Aurora ist nur animiert, solange es einen Verlauf zu zeichnen hat. Wähle eine einfache Farbe unter **Eine Farbe, nach der sich alles richtet**, und Aurora wird flach gezeichnet, ohne Schimmer. Um den Verlauf zu behalten, aber die Bewegung loszuwerden, wähle ein anderes Design oder frag uns im Chat. | **Eine sehr helle Farbe dreht das Widget um.** Ein Creme, ein blasses Grau oder ein gebrochenes Weiß ist auf der weißen Karte, mit der die Designs ausgeliefert werden, nicht zu sehen. Deshalb wird stattdessen die Karte dunkler, zu einem tiefen Ton deiner eigenen Farbe, und deine Rahmen, Optionsfelder und Texte behalten die Farbe in voller Stärke darauf. Wähle einen eigenen **Hintergrund**, dann wird dieser verwendet, und gehst du zu einer gewöhnlichen Farbe zurück, kommt die weiße Karte wieder. | Deine Primärfarbe umrandet die Option, die ein Kunde gewählt hat, statt sie zu fluten. Besonders beim Design **Checkbox** behält die angehakte Option ihren eigenen Hintergrund und nimmt die Farbe an Rahmen und Häkchen an, weil diese Option das ganze Widget ist und nicht eine Zeile in einer Liste. | Solange deine Widgets den Farben deines Themes folgen, wird eine Option, die ein Kunde nicht gewählt hat, in abgeschwächter Textfarbe umrandet, und die gewählte ist der einzige volle Umriss in der Liste. **Lure** zeichnet sein Rabattbanner als Band in derselben abgeschwächten Textfarbe statt als volle Fläche. | Name und Preis auf der gewählten Option werden nicht in deiner Farbe gemalt. Sie werden so gewählt, dass sie auf der jeweiligen Füllung dieser Option lesbar sind. Stelle sie in den Zeilen **Angebotsname**, **Optionsname** und **Preis** selbst ein, wenn du etwas anderes möchtest. | Wenn die Farben deines Themes nicht so ankommen, wie du erwartest, wähle selbst eine Farbe unter **Eine Farbe, nach der sich alles richtet**, statt sie aus dem Theme zu übernehmen. Manche Themes geben ihre Farben nicht an Apps weiter. | Wenn du ein Design Element für Element gestaltet hast, bevor es diese Seite gab, ersetzt das Speichern hier diese Farben, genauso wie es die Abstände und Rundungen ersetzt, die du eingestellt hattest. Das lässt sich rückgängig machen: [Dein vorheriges Design wiederherstellen](#3-dein-vorheriges-design-wiederherstellen) unten erklärt, wie du diese Gestaltung zurückbekommst. ### Form * **Rundung** legt fest, wie stark die Ecken abgerundet sind. * **Rahmenstärke** legt die Breite der Rahmen fest. Bei einem Design mit Verlaufsrahmen bestimmt die Stärke auch diesen Rahmen, sodass der Verlauf und die flachen Rahmen daneben gleich kräftig sind. Die Option, die ein Kunde gewählt hat, und die unter dem Mauszeiger werden durch ihre Farbe in derselben Stärke markiert, nicht durch einen eigenen, dickeren Ring. Die Rundung gilt auch innerhalb einer Bundle-Option: Die Zeilen für Gratisgeschenk, kostenlosen Versand und Add-ons werden passend abgerundet. ### Abstände Abstände haben drei Teile: * **In jeder Option**: **Innenabstand oben** und **Innenabstand unten** legen den Platz über und unter dem Inhalt jeder Abonnementoption und Bundle-Option fest. Lässt du den unteren unverändert, folgt er dem oberen. **Horizontaler Innenabstand** legt beide Seiten fest. * **Zwischen den Widgets**: **Abstand** ist der Platz zwischen dem Bundle-Widget, dem Abonnement-Widget und dem Lieferdatumsfeld, für den Fall, dass die Teile zu eng oder zu weit auseinander stehen. * **Um das Widget**: **Abstand oben** und **Abstand unten** für das Ganze. Nutze sie, wenn dein Theme das Widget zu nah an den Button „In den Warenkorb“ oder an den Preis setzt. Alles davon gilt gleichzeitig für dein Abonnement- und dein Bundle-Widget und für das Lieferdatumsfeld darunter. | Weil eine Einstellung einen Wert überall setzt, ersetzt das Speichern hier Abstände und Rundungen, die du vielleicht für einzelne Teile eines Designs eingestellt hast, bevor es diese Seite gab. Das lässt sich rückgängig machen: siehe [Dein vorheriges Design wiederherstellen](#3-dein-vorheriges-design-wiederherstellen). ### Schrift Eine Schrift für dein Abonnement-Widget und deine Bundle-Optionen zusammen, Titel inklusive: * **Folgt deinem Theme**, der Standard: Titel verwenden die Überschriftenschrift deines Themes und alles andere seine Fließtextschrift, dieselbe Aufteilung, die dein Theme macht. * **Fließtextschrift des Themes** oder **Überschriftenschrift des Themes**: das ganze Widget in dieser einen Schrift. * **System**, **Serif** oder **Monospace**: eine Schrift, die jedes Gerät schon hat. * **Benutzerdefiniert**: Gib den Namen einer Schrift ein, die dein Theme bereits lädt, etwa `Futura PT`, genau so, wie dein Theme sie benennt. Du kannst mehrere angeben, durch Kommas getrennt, und die erste, die der Browser hat, wird verwendet. Nur Buchstaben, Zahlen, Leerzeichen, Kommas und Bindestriche bleiben erhalten. Hat der Browser sie nicht, greift das Widget auf die Fließtextschrift deines Themes zurück. Die App lädt nie selbst eine Schrift, eine benutzerdefinierte Schrift erscheint also nur, wenn dein Theme (oder eine andere App) sie auf der Produktseite bereits lädt. Größen und Stärken bleiben in den einzelnen Zeilen unter **Elemente**. | Die Vorschau im Adminbereich kann die Schriften deines Onlineshops nicht laden, daher werden die Schriften deines Themes und eine benutzerdefinierte Schrift dort in der Schrift des Adminbereichs dargestellt. Öffne eine Produktseite in deinem Shop, um das echte Ergebnis zu sehen. ### Elemente Dieser Abschnitt hat eine Zeile pro Teil des Widgets, in der Reihenfolge, in der du die Produktseite liest. Eine Zeile gilt für jedes Design, das diesen Teil hat. Blendest du also die Überschrift aus, ist sie in allen ausgeblendet, und eine Zeile, die dein veröffentlichtes Design nicht umsetzen kann, wird gar nicht angezeigt. * **Beide Widgets**: **Angebotstitel**, **Varianten als Farbfelder anzeigen**, **Rabatt-Badge**, **Rabatt-Badge bei jeder Option** (nur bei **Classic+**) und **Hinweis-Badge**. * **Abonnementoptionen**: **Überschrift**, dann die Fläche (**Hintergrund**, **Rahmen**, **Optionsfeld**), dann der Text darauf: **Angebotsname**, **Abschnittsüberschrift**, **Optionsname**, **Beschreibung**, **Lieferhäufigkeit**, **Preis**, **Durchgestrichener Preis**, **Preis pro Einheit**, **Vorteile**, **Vorteilssymbol**, **Überschrift der Vorteile** und **Info-Tooltip**. * **Bundle-Optionen**: **Überschrift**, **Hintergrund**, **Rahmen**, **Optionsfeld**, **Titel**, **Preis**, **Durchgestrichener Preis** und **Preis pro Einheit**. * **Lieferdatum**: **Überschrift**, **Feld** und **Rahmen**, die Gestaltung des Datumsfelds unter den Widgets. Dieser Abschnitt erscheint erst, wenn die **Datumsauswahl** unter **Add-on-Einstellungen** eingeschaltet ist. Siehe [Add-ons für die Produktseite](https://supr-bundles-and-subscriptions.crisp.help/de/article/product-page-add-ons-6tqow3/#3-datumsauswahl). * **Seitenlayout**: **Bundle oben**, ob das Bundle-Widget über dem Abonnement-Widget steht, und **Bundle-Preise synchronisieren**, ob die Bundle-Preise dem Preis pro Lieferung des gewählten Abonnements folgen. Beide sind standardmäßig eingeschaltet. Innerhalb von **Abonnementoptionen** und **Bundle-Optionen** markiert eine kleine Überschrift **Nur in diesem Design** die Zeilen, die zu dem Design gehören, das du veröffentlicht hast, und zu keinem anderen. Die Liste ändert sich mit dem Design, das du veröffentlichst. Zum Beispiel: * **Liefer-Dropdown**, bei den Designs, die für die Lieferhäufigkeit eine Auswahlliste zeigen (**Dropdown**, **Dropdown+**, **Lure** und **Checkbox**): seine Füllung, Text und Pfeil darin sowie Größe und Stärke dieses Texts. * **Dicker Rand** und **Beschreibung erst bei Auswahl zeigen**, bei **Aurora**. * **Dicker Rand** bei den Bundle-Optionen, in den Layouts, die ihn zeichnen können. Die beiden Widget-Abschnitte stehen in der Reihenfolge, in der die Widgets auf deiner Produktseite übereinander erscheinen. Das Widget, das ein Käufer zuerst sieht, erreichst also auch du zuerst. Schalte **Bundle oben** um, und sie tauschen sofort die Plätze. | **Rahmen** und **Hintergrund** haben jeweils zwei Farben: zuerst die normale, dann die für die Option, die ein Kunde gewählt hat. Auf Standard gelassen, folgt die gewählte deiner Primärfarbe, und das ist, was die meisten Shops wollen. | Die zweite Farbe der Bundle-Zeile **Titel**, die für eine gewählte Option, erscheint nur dort, wo es eine gefüllte Option gibt, auf der sie stehen kann. Deine Bundle-Optionen markieren die gewählte mit einer dezenten Hervorhebung, und **Panels** zeigt über die Stärke des Rahmens, welche Option gewählt ist. Wenn dir eine vollständig gefüllte gewählte Option lieber ist, schreib dem Support, und wir stellen es für dich ein. | **Angebotsname** und **Optionsname** sind zwei Zeilen, nicht eine. In den Designs, die beides anzeigen, ist der Angebotsname die Zeile über einer Gruppe von Auswahlmöglichkeiten, „Abonnieren und sparen“, und der Optionsname eine Auswahl darin, „Lieferung jeden Monat“. In den Designs, die eine flache Liste von Optionen anzeigen, gibt es keinen Angebotsnamen, daher wirkt dort nur die Zeile Optionsname. | **Vorteile** ist eine Zeile für beide Vorteilslisten: die Häkchen unter einer Abonnementoption und die Häkchen unter der Zeile Einmalkauf. Farbe, Größe und Stärke gelten für beide. Die Zeile hat außerdem ein Feld **Abstand** für den Platz zwischen den Zeilen; lässt du es unverändert, folgt es deinem Innenabstand. Was jeder Vorteil sagt, legst du dort fest, wo du ihn geschrieben hast, in den Optionen des Angebots. | **Vorteilssymbol** ist eine eigene Zeile in den beiden Designs, die ein Häkchen zeichnen, **Lure** und **Checkbox**. Die erste Farbe ist das Häkchen und sein Umriss, die zweite die Scheibe dahinter, die durchsichtig bleibt, bis du ihr eine Farbe gibst. **Aurora** zeichnet sein Häkchen aus dem eigenen Farbverlauf des Designs, daher folgt es stattdessen **Farben**. | Zwei Dinge werden hier nicht eingestellt, weil sie zum Angebot gehören und nicht zu deinem Design. Ob die Zeile Einmalkauf angezeigt wird und welche Option zuerst ausgewählt ist, legst du in jedem Angebot fest: siehe [So entfernst du die Einmalkauf-Option für ein Produkt](https://supr-bundles-and-subscriptions.crisp.help/de/article/how-to-remove-the-one-time-purchase-option-for-a-product-32zaeu/). Und das Produktbild einer Bundle-Option ist das Bild, das du für diese Option hochlädst. ### Überschriften und der Angebotstitel Eine Produktseite kann einen Angebotstitel und bis zu drei Abschnittsüberschriften haben. **Angebotstitel** ist eine Zeile unter **Beide Widgets**. Er zeigt den Namen deines Angebots einmal ganz oben, über den Bundle-Optionen, den Abonnementoptionen und dem Lieferdatum. Es ist der **Name des Angebots**, den du dem Angebot auf der Seite Angebote gegeben hast. Benennst du das Angebot um, folgt die Seite. Er ist **ausgeschaltet, bis du ihn einschaltest**, und seine Farbe, Größe und Stärke stellst du in der Zeile ein. **Varianten als Farbfelder anzeigen** ist eine Zeile unter **Beide Widgets**. Ist sie eingeschaltet, zeigt jede Variantenauswahl in beiden Widgets die Optionen als Farbfelder statt als Dropdown: Boxen zum Zusammenstellen und ihre Produktliste, Add-ons, Gratisgeschenke (bei Bundle-Optionen und Abonnementoptionen), die Produkte in einem festen Bundle und die Auswahl pro Artikel bei Mengenrabatten und Buy X Get Y. Wo du in Shopify für den Optionswert eine Farbe oder ein Bild festgelegt hast (zum Beispiel das Farbfeld bei einer Farboption), zeigt das Farbfeld diese; andere Optionen wie Größen zeigen ihren Namen. Ein ausverkaufter Wert ist durchgestrichen und kann nicht gewählt werden. Die Farbfelder übernehmen die Farben deines Widgets: Das gewählte wird in deiner Akzentfarbe gezeichnet. Die Farbfelder stammen aus den Produktoptionswerten in Shopify: Öffne das Produkt in Shopify, verbinde unter **Varianten** seine Farboption mit dem Kategorie-Metafeld **Farbe** und wähle für jeden Wert sein Farbfeld (siehe Shopifys Anleitung [Kategorie-Metafelder verwenden](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields)). Für neue Shops ist sie eingeschaltet, für Shops, die früher installiert haben, ist sie ausgeschaltet, bis du sie einschaltest. Jeder Abschnitt hat seine eigene Zeile **Überschrift**, mit eigenem Schalter, eigener Farbe, Größe, Stärke und eigenem Layout: **Abonnementoptionen > Überschrift**, **Bundle-Optionen > Überschrift** und **Lieferdatum > Überschrift**. Die Layouts sind: * **Zentriert mit Linien**, die Überschrift in der Mitte mit einer Linie, die zu beiden Seiten ausläuft. Damit startet ein neuer Shop. * **Zentriert**, die Überschrift in der Mitte ohne Linien. * **Schlicht**, die Überschrift allein am Anfang der Zeile. Was jede Überschrift sagt, legst du an anderer Stelle fest: * **Abonnement-Überschrift**: das Feld **Abschnittstitel** unter **Beschriftungen**. Es beginnt mit **{{ subscription_name }}**, was den **Abonnementnamen** des Angebots anzeigt, den Namen, den du im Angebot über seinen Abonnementoptionen festgelegt hast (übersetzt mit dem Angebot). Gib stattdessen eigene Worte ein („Nie wieder ausgehen lassen!“) oder kombiniere beides („{{ subscription_name }}, jederzeit kündbar“). Ist das Feld leer, wirkt es wie **{{ subscription_name }}**. * **Bundle-Überschrift**: das Feld **Name des Bundles** im Angebot, über seinen Bundle-Optionen. Lässt du es leer, lautet die Überschrift „Bundle & Save“. Um gar keine Bundle-Überschrift zu zeigen, schalte **Bundle-Optionen > Überschrift** unter **Elemente** aus. * **Lieferdatum-Überschrift**: **Überschrift der Datumsauswahl**, unter **Add-on-Einstellungen > Datumsauswahl**. | All das ist Text, den ein Käufer liest, daher ist alles übersetzbar. Angebotsnamen, Abonnementnamen und Bundle-Namen übersetzt du unter [Einstellungen > Übersetzungen](https://supr-bundles-and-subscriptions.crisp.help/de/article/translations-7jsshd/) bei **Angebote**, die Widget-Beschriftungen bei **Widgets**. ### Eine Elementzeile lesen Eine Zeile ist eine Zeile. Links der Name des Elements mit seinem Schalter daneben, dann rechts in Spalten: * Seine **Farbe**, als Farbfeld, das du anklickst, um die Farbauswahl zu öffnen. * Seine **Farbe auf der Option, die ein Kunde gewählt hat**, als zweites Farbfeld, bei den Teilen, die nach der Auswahl anders aussehen. * Seine **Textgröße**, in Pixeln. * Seine **Textstärke**, von Dünn bis Schwarz. Von Zeile zu Zeile unterscheidet sich der Schalter: Optionsname, Hintergründe und Rahmen lassen sich nicht ausblenden, daher haben diese Zeilen keinen Schalter, und Hintergründe und Rahmen sind nur eine Farbe, da sie keinen Text haben, dessen Größe man einstellen könnte. Zwei Felder gehören zu keiner dieser Spalten und stehen daher in einer eigenen Zeile darunter: ein **Abstand**, für ein Element aus mehr als einer Zeile, und ein **Preislayout**. Die Vorteilsliste hat das erste, der durchgestrichene Preis beide. Auf einem schmalen Bildschirm rutschen die Einstellungen in eine eigene Zeile unter den Namen. Die Gestaltung erscheint nur, solange das Element eingeschaltet ist, und eine Änderung wird in jedes Design geschrieben, das das Element hat, sodass ein späterer Designwechsel deine Gestaltung behält. Fahre mit der Maus über den Namen einer Zeile, um zu sehen, was sie umfasst. ### Badges Es gibt zwei Badges, und sie sind zwei Zeilen unter **Beide Widgets**, weil jedes einmal für beide Widgets eingestellt wird: * Das **Rabatt-Badge** wird aus deinem Rabatt berechnet und lautet „-20%“ bei einer Abonnementoption und „Spare 20%“ bei einer Bundle-Option. * Das **Hinweis-Badge** schreibst du selbst bei einer Bundle-Option, in ihrem Feld **Badge**, etwa „Am beliebtesten“. Jedes hat seine eigene Form, Hintergrundfarbe, Textfarbe, Textgröße und Textstärke. Die Farben des Rabatt-Badges beginnen auf Standard, der deiner Primärfarbe folgt; wähle in der Zeile eine Farbe, um eine eigene festzulegen. Es gibt vier Formen: * **Blase**, eine abgerundete Pille neben dem Titel. * **Etikett**, ein Anhänger mit einer Spitze an der vorderen Kante. * **Schwebend**, die Pille von der Zeile abgehoben, mit einem weichen Schatten darunter. * **Band**, ein Streifen, der an der oberen Kante der Zeile klebt. Damit startet ein neuer Shop beim Rabatt-Badge. **Schwebend** und **Band** verlassen die Zeile, daher fragen nur diese beiden, wo entlang der Zeile sie sitzen sollen: **Anfang**, **Mitte** oder **Ende**. | **Classic+** zeigt das Rabatt-Badge zweimal: einmal im Kopf über seinen Optionen und einmal bei jeder Option darunter. Das zweite hat eine eigene Zeile, **Rabatt-Badge bei jeder Option**. Schalte sie aus, um nur das Badge im Kopf zu behalten, oder gib ihm eigene Farben, Größe, Stärke und Form (**Blase** oder **Etikett**). **Dropdown+** zeigt nur ein Badge, im Kopf. | Um das Rabatt-Badge auszublenden, schalte seine Zeile aus. Was das Badge sagt („Spare 20%“, „20% Rabatt“), legst du unter **Beschriftungen** fest. ### Standardfarben und eigene Farben Jede Farbe in einer Elementzeile beginnt auf Standard, und Standard bedeutet deine Primärfarbe überall dort, wo die Primärfarbe diesen Teil bestimmt: der Rahmen, das Optionsfeld, der Hintergrund bei Auswahl. Stelle sie einmal unter **Farben** ein, und alle folgen ihr. Die beiden erkennst du am Farbfeld. Ein gestrichelter Umriss bedeutet, dass die Farbe noch deiner Palette folgt; ein durchgezogener, dass du sie selbst festgelegt hast. Ein kariertes Farbfeld bedeutet, dass der Text keine eigene Farbe hat und die Farbe des umgebenden Texts übernimmt, bis du eine wählst. Fahre mit der Maus darüber, um zu sehen, was zutrifft und welche Farbe es ist. Klicke auf das Farbfeld und wähle eine Farbe, und dieser eine Teil schert aus und behält deine Farbe, egal wie die Primärfarbe lautet. Um ihn zurückzuholen, klicke erneut auf das Farbfeld und wähle **Standard verwenden**: Der Teil schließt sich wieder an und übernimmt die aktuelle Primärfarbe. Teile, die die Primärfarbe nicht bestimmt, etwa der Optionsname oder der durchgestrichene Preis, verstehen unter Standard die Farbe, mit der das Design ausgeliefert wird. Bei einem Design, das einen Farbverlauf zeichnet, versteht der Rahmen unter Standard den Verlauf. | Änderst du deine Farbe unter **Farben**, wirkt sich das auf jeden Teil aus, der noch auf Standard steht, auch in Designs, die du gerade nicht verwendest. Gehst du zurück zum gestrichelten Farbfeld **Von deinem Theme übernehmen**, erhalten diese Teile wieder die Farben, mit denen ihr Design ausgeliefert wird. ### Preise Preise haben eigene Zeilen unter **Elemente**, und die beiden Widgets sind getrennt, sodass du eines ändern und das andere so lassen kannst. Für jedes Widget kannst du ausschalten: * **Preis**, den Betrag bei jeder Abonnementoption oder Bundle-Option. * **Durchgestrichener Preis**, den vollen Preis durchgestrichen neben dem rabattierten. * **Preis pro Einheit**, den Preis pro Artikel wie „3,50 € pro Stück“. Er ist beim Abonnement-Widget anfangs aus und bei den Bundle-Optionen an. **Hinweis auf größere Packung** (Bundle-Optionen, aus, bis du ihn einschaltest) fügt unter den Mengenrabatten einen Link hinzu wie „Füge 1 weiteren hinzu und spare 15%“, solange ein Käufer eine kleinere Packung gewählt hat und eine größere mehr spart. Ein Klick darauf wählt die größere Packung. Er erscheint nur bei einfachen Mengenrabatten, nicht bei einer Box zum Zusammenstellen, einem festen Bundle, Buy X Get Y oder einer Option mit Gratisgeschenk, und sein Wortlaut ist das Feld **Hinweis auf größere Packung** unter **Beschriftungen**. Der übliche Grund, einen Preis auszuschalten, ist, dass dein Theme ihn schon über dem Widget anzeigt und du ihn nicht zweimal nennen möchtest. Um nur den Preis pro Einheit zu zeigen, schalte **Preis** aus und **Preis pro Einheit** ein. Alle drei haben eine Farbe, eine Größe und eine Stärke. Die Abonnement-Zeile **Preis** hat zusätzlich das zweite Farbfeld, für den Preis auf der Option, die ein Kunde gewählt hat. Die Abonnement-Zeile **Durchgestrichener Preis** hat zwei weitere Felder, in einer Zeile unter Größe und Stärke: * **Preislayout**: **Nebeneinander** hält beide Preise in einer Zeile. **Untereinander** setzt den durchgestrichenen Preis in eine eigene Zeile über den aktuellen. * **Abstand**, der Platz zwischen den beiden Preisen, in Pixeln. Jedes Design behält seine eigenen Einstellungen, legst du sie also für das veröffentlichte Design fest, bleiben die anderen, wie sie waren. | **Classic+** und **Dropdown+** zeigen einen Preis oben im Widget, und er folgt der Option, die ein Kunde gewählt hat. Schaltest du den Preis aus, wird auch dieser ausgeblendet. | Preis pro Einheit wird nur bei Designs angeboten, die einen anzeigen. Der Wortlaut drumherum, „/ Stück“ oder „{{ unit_price }} / {{ unit_name }}“, wird unter **Beschriftungen** festgelegt. Der Grundpreis, den dein Theme unter dem Produktpreis zeigt (pro 100 g und so weiter), ist ein eigenes Add-on, **Details zum Abonnementpreis**, unter [Add-ons für die Produktseite](https://supr-bundles-and-subscriptions.crisp.help/de/article/product-page-add-ons-6tqow3/#3-details-zum-abonnementpreis). ### Die Reihenfolge der Elemente * **Welches Widget zuerst kommt**: **Elemente > Seitenlayout > Bundle oben**. Standardmäßig eingeschaltet; schalte es aus, um das Abonnement-Widget über die Bundle-Optionen zu setzen. * **Die Reihenfolge der Abonnementoptionen**: Öffne das Angebot unter **Angebote**, zieh die Optionen an ihrem Griff unter **Abonnementoptionen** in die gewünschte Reihenfolge und speichere das Angebot. Der Onlineshop zeigt sie in dieser Reihenfolge. * **Die Zeile Einmalkauf**: Nutze im Angebot die Pfeile nach oben und unten in der Zeile **Einmalkauf**, um sie an den Anfang oder das Ende der Liste zu setzen. * **Die Reihenfolge der Bundle-Optionen**: Zieh sie im Angebot unter **Bundle-Optionen** in die gewünschte Reihenfolge. Die Zeile der Einzeloption wandert genauso an den Anfang oder das Ende wie die Zeile Einmalkauf. * **Welche Option beim Laden der Seite ausgewählt ist**: Klicke im Angebot in dieser Zeile auf **Als Standard festlegen**. Siehe [Die Standardoption festlegen](https://supr-bundles-and-subscriptions.crisp.help/de/article/a-beginners-guide-to-subscription-offers-spds0i/#3-die-standardoption-festlegen). * **Ein Produkt in mehr als einem Angebot**: Das Abonnement jedes Angebots ist eine eigene Gruppe im Widget. Die Reihenfolge der Gruppen legst du unter **Add-on-Einstellungen > Angebotsreihenfolge** fest. Diese Reihenfolge gilt auch im Checkout. ### Beschriftungen Hier formulierst du die Texte um, die deine Kunden lesen, in der Hauptsprache deines Shops. Sie stehen unter der Einstellungskarte, in einer eigenen Karte. Jedes Feld gilt für jedes Design dieses Widgets, sodass dein Wortlaut erhalten bleibt, wenn du ein anderes Design ausprobierst, und die Karte listet nur die Felder, die dein veröffentlichtes Design tatsächlich anzeigt. * **Abonnement-Widget**: **Abschnittstitel** (akzeptiert {{ subscription_name }} für den Abonnementnamen des Angebots), **Zeile Einmalkauf**, **Rabatt-Badge, Prozentsatz**, **Rabatt-Badge, Betragsrabatt**, **Rabatt-Badge, Festpreis**, **Überschrift der Abonnementoptionen**, **Zeile Vorauszahlung**, **Rabattbanner**, **Titel des Info-Tooltips**, **Optionszeile** (die Zeile, die für jede Häufigkeit in der Liste angezeigt wird), **Preis pro Einheit** und die Häufigkeitssuffixe **Jeden Tag** bis **Alle N Jahre** („/ Monat“, „/ {{ n }} Wochen“). * **Bundle-Widget**: **Ersparnis-Chip, Prozentsatz**, **Ersparnis-Chip, gestaffelte Box**, **Ersparnis-Chip, Betrag**, **Suffix pro Einheit** („/Stück“), **Zeile kostenloser Versand**, **Einzeloption**, **Zeile Gratisgeschenk** und **Hinweis auf größere Packung** („Füge {remaining} weitere hinzu und spare {value}%“). * **Box zum Zusammenstellen**: alles, was eine Option zum Zusammenstellen rund um ihre Auswahl anzeigt, etwa **Überschrift 'Enthält'**, **Überschrift der Auswahl**, **Auswahlaufforderung**, **Auswahlzähler** und **Minimum nicht erreicht** („Bitte wähle mindestens {min} Artikel“). * **Prämien und Gratisgeschenke**: die Überschriften über Buy X Get Y-Prämien und Gratisgeschenken und das Wort **Kostenlos**, das als ihr Preis angezeigt wird. Manche Felder verwenden Platzhalter in geschweiften Klammern, und jedes Feld sagt dir, wofür seine Platzhalter stehen. Behalte sie in deinem Wortlaut und setze sie dorthin, wo der Satz sie braucht. Lass ein Feld leer, um zum eingebauten Wortlaut zurückzukehren. Manche Texte stehen nicht unter **Beschriftungen**, weil sie zu einem Angebot oder einem Add-on gehören: * **Namen, Beschreibungen und Vorteile der Abonnementoptionen**: bei jeder Abonnementoption unter **Angebote** (**Name der Option**, **Beschreibung**, **Vorteile**). Optionsnamen lassen sich nicht gesammelt bearbeiten, ändere sie also Angebot für Angebot; shopweite Texte wie die Häufigkeitssuffixe bearbeitest du einmal hier. * **Name, Beschreibung und Vorteile der Zeile Einmalkauf**: in der Zeile **Einmalkauf** des Angebots. Lässt du ihren **Namen** leer, verwendet die Zeile **Zeile Einmalkauf** aus **Beschriftungen**. * **Titel, Untertitel und Badges der Bundle-Optionen** sowie die Überschrift **Name des Bundles**: im Angebot. * **Der Text des Buttons „In den Warenkorb“, das Badge neben dem Produktpreis und die Texte zum Lieferdatum**: unter **Add-on-Einstellungen**, siehe [Add-ons für die Produktseite](https://supr-bundles-and-subscriptions.crisp.help/de/article/product-page-add-ons-6tqow3/). | Diese Felder legen den Text in der Hauptsprache deines Shops fest. Um ihn für deine anderen Sprachen zu übersetzen, nutze [Einstellungen > Übersetzungen](https://supr-bundles-and-subscriptions.crisp.help/de/article/translations-7jsshd/). Eine Übersetzung dort hat für diese Sprache Vorrang vor dem, was du hier eingibst. ### Eigenes CSS Der letzte Abschnitt der Einstellungskarte, unter **Elemente**, für alles, was die Einstellungen darüber nicht abdecken. Hier geschriebenes CSS gilt für beide Widgets auf deiner Produktseite, und die Vorschau zeigt seine Wirkung, bevor du speicherst. Jedes Design hat sein eigenes CSS: Das des Shop-Designs gilt überall, wo das Shop-Design verwendet wird, und das eines gespeicherten Designs überall, wo dieses Design verwendet wird. Ein neues Design beginnt mit einer Kopie des CSS des Designs, aus dem es erstellt wurde, und ein Design, das erstellt wurde, bevor Designs ihr eigenes CSS hatten, verwendet das des Shop-Designs, bis du es speicherst. Ein Wechsel zu einem anderen Layout im Abschnitt **Design** behält es. Wenn du CSS im alten Editor pro Design geschrieben hast, gilt dieses CSS weiterhin zusätzlich. | Lass das Feld leer, es sei denn, du kennst die Selektoren, die du brauchst. Hier geschriebenes CSS wird nicht geprüft, eine fehlerhafte Regel kann also einen Teil deines Widgets auf deinen Produktseiten ausblenden. Wenn du eine Änderung möchtest, die die Einstellungen nicht abdecken, etwa das Widget zentrieren, frag uns im Chat, und wir schreiben es für dich. Die Widgets nehmen kein eigenes HTML an. Das Layout kommt aus dem Design, das du veröffentlichst, und alles, was du ändern kannst, findest du auf dieser Seite. ### Designs pro Angebot Jedes Angebot verwendet dein **Shop-Design**, es sei denn, du gibst ihm ein eigenes Design. So kann ein Angebot anders aussehen als die übrigen: zum Beispiel ein Premium-Nachfüllclub in den dunklen Farben deiner Marke neben deinem alltäglichen Subscribe & Save. **Einem Angebot ein eigenes Design geben** 1. Gehe zu [**Supr Bundles & Subscriptions > Angebote**](https://admin.shopify.com/apps/super-subscriptions/app/offers) und öffne das Angebot. 2. Klicke in der Vorschau, in der Zeile **Design** unter der Produktauswahl, auf **Neues Design**. Das Angebot erhält ein Design, das nach ihm benannt ist (ein Angebot namens Coffee Club erhält Coffee Club Design), zunächst als Kopie deines Shop-Designs, und der Design-Editor öffnet sich dafür in einem Vollbildfenster über dem Angebot. 3. Die Vorschau im Fenster ist die eigene Vorschau des Angebots: dasselbe Produkt und dieselbe Variante, die du im Angebot in der Vorschau hattest, und die Optionen, Bundle-Optionen, Geschenke und Texte des Angebots so, wie sie gerade im Angebot sind, ungespeicherte Änderungen inklusive. Du kannst dort zu einem anderen Produkt des Angebots wechseln. 4. Ändere Design, Bundle-Layout, Farben, Form, Abstände und Elemente. Beide Vorschauen folgen jeder Änderung sofort. Um es umzubenennen, gib den neuen Namen oben in der Karte **Design** unter **Name des Designs** ein. 5. Schließe das Fenster und speichere das Angebot. Das Design wird mit dem Angebot gespeichert, daher gibt es im Fenster kein Speichern: **Verwerfen** im Angebot macht auch das Design und seine Änderungen rückgängig, und nichts bleibt erhalten, bis du speicherst. Sobald das Angebot ein eigenes Design hat, zeigt das Dropdown der Zeile dessen Namen, und **Design bearbeiten** tritt an die Stelle von **Neues Design**. **Design bearbeiten** öffnet dasselbe Fenster erneut, und seine Änderungen werden auf dieselbe Weise mit dem Angebot gespeichert. Das Dropdown **Design** schaltet das Angebot zwischen **Shop-Design**, seinem eigenen Design und jedem anderen gespeicherten Design um, gespeichert mit dem Angebot; ein Wegschalten behält das Design, sodass du es wieder wählen kannst. Um das eigene Design des Angebots zu löschen, klicke im Fenster auf den Papierkorb neben **Name des Designs** und speichere dann das Angebot. Ein Angebot, das bereits ein Design verwendet hat, das es mit anderen Angeboten teilt, behält es. Die Zeile sagt dann, wie viele andere Angebote es verwenden, denn eine Änderung dort ändert auch diese Angebote. Ein geteiltes Design hat, wie jedes von der Design-Seite geöffnete Design, ein eigenes **Speichern** in der Titelleiste des Fensters, und dieses Speichern gilt für jedes Angebot, das es verwendet. **Auf der Design-Seite.** Oben in der Karte **Design** stehen das Shop-Design und jedes gespeicherte Design. Wähle eines in der Auswahl, um es zu bearbeiten, klicke auf **Neues Design**, um ein weiteres als Kopie des geöffneten zu beginnen, und nutze die Symbole Stift (umbenennen) und Papierkorb (löschen) daneben, um das geöffnete Design umzubenennen oder zu löschen. Jedes Angebot kann ein eigenes Design haben, und ein Shop kann hier bis zu 50 weitere aufbewahren. **Was ein Design umfasst.** Das Design und das Bundle-Layout, Farben, Form, Abstände, Elemente, **Platzierung** und **Eigenes CSS**. **Beschriftungen** und die Add-on-Einstellungen teilen sich alle Designs. Beschriftungen bearbeitest du im Shop-Design: Solange ein gespeichertes Design geöffnet ist, hat der Hinweis unter seinen Einstellungen einen Button **Shop-Design bearbeiten**, der dich dorthin bringt. Die Karte **Add-on-Einstellungen** bleibt auch dann auf der Seite, wenn ein gespeichertes Design geöffnet ist, als geteilt markiert, und eine Änderung dort gilt für das Shop-Design und jedes gespeicherte Design. Übersetzungen folgen dem Layout des Designs, genau wie beim Shop-Design. **Auf der Produktseite.** Das Abonnement-Widget eines Produkts verwendet das Design des ersten Angebots, das es zeigt. Welches Angebot zuerst kommt, legst du auf dieser Seite unter **Add-on-Einstellungen > Angebotsreihenfolge** fest. Wenn Angebote unterschiedliche Varianten desselben Produkts betreffen, verwendet jede Variante das Design ihres ersten Angebots, und das Widget wechselt das Design, während der Kunde eine Variante wählt: Eine Variante Glasflasche, die über deinen Premiumclub verkauft wird, kann wie der Club aussehen, während die Dose daneben dein alltägliches Design behält. Jede Bundle-Option folgt dem Design ihres eigenen Angebots. Löschst du ein Design, kehren seine Angebote zum Shop-Design zurück. ### Änderungen speichern Auf dieser Seite wird nichts automatisch gespeichert. Ändere so viel du möchtest, sieh dir alles in der Vorschau an und speichere dann alles auf einmal über die Speicherleiste oben auf der Seite, oder verwirf es und fang neu an. Lade nach dem Speichern eine Produktseite in deinem Shop neu, um das Ergebnis zu sehen. Diese Seite schreibt einen Wert in alle Designs gleichzeitig. Wenn du deine Widgets im alten Editor pro Design gestaltet hast, ist dein erstes Speichern hier der Moment, in dem dein Shop zum einheitlichen Widget-Erlebnis wechselt: Eine Meldung **Deine Widgets werden besser** fragt vor diesem ersten Speichern nach, und wir erstellen eine Kopie davon, wie deine Widgets vorher aussahen. ### Dein vorheriges Design wiederherstellen Dieser Abschnitt ist für Shops, die ihre Widgets im alten Editor pro Design gestaltet haben, bevor diese Seite ihn ersetzt hat. Wenn du Supr Bundles & Subscriptions danach installiert hast, gibt es kein vorheriges Design, zu dem du zurückkehren könntest, und keine Karte **Vorheriges Design wiederherstellen** auf deiner Seite. Bevor dein Shop zum einheitlichen Widget-Erlebnis wechselt, speichern wir eine Kopie davon, wie seine Widgets aussehen. Diese Kopie läuft nicht ab, und die Karte nennt das Datum, an dem sie erstellt wurde. Ab dann steht eine Karte **Vorheriges Design wiederherstellen** weit unten auf dieser Seite. Nutze sie, und deine Widgets sind wieder genau so, wie sie kurz vor dem Wechsel waren. Du kannst sie danach neu gestalten und erneut wiederherstellen. Das Wiederherstellen ersetzt alles, was du auf dieser Seite seit dieser Kopie geändert hast. Es wirkt sich nicht auf deine Angebote, deine Preise oder deine Abonnenten aus. | [Was ist mit dem Widget-Editor passiert](https://supr-bundles-and-subscriptions.crisp.help/de/article/what-happened-to-the-widget-editor-1qeawln/) erklärt, wohin jede Einstellung des alten Editors gewandert ist. ### Die Zeile Powered by Supr Manche Shops sehen eine kleine Zeile **Powered by Supr** unter dem Abonnement-Widget oder in seinem Info-Tooltip. Ob sie erscheint, hängt von deinem Tarif ab: In kostenpflichtigen Tarifen wird sie automatisch entfernt, und auf der Design-Seite gibt es dafür keinen Schalter. Die Tarife findest du auf [unserer Preisseite](https://super-simple.co/pricing.html) und unter **Abrechnung** in der App. Öffne nach einem Tarifwechsel die App einmal und lade dann deine Produktseite neu, und die Zeile ist verschwunden. Wenn sie weiterhin erscheint, schreib uns im Chat, und wir prüfen es für dich. Dieselbe Zeile kann am Ende der Abonnement-E-Mails erscheinen, die wir für dich senden, und sie folgt derselben Regel. ### Hilfe bei deinem Design Die Karte **Möchtest du Hilfe, das an deine Marke anzupassen?** unten auf der Seite hat einen Button **Mit einem Experten chatten**. Unser Team hilft dir, ein Design auszuwählen, die Farben und Schriften deines Themes zu treffen, Abstände auf Mobilgeräten anzupassen oder eigenes CSS für eine Änderung zu schreiben, die die Einstellungen nicht abdecken. Sag uns, wie das Widget aussehen soll, ein Screenshot hilft, und wir richten es gemeinsam mit dir ein. ### Tipps und Empfehlungen * Stelle zuerst Farbe, Form und Abstände ein und wähle dann ein Design. Sie gelten für jedes Design, Designs auszuprobieren kostet dich also nichts. * Lass die Elementfarben auf Standard, wenn du keinen Grund hast. Je weniger Ausnahmen du machst, desto besser sieht ein neues Design aus, wenn du eines ausprobierst. * Nutze die Vorschau mit einem echten Produkt, damit du deine eigenen Preise und Rabatte siehst. * Wenn ein Design ein Dropdown zeigt, das du nicht möchtest, ist ein Wechsel zu **Classic** oder **Panel** der schnellste Weg, es loszuwerden. * Für Optionen nebeneinander statt untereinander nutze **Panel** oder **Panel+** für Abonnements und das Bundle-Layout **Karten**. ### Häufige Fragen **Können zwei Angebote in meinem Shop unterschiedlich aussehen?** Ja. Erstelle ein gespeichertes Design und wähle es für eines der Angebote, siehe [Designs pro Angebot](#3-designs-pro-angebot). **Wie passe ich die Farben an meine Marke an?** Wähle deine Farbe unter **Farben** und ändere dann einzelne Teile unter **Elemente** nur dort, wo sie abweichen sollen. Speichere über die Speicherleiste und lade eine Produktseite neu. **Eine Einstellung, die ich geändert habe, erscheint nicht in meinem Shop. Warum?** Prüfe, ob du gespeichert hast, und lade dann die Produktseite neu. Wenn sie immer noch nicht erscheint, überschreibt wahrscheinlich das eigene CSS deines Themes das Widget an dieser Stelle. Schreib uns im Chat mit dem Produktlink, und wir beheben es, ohne dein Theme anzufassen. **Können verschiedene Angebote verschiedene Designs verwenden?** Nein. Pro Shop ist ein Abonnement-Design und ein Bundle-Layout live, und jedes Angebot verwendet sie. Die Gestaltung der anderen bleibt erhalten, ein Wechsel kostet also nichts. **Wie blende ich den Preis, den durchgestrichenen Preis oder das Rabatt-Badge aus?** Schalte **Preis**, **Durchgestrichener Preis** oder **Preis pro Einheit** unter **Elemente** aus, getrennt für die Abonnementoptionen und die Bundle-Optionen. Das Rabatt-Badge hat eine eigene Zeile unter **Beide Widgets**. **Wie setze ich das Abonnement-Widget über die Bundle-Optionen?** Schalte **Elemente > Seitenlayout > Bundle oben** aus und speichere. **Wie ändere ich „Subscribe & Save“, „Einmalkauf“, „Spare 15%“ oder „/Stück“?** In der Karte **Beschriftungen**. Die Überschrift über den Abonnementoptionen ist **Abschnittstitel**, der den **Abonnementnamen** des Angebots überall dort anzeigt, wo **{{ subscription_name }}** steht (sein Anfangswert), und die Bundle-Überschrift ist der **Name des Bundles** des Angebots. Siehe [Texte in der Hauptsprache ändern oder übersetzen](https://supr-bundles-and-subscriptions.crisp.help/de/article/how-to-changetranslate-main-language-texts-w7crrc/). **Das geöffnete Liefer-Dropdown sieht unter Windows und auf einem Mac anders aus. Kann ich es gestalten?** Das geschlossene Dropdown gestaltest du unter **Elemente > Liefer-Dropdown**. Die geöffnete Liste zeichnet der Browser und das Betriebssystem des Käufers, daher lässt sie sich nicht umgestalten. Wähle **Classic** oder **Panel**, wenn dir kein Dropdown lieber ist. **Kann ich eigenes HTML hinzufügen oder ein Design nachbauen, das ich auf einer anderen Website gesehen habe?** Die Widgets nehmen kein eigenes HTML an. Wähle hier das ähnlichste Design und gestalte es, und nutze dann **Mit einem Experten chatten**, damit unser Team dir hilft, so nah wie möglich heranzukommen. **Wie entferne ich die Zeile Powered by Supr?** In kostenpflichtigen Tarifen wird sie automatisch entfernt. Siehe [Die Zeile Powered by Supr](#3-die-zeile-powered-by-supr). ### Weitere Anleitungen * [Add-ons für die Produktseite](https://supr-bundles-and-subscriptions.crisp.help/de/article/product-page-add-ons-6tqow3/) * [Was ist mit dem Widget-Editor passiert](https://supr-bundles-and-subscriptions.crisp.help/de/article/what-happened-to-the-widget-editor-1qeawln/) * [Einsteigerleitfaden für Abonnementangebote](https://supr-bundles-and-subscriptions.crisp.help/de/article/a-beginners-guide-to-subscription-offers-spds0i/) * [Texte in der Hauptsprache ändern oder übersetzen](https://supr-bundles-and-subscriptions.crisp.help/de/article/how-to-changetranslate-main-language-texts-w7crrc/) * [Übersetzungen](https://supr-bundles-and-subscriptions.crisp.help/de/article/translations-7jsshd/) * [Was Käufer im Warenkorb und im Checkout sehen](https://supr-bundles-and-subscriptions.crisp.help/de/article/what-shoppers-see-in-the-cart-and-at-checkout-16sxmpe/) * [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/)