Artikel über: Widgets

Das Abonnement-Widget

Diese Seite öffnest du unter Supr Bundles & Subscriptions > Design


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.


Inhaltsverzeichnis



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 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.
  • 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.


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 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.


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.
  • 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. 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). 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 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.


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.
  • 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.


Diese Felder legen den Text in der Hauptsprache deines Shops fest. Um ihn für deine anderen Sprachen zu übersetzen, nutze Einstellungen > Übersetzungen. 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 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 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 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.



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.


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.


Weitere Anleitungen


Aktualisiert am: 24/10/2026

War dieser Beitrag hilfreich?

Teilen Sie Ihr Feedback mit

Stornieren

Danke!