> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/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). # 🎨 Bundles Angebot – Design & Styling > ℹ️ **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 Preview**Wenn 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 Angebot**Jede 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 **BYOB**Mit 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. ✨