ℹ️ 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 BlickeWas 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. ✨

Aktualisiert am: 15/09/2026