> ## 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). # 🎨 Upsell & Cross Sell - 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 Upsell & Cross Sell Widget sieht und fühlt sich auf Ihrer Storefront an. Von Hintergrundfarben und Abstand bis hin zu Typografie und Button Styling - jeder visuelle Teil des Widgets kann an Ihre Marke angepasst werden. Jedes Upsell-Setup (Produktseite, Warenkorbseite, Warenkorbschublade oder benutzerdefinierte Position) hat seine **eigene unabhängige Design-Einstellungen**, damit Sie ein Warenkorbschubladen-Widget anders als ein Produktseiten-Widget gestalten können ✨ Die meisten farbbezogenen Einstellungen umfassen: * Eine visuelle **Farbwähler** * A **Hex-Code** Eingang Dies macht es einfach, ob Sie es vorziehen, Farben visuell auszuwählen oder Ihre genauen Markenfarben einzufügen. # **⚠️ Bevor Sie beginnen** So konfigurieren Sie Design-Einstellungen: → Öffnen eines bestehenden Upsell & Cross Sell Setup → Oder erstellen Sie zuerst ein neues Setup Dann öffnen Sie die **Design** Tab oben auf der setup-seite. ℹ️ Design-Einstellungen ändern nur, wie das Widget **Blicke**Was das Widget sagt (Titel, Buttontext) ist im Inhalts-Tab konfiguriert und kann in Translation übersetzt werden. --- ## **👀 Live Preview** Während Sie innerhalb des Design-Tabs arbeiten, **Live Preview** wird neben den Einstellungen angezeigt. Jede Änderung, die Sie vornehmen, spiegelt sich sofort in der Vorschau wider - es ist keine Speicherung erforderlich, um zu sehen, wie die Dinge aussehen. * **Desktop Preview** Zeigt an, wie das Widget auf Desktop-Bildschirmen erscheint. * **Mobile Preview** Zeigt das Widget in einem mobilen Rahmen an, sodass Sie die Lesbarkeit auf kleineren Geräten überprüfen können. 💡 Die Vorschau verwendet Ihre echten Upsell-Produkte, Titel und Button-Text, so dass das, was Sie sehen, sehr nah an dem ist, was Kunden auf Ihrer Storefront sehen werden. --- ## **🖼️ Hintergrund** * **Was sie tut:** Steuert das Hintergrundbild des Upsell-Widget-Abschnitts. * **Verfügbare Optionen:** * **Einzelfarben** Tragen Sie eine solide Hintergrundfarbe auf. * **Gefälle** Mischen Sie zwei Farben reibungslos zusammen. ### **🎨 Einzelfarben** * Wählen Sie eine Farbe mit dem **Farbwähler** oder manuell eine **Hex-Code**. ### **🌈 Gefälle** * **Steigungswinkelgrad:** Steuert die Richtung des Gradienten (0-360°). * **Initial & Final Farbauswahl:** Wählen Sie die beiden Farben aus, die im Verlauf verwendet werden. 💡 Ein subtiler Verlauf kann dem Upsell-Bereich helfen, sich vom Rest der Seite abzuheben, ohne mit Ihrem Thema zu kollidieren. --- ## **📏 Abstand** Dieser Abschnitt steuert den Abstand sowohl innerhalb als auch außerhalb des Upsell-Widgets. * **Innen oben / unten:** Fügt den internen Abstand zwischen dem Widgetinhalt und den Rändern des Abschnitts hinzu. * **Außen oben / unten:** Fügt Abstand außerhalb des Abschnitts hinzu, um ihn von den umgebenden Seitenelementen zu trennen. Alle Werte sind in **Pixel (px)**. 💡 Verwendung **Außen** Abstand, um einen Atemraum zwischen dem Widget und Elementen wie der Schaltfläche zum Warenkorb hinzufügen zu schaffen, und **Innen** Abstand, um zu verhindern, dass der Inhalt die Schnittkanten berührt. --- ## **🔤 Typografie** Dieser Abschnitt steuert, wie alle Textelemente im Upsell-Widget erscheinen. ### **🏷️ Upsell Titel** * **Upsell Titelgröße:** Steuert die Größe der Upsell-Section-Überschrift (z.B.) _„Häufig zusammen gekauft_. * **Upsell Titelfarbe:** Ändert die Farbe der Überschrift des Abschnitts. ℹ️ Der Upsell-Titeltext selbst wird in der **Inhalt** Tab, nicht hier. ### **📦 Produktbezeichnung** * **Größe des Produkttitels:** Steuert die Größe jedes Produktnamens im Widget. * **Farbe Produkttitel:** Ändert die Produkttitelfarbe. ### **💰 Preis** * **Preisgröße:** Kontrolliert die Textgröße des Produktpreises. * **Preisfarbe:** Ändert die Produktpreisfarbe. ### **➡️ Pfeil** * **Pfeilgröße:** Steuert die Größe der Slider-Navigationspfeile. * **Pfeilfarbe:** Ändert die Pfeilfarbe. ℹ️ Navigationspfeile erscheinen nur, wenn das Widget enthält **mehr als ein Produkt** durchrutschen. --- ## **🔘 Button** Dieser Abschnitt passt den Upsell Call-to-Action-Button an (z.B.) _„Add to Cart_) für jedes Produkt angezeigt. ### **🎨 Knopffarbe** * Ändert die Hintergrundfarbe des Buttons. Der Button Border verwendet automatisch die gleiche Farbe. ### **🔤 Taste Textgröße und Farbe** * Steuert die Größe und Farbe des Textes innerhalb des Buttons. ### **⭕ Corner Radius und Button Style** * **Eckenhalbmesser:** Legt fest, wie abgerundet die Tastenecken erscheinen, in Pixeln. * **Tastenart:** Schnell zwischen _Quadrat_, _abgerundet_, und _Voll gerundet_. ℹ️ Diese beiden Einstellungen bleiben automatisch synchronisiert: * Wahl eines **Knopfform** wendet einen passenden Eckradius an. * Typisierung a **Eckenradius** value aktualisiert den Stil – niedrige Werte werden _Quadrat_mittlere Werte werden _abgerundet_und hohe Werte werden _Voll gerundet_. ### **💪 Schriftgewicht** * Steuert, wie fett oder leuchtend der Button-Text erscheint. * Wählen **Vererbung** um dem vorhandenen Schriftgewicht Ihres Themas zu folgen oder ein bestimmtes Gewicht von **100** (dünnst) bis **900000** (Boldest) ### **✍️ Schriftart** * Umschalten zwischen: * _Normal_ * _Italisch_ * _Unterstrich_ --- ## **💾 Speichern und Veröffentlichen Ihres Designs** Designänderungen sind nicht live, bis sie gespeichert sind. 1. Machen Sie Ihre Änderungen in der **Design** Tab - die live-vorschau wird sofort aktualisiert. 2. Klicken **Sparen** In der Speicherleiste oben auf der Seite. 3. Stellen Sie sicher, dass der Upselling **Veröffentlicht** So erscheint das aktualisierte Design auf Ihrer Storefront. ⚠️ **Bitte beachten Sie:** Als Hexcodes eingegebene Farbwerte werden am Speicher validiert. Wenn ein Hex-Code ungültig ist (z. B. fehlender Code) `#` oder ungültige Zeichen enthalten, wird das Speichern blockiert und eine Fehlermeldung markiert das Feld, das repariert werden muss. ℹ️ Wenn Ihr Design gespeichert und veröffentlicht wird, aber das Widget selbst auf der Storefront nicht sichtbar ist, hängt die Ursache normalerweise mit App-Einbettungen, Platzierung oder Targeting zusammen - siehe Upsell & Cross Sell Es wird nicht in meinem Shop angezeigt \[Fixed\]. --- ## **🛍️ Wie sich Designänderungen an der Storefront widerspiegeln** Wenn Sie ein veröffentlichtes Setup speichern, aktualisiert die App Ihren Shop automatisch. Das Storefront-Widget liest Ihre Design-Einstellungen und wendet sie überall an, wo das Widget rendert: * **Hintergrund** → Füllt den Widget-Bereich mit Ihrer einzigen Farbe oder Ihrem einzelnen Farbverlauf. * **Abstand** → Wendet Ihre Innenpolsterung und Außenränder um das Widget an. * **Typografie** → Stilisiert den Upsell-Titel, Produkttitel, Preise und Navigationspfeile. * **Button** → Stilisiert die Schaltfläche zum Warenkorb hinzufügen jedes Produkts, einschließlich Eckradius, Schriftgewicht und Schriftart. Da jeder Setup-Typ (Produktseite, Warenkorbseite, Warenkorbschublade, benutzerdefinierte Position) sein eigenes Design speichert, hat die Änderung eines Setups keine Auswirkungen auf das Aussehen der anderen. --- ## **🚀 Endergebnis** Einmal erfolgreich konfiguriert, **Design & Styling** Einstellungen helfen Händlern, ein visuell ansprechenderes, professionelleres und conversion-orientiertes Einkaufserlebnis zu schaffen. Mit der richtigen Styling-Anpassung: ✅ Das Upselling-Widget fühlt sich mit Ihrem Store-Branding ausgerichtet ✅ Produktempfehlungen werden auffälliger und ansprechender ✅ Preise und Produkttitel bleiben sowohl auf dem Desktop als auch auf dem Handy lesbar ✅ CTA-Buttons werden visuell attraktiver ✅ Jede Platzierung kann ihr eigenes Aussehen und Gefühl tragen ✅ Kunden erleben eine ausgefeiltere und vertrauenswürdigere Benutzeroberfläche Die effektive Nutzung dieser Design- und Styling-Optionen kann die Kundenbindung, die Präsentation im Storefront-Bereich und das gesamte Konversionspotenzial erheblich verbessern. ✨