ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.

Der Design-Tab gibt Ihnen die volle Kontrolle darüber, wie Ihre Hoppy Bundles bietet Look and Feel auf Ihrer Storefront. Von Schriftarten und Farben bis hin zu Rahmen, Schaltflächen, Tier-Highlights und Produktkarten - fast jeder visuelle Aspekt Ihrer Angebots-Widgets kann an Ihre Marke angepasst werden.

Wir haben eine breite Palette von Einstellungen zur Verfügung gestellt, so dass Sie entweder:

• Schnell starten mit vorgefertigten Vorlagen und Themes
• Oder passen Sie jedes Detail perfekt an Ihre Storefront an

Die meisten farbbezogenen Einstellungen umfassen:

• A Color Picker (klicken Sie auf die Farbtafel, um sie zu öffnen)
• Ein Hex Code Input (geben Sie Ihre genaue Markenfarbe direkt ein)

Dies macht es einfacher, ob Sie visuelle Auswahl oder genaue Markenfarben bevorzugen.

⚠️ Bevor Sie beginnen

So konfigurieren Sie Design-Einstellungen:

→ Öffnen Sie ein bestehendes Angebot → Oder erstellen Sie zuerst ein neues Angebot

Dann öffnen Sie die Design Tab innerhalb des Angebots Editor.

Die Registerkarte Design ist für alle Angebotstypen in Hoppy Bundles:

• Paketangebot
• Aufschlüsselung der Menge (Mengenrabatt)
• Erstellen Sie Ihr eigenes Bundle (BYOB)
• Produkt-Addons
• Upsell Slider
• Aufschlüsselung nach Kategorie Menge

ℹ️ Die Registerkarte Design sieht je nach Angebotstyp etwas anders aus - diese Anleitung deckt jeden Abschnitt ab und zeigt die Unterschiede auf, während wir gehen.

👀 Das Design Tab verstehen

📍 Wo sie lebt

Öffnen Sie ein beliebiges Angebot und Sie sehen Tabs oben im Editor - für die meisten Angebotstypen sind dies Generalmajor, Design, und Targeting & Placement. klicken Design um die Styling-Einstellungen zu öffnen.

• für BYOB Angebote, die Tabs sind Generalmajor, Produktauswahllogik, und Design.

🖥️ Live Preview

Jeder Angebots-Editor enthält ein Live-Vorschau-Panel neben den Einstellungen, das sowohl eine Desktop Preview und a Mobile PreviewWenn Sie eine Designeinstellung ändern – eine Farbe, eine Schriftart, einen Rahmen – wird die Vorschau sofort aktualisiert, sodass Sie immer genau wissen, wie Ihr Widget aussehen wird, bevor Sie es speichern.

ℹ️ Die Vorschau zeigt Ihre Styling-Änderungen mit Musterprodukten. Überprüfen Sie immer den endgültigen Look auf Ihrer Live-Storefront nach der Veröffentlichung.

🎨 Vorlagen & Themen (Quantity Break)

Quantity Break Angebote kommen mit vorgefertigten visuellen Stilen, so dass Sie nicht von Grund auf neu entwerfen müssen.

🖼️ Angebotsvorlagen

• Was sie tut: Wenn Sie ein neues Quantity Break-Angebot erstellen, wählen Sie zunächst eine vorgefertigte Angebotsvorlage unter Wählen Sie Ihr bevorzugtes AngebotJede Vorlage verfügt über ein eigenes vorgefertigtes Design (Farben, Größen und Stile), das Sie anschließend vollständig anpassen können.
• Verfügbare Vorlagen:
• • Bundle & Save – wendet eine frische grün Farbthema.
  • Zeitlich begrenztes Angebot - wendet eine warme Orange Farbthema.
  • Flash Sale Wahnsinn! wendet eine fette rosafarben Farbthema.
  • Yay! Es ist BOGO! wendet eine lebendige violett Farbthema.
• Wie zu verwenden: Wählen Sie eine Vorlage und klicken Sie Anwenden der ausgewählten Vorlage. Das Design der Vorlage wird in den Editor geladen, und Sie können alles von dort aus optimieren.

📐 Vorlagenlayout

• Was sie tut: Steuert, wie die Mengenebenen innerhalb des Widgets angeordnet sind.
• Optionen:
• • Vertikal Die Stufen werden übereinander gestapelt.
  • Horizontal Tiers sitzen Seite an Seite.

🎨 Wählen Sie ein Thema

• Was sie tut: Sie können das gesamte Farbthema des Widgets mit einem Klick austauschen.
• Optionen: Blau, rot, oder Grün.
• Anmerkung: Diese Option erscheint nur, wenn Vertikal Template Layout ist ausgewählt.

⚠️ Die Auswahl eines Themas ersetzt alle Ihrer aktuellen Designeinstellungen (Farben, Größen, Stile) mit den voreingestellten Werten des Themas. Wenn Sie individuelle Einstellungen angepasst haben, wenden Sie zuerst Ihr Thema an und verfeinern Sie es anschließend.

🔤 Typografie und Farbe

Dies ist die Hauptdesignkarte, die im Tab Design jedes Angebotstyps verfügbar ist. Es ist zusammenklappbar - klicken Sie auf den Pfeil in der oberen rechten Ecke, um es zu erweitern oder zusammenzubrechen.

🔠 Schriftzug

• Was sie tut: Legt die Schriftfamilie fest, die für das gesamte Angebots-Widget verwendet wird.
• Wie zu verwenden: Pick aus 60+ eingebaute Schriftarten - darunter Klassiker wie Helvetica, Arial, Georgia und Impact sowie beliebte Google Fonts wie Roboto, Montserrat, Poppins, Inter, Lato, Open Sans, Playfair Display und viele mehr.
• Standard: Wählen Verwenden Sie Ihre Theme Font um automatisch die Schriftart Ihres Store-Themas zu erben - der einfachste Weg, um das Widget in Ihre Storefront zu integrieren.

ℹ️ Google Fonts werden automatisch auf die Storefront geladen, wenn sie ausgewählt werden – es ist keine manuelle Einrichtung erforderlich.

📝 Text Element Styling (Größe / Stil / Farbe)

Unterhalb des Font Pickers erhält jedes Textelement des Widgets einen eigenen Stylingblock. Jeder Block hat drei Einstellungen:

• Größe (px): Steuert die Schriftgröße dieses Elements.
• Stil: Kontrolliert das Gewicht und die Betonung des Textes. Optionen:
• • Licht
  • Regelmäßig
  • Italisch
  • Medium
  • Mittelkursiv
  • Halbfett
  • Fett
  • Fett kursiv
• Farbe: Ändert die Textfarbe mit dem Farbwähler oder Hex-Eingang.

⚠️ Größe kann nicht größer als 20px sein - wenn Sie einen größeren Wert eingeben, wird ein Validierungsfehler angezeigt.

Die verfügbaren Elemente hängen von der Art des Angebots ab:

📦 Bundle Offer & Product Addons:

• Bundle Title – die Hauptüberschrift des Bundle-Widgets.
• Produktbezeichnung – die Produkttitel innerhalb des Bundles.
• Produktpreis – der angegebene Preis für jedes Produkt.
• Highlighted Tag - den Abzeichentext (z. B. "Combo"), der auf hervorgehobenen Produkten angezeigt wird.
• Fuß – der Fußzeilentext am Ende des Widgets.
• Gesamtpreis - den kombinierten Bündelpreis.
• Button - den "Add to Cart" Button Text.

🏷️ Aufgegliedert nach Mengen:

• Feldtitel – die Hauptüberschrift über den Stufen.
• Angebotsbezeichnung - den Titel jeder Stufe (z. B. "2 Pair").
• Discount Label - den Rabatttext für jede Stufe (z. B. "Buy 2 Get 1").
• Preis - den ermäßigten Preis.
• Preis vergleichen - der durchgeschlagene Originalpreis.
• Tag - der Abzeichentext auf einer Stufe (z. B. "Most Popular").
• Untertitel - den Untertiteltext auf einer Stufe.
• Gift Label / Gift Price / Gift Tag Farbe – der Text, der für kostenlose Geschenkartikel verwendet wird (wenn ein kostenloses Geschenk konfiguriert ist).
• Fuß - den Fußzeilentext unterhalb der Ebenen.
• Highlighted Tag - den hervorgehobenen Badge-Text.
• Button Der Button Text.
• Gesamtpreis – die Gesamtpreisanzeige.

🧺 Erstellen Sie Ihr eigenes Bundle (BYOB):

• Feldtitel – die Überschrift der Bundle Page.
• Beschreibung – den Beschreibungstext unter der Überschrift.
• Angebotsbezeichnung – die Produktnamen im Bundle.
• Preis – die Produktpreise.
• Sticky Bar Text – die Fortschrittsnachricht in der Sticky-Leiste (z. B. "Brauchen Sie mindestens 3 aus dieser Gruppe").
• Button - der Haupt-Button "Add Bundle to Cart" Text.
• Produktknopf - die Schaltfläche "Hinzufügen" auf jeder Produktkarte.
• Gesamtpreis - das laufende Bündel insgesamt.

🛍️ Upsell Slider:

• Feldtitel - die Slider-Überschrift (z. B. "Häufig zusammen gekauft").
• Produktbezeichnung – die Produktnamen im Slider.
• Preis – die Produktpreise.
• Button - den "Add to Cart" Button Text.

🗂️ Aufgegliedert nach Kategorie Menge:

• Gleiche Textelemente wie Quantity Break (Block Title, Offer Title, Discount Label, Price, Tag, Subtitle, Footer, Button, Total Price), ohne Geschenk- und Vergleichspreis-Stylingoptionen.

🌈 Widget Colors (Quantity Break & Category Quantity Break)

Dieser Abschnitt steuert den Hintergrund und hebt die Farben der Tierbalken hervor. Jede Option ist ein einzelner Farbwähler mit einem Hex-Eingang.

• Randfarbe: Die Randfarbe der derzeit ausgewählten Ebene - macht die aktive Wahl hervorzuheben.
• Hintergrundfarbe: Die Hintergrundfarbe der ausgewählten Ebene.
• Nicht ausgewählte Bar: Die Hintergrundfarbe aller nicht ausgewählten Ebenen.
• Hintergrundfarbe des Etiketts: Der Hintergrund hinter dem Discount-Label auf jeder Stufe.
• Hintergrundfarbe: Der Hintergrund des Tag-Badges (z.B. "Most Popular").
• Geschenk Hintergrundfarbe: Der Hintergrund der kostenlosen Geschenkreihen (nur Quantity Break).
• Gift Tag Hintergrundfarbe: Der Hintergrund des kostenlosen Geschenk-Tags (nur Quantity Break).

💡 Tipp: Verwenden Sie einen subtilen Kontrast zwischen den ausgewählten und nicht ausgewählten Balkenhintergründen - es hilft den Käufern sofort zu sehen, welche Stufe sie ausgewählt haben.

📏 Variantgröße (Mengenbruch)

• Was sie tut: Steuert die Größe des Variantenwählers, der auf jeder Ebene angezeigt wird, wenn das Produkt Varianten hat.
• Optionen: Klein, Medium, oder Groß Klicken Sie einfach auf ein Abzeichen, um es auszuwählen.

📐 Grenze

Verfügbar im Tab Design jedes Angebotstyps.

• Randbreite (0-10px): Passt die Dicke des Randes um das Widget (und Tierbalken für Quantity Break) an. Stellen Sie es auf 0 für einen randlosen, flachen Look.
• Randradius (0-50px): Kontrolliert, wie abgerundet die Ecken erscheinen. Niedrigere Werte geben einen scharfen, modernen Look; höhere Werte geben einen weichen, abgerundeten Look.

🖌️ Hintergrund & Border Farben (Karten, Fußzeile, Tags & Buttons)

verfügbar für Paketangebot, Produkt-Addons, Upsell Slider, und BYOBMit diesen Blöcken können Sie beide a Randfarbe und a Hintergrundfarbe für visuelle Schlüsselblöcke des Widgets.

📦 Bundle Offer & Product Addons:

• Produkt – die Produktkarten im Bundle.
• Fuß – der Fußzeilenbereich am unteren Rand des Widgets.
• Highlighted Tag Das hervorgehobene Abzeichen.
• Button - die Schaltfläche "In den Warenkorb hinzufügen".

🛍️ Upsell Slider:

• Produkt – die Produktkarten im Slider.
• Button - die Schaltfläche "In den Warenkorb hinzufügen".

🧺 BYOB:

• Button - die Haupttaste "Bundle zum Warenkorb hinzufügen".
• Produktknopf - die Schaltfläche "Hinzufügen" auf jeder Produktkarte.

💡 Tipp: Stellen Sie für Schaltflächen die Hintergrundfarbe auf die Primärfarbe Ihrer Marke ein und passen Sie die Rahmenfarbe für eine saubere, solide Schaltfläche an.

⚙️ Aussehen Umschalter (Quantity Break – General Tab)

Ein paar visuelle Optionen für Quantity Break live im Generalmajor Tab. Einstellungen → Aussehen und Aussehen anstelle des Design-Tab:

• Stückpreis angeben: Zeigt den Preis pro Einheit in jedem Tier an, so dass Kunden genau sehen können, was jeder Artikel kostet.
• Gesamtpreis anzeigen: Zeigt den Gesamtpreis für jedes Tier an.
• Kopf- und Fußzeilen ausblenden: Entfernt die Trennlinien oben und unten im Widget für ein saubereres, minimaleres Aussehen.

ℹ️ BYOB bietet auch eine Meldebogen Option im Tab Allgemein ()Shelf Pick oder Split Select), die das Gesamtlayout der Bundle-Seite ändert.

📌 Wichtige Hinweise

• ⚠️ Themes überschreiben Custom Styling. Durch das Anwenden einer Vorlage oder das Wechseln von Themes (Quantity Break) werden Ihre Designeinstellungen auf die Presets des Themes zurückgesetzt. Immer zuerst Themes anwenden, dann anpassen.
• ⚠️ Begrenzung der Textgröße. Einzelne Textelemente können 20px nicht überschreiten - größere Werte lösen einen Validierungsfehler aus.
• ℹ️ Font gilt widgetweit. Die Font-Einstellung wirkt sich auf den gesamten Text im Widget aus; Verwenden Sie die Pro-Elemente-Style-Einstellung (Bold, Italic usw.), um bestimmte Elemente hervorzuheben.
• ℹ️ Theme Font ist die sicherste Wahl. "Verwenden Sie Ihre Theme-Schriftart" garantiert, dass das Widget mit null Aufwand Ihrer Storefront-Typografie entspricht.
• ℹ️ Design-Einstellungen sind pro Angebot. Jedes Angebot hat sein eigenes unabhängiges Design - das Styling eines Angebots hat nie Auswirkungen auf Ihre anderen Angebote.
• ℹ️ Vorschau vs. Storefront. Die Live-Vorschau verwendet Beispieldaten. Nach dem Speichern und Veröffentlichen überprüfen Sie das Angebot auf einer echten Produktseite, um den Abstand zu bestätigen, und die Schriftarten schauen direkt in Ihr Thema.

💡 Beispiele & Use Cases

• Passen Sie Ihre Marke genau an: Geben Sie die Hex-Codes Ihrer Marke in die Farben Button, Block Title und Highlight ein und setzen Sie dann die Schriftart auf die nächstgelegene Übereinstimmung mit Ihrer Theme-Schriftart.
• Machen Sie den besten Tier Pop (Quantity Break): Geben Sie Ihrer "Beliebtesten" Stufe einen mutigen Tag-Stil, eine kontrastierende Tag-Hintergrundfarbe und eine starke Border-Farbe, damit die Augen der Käufer direkt darauf gerichtet sind.
• Sauberer minimaler Look: Setzen Sie Border Width auf 0, verstecken Sie die Header / Footer-Zeilen und verwenden Sie "Verwenden Sie Ihre Theme-Schriftart" für ein Widget, das nativ zu Ihrem Theme aussieht.
• Kontraststarke Buttons: Dark Button Hintergrund + weißer Button Text + passende Border Farbe = eine Schaltfläche, die angeklickt wird.
• Soft, friendly vibe: Bump Border Radius nach oben (20-50px) und wählen Sie eine Pastell-Hintergrundfarbe für die ausgewählte Stufe.

🚀 Endergebnis

Einmal erfolgreich konfiguriert, Design & Styling Einstellungen helfen Ihnen, Angebote zu erstellen, die wie ein natürlicher Teil Ihres Shops aussehen - kein verschraubtes Widget.

Mit dem richtigen Styling an Ort und Stelle:

✅ Angebots-Widgets fühlen sich vollständig mit Ihrem Store-Branding ausgerichtet ✅ Discount-Stufen und Bundle-Einsparungen werden einfacher zu scannen und zu verstehen ✅ Die Best-Value-Stufe und CTA-Buttons zeichnen sich optisch ab ✅ Kostenlose Geschenke und hervorgehobene Tags ziehen die Aufmerksamkeit der Käufer auf sich ✅ Angebote sehen sowohl auf dem Desktop als auch auf dem Mobilgerät poliert und konsistent aus ✅ Kunden genießen ein reibungsloseres, vertrauenswürdigeres Einkaufserlebnis

Die effektive Nutzung dieser Design- und Styling-Optionen kann die Kundenbindung, die Präsentation im Storefront-Bereich und das gesamte Konversionspotenzial erheblich verbessern. ✨

Aktualisiert am: 10/09/2026