Dein eigenes Widget gestalten

Mit dem Designer für eigene Widgets schreibst du HTML und CSS deines Abonnement-Widgets, deiner Bundle-Optionen und des Rahmens darum selbst, sodass das Widget genau wie der Rest deiner Produktseite aussieht. Er ist in der Beta-Phase: Bitte uns im Chat, ihn für deinen Shop zu aktivieren.

Den Designer öffnen

1. Gehe zu Supr Bundles & Subscriptions > Design.
2. Klicke auf das Design Custom (Liquid). Beim ersten Mal öffnet sich der Designer, damit du dein Design erstellen kannst.

Klicke auf Speichern, um deine Änderungen zu behalten. Jede gespeicherte Änderung wird unter Versionen aufbewahrt, sodass du jederzeit zurückgehen kannst.

Dein Design in deinem Shop verwenden

Sobald dein Design gespeichert ist, kann Custom (Liquid) auf der Design-Seite wie jedes andere Design gewählt werden, für das Abonnement-Widget, für das Bundle-Widget oder für beide. Wähle es aus und speichere die Design-Seite. Ab dann ist jedes Speichern im Designer sofort in den Widgets live, die es verwenden.

Die drei Tabs

• Abonnement-Widget: die Abonnementoptionen und die Zeile für den Einmalkauf.
• Bundle-Optionen: die Bundle-Leiste und jede ihrer Optionen, einschließlich Box zum Zusammenstellen, festen Bundles, Add-ons und Gratisgeschenken.
• Layout: alles, was der App-Block zeigt, in einem Rahmen: den Titel des Angebots, das Abonnement-Widget, die Bundle-Optionen sowie eine eigene Schaltfläche „In den Warenkorb“ und Mengenauswahl.

Der Tab Layout hat einen Schalter, Dieses Layout verwenden: Ist er aktiviert, platziert dein Layout auf jeder Produktseite den Titel des Angebots, beide Widgets und dein eigenes „In den Warenkorb“. Die anderen beiden Tabs folgen, wie oben beschrieben, der Design-Seite.

Jeder Tab hat eine Liste Mit einer Vorlage beginnen. Eine Vorlage ersetzt nur das Markup und das Stylesheet dieses Tabs. Du kannst also deine Bundle-Optionen mit einer Vorlage beginnen und dein Abonnement-Widget mit einer anderen.

Ein Design von unserem Support-Team importieren

Wenn unser Team ein Design für dich erstellt, schickt es dir dieses als einen einzigen Textblock.

1. Öffne den Designer und klicke auf Design importieren.
2. Füge den ganzen Block ein und klicke auf Importieren. Er ersetzt alle Vorlagen, Stylesheets und Beschriftungen auf allen drei Tabs.
3. Prüfe die Vorschau und klicke dann auf Speichern.
4. Verwendet dein Shop das Design noch nicht, wähle auf der Design-Seite Custom (Liquid) für das Widget.

Ein Design kann auch deine Markenfarbe, Rundung und Abstände von der Design-Seite mitbringen. Der Designer listet sie vor dem Speichern in einem Banner auf, und beim Speichern werden sie mit dem Design übernommen. Sie gestalten auch deine anderen Widgets um. Klicke auf Design-Seite unverändert lassen, um das Design ohne sie zu speichern.

So funktioniert eine Vorlage

Eine Vorlage ist gewöhnliches HTML mit Liquid-Ausdrücken in doppelten geschweiften Klammern, etwa {{ selling_plan.name }} oder {{ tier.price | money }}. Tippe im Editor {{, um jeden Ausdruck zu sehen, den der bearbeitete Teil akzeptiert, mit dem, was er ausgibt. Der Bereich Referenz listet sie ebenfalls auf. Alles andere in doppelten geschweiften Klammern und jedes Liquid-Tag außer einem Kommentar wird mit der betreffenden Zeile abgelehnt.

Es gibt keine Bedingungen. Um etwas ohne Wert auszublenden, nutze CSS: Ein leerer Preis oder ein leeres Badge gibt nichts aus, also blendet :empty sein Element aus. Die gewählte Abonnementoption hat ein ausgewähltes Optionsfeld (.sss-liquid-row:has(> input:checked)), und die gewählte Bundle-Option hat die Klasse .sss-bundle-block__tier--selected.

Die App behält die Teile, die dein Shop zum Funktionieren braucht: die Optionsfelder, die Variantenauswahl, die Mengenschalter und die Daten, die der Onlineshop liest, um Preise aktuell zu halten und die richtigen Artikel in den Warenkorb zu legen. Dein Markup kommt um sie herum und in sie hinein.

Abonnement-Widget

• Rahmen: alles rund um die Optionen, etwa eine Überschrift oder eine Vertrauenszeile. Platziere die Optionen mit {{ sss.options }}. Du kannst auch {{ sss.one_time }}, {{ sss.add_to_cart }} und {{ sss.quantity }} platzieren.
• Angebotsgruppe: wird einmal pro Angebot gezeichnet. Zeige ihre Optionen als Zeilen mit {{ sss.group.options }} oder mache das ganze Angebot zu einer Karte mit einer Auswahlliste ({{ sss.plan_picker }}) oder Schaltflächen ({{ sss.plan_picker_pills }}).
• Abonnementoption und Einmalkauf: jeweils eine Zeile.
• Vorteilszeile, Gratisgeschenk und Treueprämie: wie ein Vorteil, ein Geschenk oder eine Prämie aussieht, in einer Option platziert mit {{ sss.benefits }}, {{ sss.gifts }} und {{ sss.rewards }}.

Zu den Preisen gehören Ersparnisse, der Preis pro Tag, pro Portion und pro Einheit, der Preis nach den ersten Bestellungen und die Abrechnungszeile. Um einen Preis pro Portion anzuzeigen, füge das Feld Portionen unter Produktfelder hinzu und fülle es bei jeder Variante aus.

Bundle-Optionen

• Bundle-Leiste: alles rund um die Optionen. Platziere sie mit {{ sss.tiers }}.
• Bundle-Option: eine Option, zum Beispiel eine Packungsgröße. Sie kann Titel, Badge, Preis, Vollpreis, Preis pro Einheit und Ersparnis der Option zeigen. Platziere den Builder, die Produkte eines festen Bundles, Add-ons, Geschenke und die Variantenauswahl an der gewünschten Stelle mit {{ sss.tier.builder }}, {{ sss.tier.products }}, {{ sss.tier.addons }}, {{ sss.tier.gifts }} und {{ sss.tier.variant_pickers }}. Alles, was du weglässt, folgt deinem Markup.
• Bundle-Produkt: wie ein Produkt in einem festen Bundle, einer Option „Box zum Zusammenstellen“ und den Add-ons aussieht: Bild, Titel, Preis, Hersteller und Sticker.

Um einen Sticker wie „Bestseller“ auf einem Produkt anzuzeigen, füge das Feld Bundle-Sticker unter Produktfelder hinzu und fülle es dann beim Produkt aus. Übersetze ihn mit Shopifys Translate & Adapt. Sticker werden für die ersten 20 Bundle-Produkte auf einer Seite angezeigt.

Aktiviere Builder mit einer Gruppe nach der anderen anzeigen, um die Gruppen einer Option „Box zum Zusammenstellen“ als Tabs anzuzeigen, mit jeweils einer geöffneten Gruppe. Jeder Tab zeigt den Namen und Untertitel der Gruppe, die du bei der Gruppe unter Angebote festlegst.

Beschriftungen und Übersetzungen

Deine eigenen Texte gehören unter Beschriftungen, und du gibst einen mit {{ sss.labels.name }} aus. Eine Beschriftung innerhalb einer Abonnementoption kann Werte dieser Option enthalten, etwa Billed {price} {billing_frequency}, sodass der ganze Satz in jeder Sprache eine einzige Beschriftung bleibt. Übersetze deine Beschriftungen unter Einstellungen > Übersetzungen > Widgets.

Die Beschriftungen einer Vorlage beginnen in der Sprache deines Shops. Beim Speichern wird jede Beschriftung, die du nicht umformuliert hast, auch in die weiteren Sprachen deines Shops übersetzt, es sei denn, du hast sie bereits selbst übersetzt. Beschriftungen, die du selbst schreibst, übersetzt du selbst.

Stylesheets

Jeder Tab hat ein eigenes Stylesheet. Beim Speichern wird jede Regel auf den Teil beschränkt, den sie gestaltet, sodass dein CSS den Rest deines Themes nicht verändern kann. Das Stylesheet kann keine Skripte laden und nicht über das Widget hinausgreifen.

Vorschau

Die Vorschau neben dem Editor zeichnet dein Design so, wie es im Onlineshop erscheint. Wähle eines der Beispielprodukte oder klicke auf Vorschau eines Produkts aus deinem Shop, um es auf einem deiner Produkte zu sehen. Die eigenen Schriften und Styles deines Themes erscheinen nur in deinem Shop. Die Vorschau führt dein JavaScript nicht aus.

JavaScript

Das Feld JavaScript unten im Designer enthält ein Skript für dein Design. Es läuft einmal auf jeder Seite, auf der dein Design das Abonnement-Widget oder die Bundle-Optionen zeichnet, nachdem diese gezeichnet wurden. Eine Seite kann mehr als ein Widget zeigen, finde sie also alle mit document.querySelectorAll.

Was der Designer nicht kann

• Eine Vorlage kann nicht die eigenen Klassennamen oder Datenattribute der App verwenden (etwa purchase-option-* oder data-tier-total). Der Editor sagt dir beim Ablehnen, um welche es sich handelt.
• Wir unterstützen den Designer selbst. Das Erstellen und Pflegen von Markup und CSS deines Designs liegt bei dir oder deinem Entwickler.

Aktualisiert am: 24/10/2026