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

Die Registerkarte Design gibt Ihnen die volle Kontrolle darüber, wie die Free Shipping Upsell Bar in Ihrem Geschäft aussieht und sich anfühlt. Von Farben und Abständen bis hin zu Typografie, Animationen, Schaltflächen und Upsell-Karten - fast jeder visuelle Aspekt kann an Ihre Marke angepasst werden.

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

• Schnelles Starten mit vorgefertigten Templates
• Oder passen Sie jedes Detail perfekt an Ihre Storefront an

Die meisten farbbezogenen Einstellungen umfassen:

• Ein Color Picker
• Eine Hex-Code-Eingabe

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

⚠️ Bevor Sie beginnen

So konfigurieren Sie Design-Einstellungen:

→ Öffnen Sie ein bestehendes Free Shipping Upsell Setup
Oder erstellen Sie zuerst ein neues Setup

Dann:

• Für die Basierend auf Placement Workflow

→ Öffnen Sie die Design Spitze

• Für die Basierend auf Zielen Workflow

→ Öffnen Sie den Platzierungs-Tab, den Sie anpassen möchten

ℹ️ Auf Styling-Einstellungen wird je nach verwendetem Workflowtyp unterschiedlich zugegriffen.

🎨 Meldebogen

• Was sie tut: Sie können sofort einen vorgefertigten visuellen Stil auf Ihre Free Shipping Upsell Bar anwenden.
• Wie zu verwenden: Wählen Sie aus verfügbaren Vorlagen, um Ihr Design schnell zu starten, ohne jede Einstellung manuell anzupassen.

👀 Sichtbarkeit

• Was sie tut: Steuerelemente, bei denen die Free Shipping Upsell Bar erscheint.
• Optionen:
• • Desktop und Mobile – Sichtbar auf allen Geräten.
  • Desktop nur
  • Nur mobil

📏 Balkenbreite

• Was sie tut: Steuert, wie viel horizontale Breite die Free Shipping Bar einnehmen soll.
• Wie zu verwenden: Erhöhen oder verringern Sie den Prozentsatz der Breite, je nachdem, wie kompakt oder breit der Abschnitt erscheinen soll.

🖼️ Hintergrundstil

• Was sie tut: Ändert das Hintergrundbild der Free Shipping Upsell Bar.
• Verfügbare Optionen:
• • Einzelfarben Tragen Sie eine solide Hintergrundfarbe auf.
  • Gefälle Mischen Sie zwei Farben reibungslos zusammen.
  • Muster - Tragen Sie dekorative Hintergrundmuster auf.

🎨 Einzelfarben

• Wählen Sie eine Farbe mit dem Farbwähler oder manuell eine Hex-Code.

🌈 Gefälle

• Steigungswinkelgrad: Steuert die Richtung des Gradienteneffekts.
• Color Picker 1 & 2: Wählen Sie die beiden Farben aus, die im Verlauf verwendet werden.

✨ Muster

• Ermöglicht die Muster auswählen Option, bei der Sie aus einer Vielzahl von eingebauten Hintergrundmustern wählen können.

📐 Grenzen und Ecken

• Grenzradius (px): Steuert, wie abgerundet die Ecken des Abschnitts erscheinen.
• Randgröße (px): Passt die Dicke der Grenze an.
• Randfarbe: Ändert die Rahmenfarbe mit dem Farbwähler oder Hex-Eingang.

📏 Abstand

Dieser Abschnitt hilft Ihnen, den Abstand sowohl innerhalb als auch außerhalb der Free Shipping Upsell Bar zu kontrollieren.

• Draußen oben / unten: Fügt Abstand außerhalb des Abschnitts hinzu, um ihn von den umgebenden Elementen zu trennen.
• Innen oben / unten: Fügen Sie den internen Abstand zwischen dem Inhalt und den Rändern des Abschnitts hinzu.

Hier ist, was Outside / Inside Abstand bedeuten:

🎆 Hinzufügen von Fireworks Animation

• Was sie tut: Fügt einen subtilen Feuerwerk-Animationseffekt hinzu, wenn Ziele erreicht werden.
• Optionen:
• • Feuerwerk am Jede Zielerreichung.
  • Feuerwerkskörper zeigen Nur beim Endziel.

🔤 Typografie

Dieser Abschnitt steuert, wie alle Textelemente in der Free Shipping Upsell Bar erscheinen.

📝 Nachricht Styling

• Nachrichtengröße: Passt die Größe des Hauptnachrichtentextes an.
• Nachrichtenfarbe: Ändert die Farbe der Nachricht, die über der Fortschrittsleiste angezeigt wird.

🎉 Zielnachricht Farbe

• Ändert die Farbe der Erfolgsnachricht, die angezeigt wird, nachdem ein Ziel erreicht wurde.

🔠 Schriftzug

• Wählen Sie aus verfügbaren Schriftarten oder wählen Verwenden Sie Ihre Theme Font um Ihr Shop-Thema automatisch anzupassen.

💪 Schriftgewicht

• Kontrolliert, wie fett oder hell der Text erscheint.
• Sie können auch auswählen Vererbung um dem vorhandenen Schriftgewicht Ihres Themas zu folgen.

💰 Preis Text Styling

Passen Sie an, wie der Preisbetrag in der Nachricht erscheint.

• Größe: Steuert die Schriftgröße des hervorgehobenen Preises.
• Farbe: Ändert die Preistextfarbe.

✨ Preis Text Animation

• Fügt Animationseffekte zum Preistext hinzu, damit er sich mehr abhebt.

📊 Progress Bar

In diesem Abschnitt können Sie das Aussehen und Verhalten der Fortschrittsleiste anpassen.

👁️ Fortschrittsbar anzeigen

• Schalten Sie die Fortschrittsleiste Sichtbarkeit ein oder aus.

🎨 Hintergrundfarbe

• Ändert die Hintergrundfarbe der ungefüllten Fortschrittsleiste.

🟩 Füllfarbe

• Steuert die Farbe des gefüllten Fortschrittsabschnitts.

🎯 Mehrere Ziele Marker

Wählen Sie aus, wie mehrere Ziele in der Fortschrittsleiste angezeigt werden.

• Zeigen Sie nur ein Ziel auf einmal Setzt die Bar nach Erreichen eines Ziels zurück, um sich auf das nächste zu konzentrieren.
• Alle Ziele auf einmal zeigen Zeigt alle Ziel-Meilensteine zusammen in der gleichen Bar an.

Beispiel:

📦 Bar Style

• Wählen Sie aus den verfügbaren visuellen Stilen für die Fortschrittsleiste.

📐 Breite

• Steuert die Breite des Fortschrittsbalkens selbst.

⭕ Eckenradius

• Passt an, wie abgerundet die Progress Bar Ecken erscheinen.

📏 Höhe

• Steuert die Dicke/Höhe des Fortschrittsbalkens.

↕️ Raum oben / unten

• Stellt den Abstand oberhalb und unterhalb der Fortschrittsleiste ein.

🔘 Knopfdesign

In diesem Abschnitt wird der CTA-Button neben der Nachricht Free Shipping angepasst.

Anmerkung: Dieser Abschnitt gilt nur, wenn Button ausgewählt ist als Aufruf zum Aktionstyp im Ziel-Tab.

🎨 Knopffarbe

• Ändert die Hintergrundfarbe des CTA-Buttons.

🔤 Taste Textgröße und Farbe

• Steuert die Textgröße und -farbe innerhalb des Buttons.

⭕ Eckenradius

• Passt an, wie abgerundet die Knopfecken erscheinen.

📦 Tastenart

• Wechseln Sie schnell zwischen Stilen wie:
• • Quadrat
  • abgerundet
  • Voll abgerundet

💪 Schriftgewicht

• Steuert die Dicke des Button-Textes.

✍️ Schriftart

• Umschalten zwischen:
• • Normal
  • Italisch
  • Unterstrich

✨ Button Animation Style

• Fügt kontinuierliche Animationseffekte zum Button hinzu.

🖱️ Button Hover Effekte

• Fügt interaktive Effekte hinzu, wenn Benutzer über den Button schweben.

🛍️ Upsell Design

Dieser Abschnitt passt das Aussehen des Upsell-Abschnitts an.

Anmerkung: Dieser Abschnitt gilt nur, wenn eine andere Upsell-Option als Kein Upsell ist im Tab Upsell/Placement ausgewählt.

🔤 Typografie

🏷️ Upsell Titel

• Titelgröße: Steuert die Größe der Upsell-Überschrift.
• Titel Farbe: Ändert die Farbe der Überschrift Upsell.

📦 Produktbezeichnung

• Produktbezeichnung Größe: Kontrolliert die Größe des Produktnamens.
• Produkttitel Farbe: Ändert die Produkttitelfarbe.

💰 Preisgestaltung

• Preisgröße: Kontrolliert die Textgröße des Produktpreises.
• Preisfarbe: Ändert die Produktpreisfarbe.

➡️ Arrow Styling

• Pfeilgröße: Steuert die Größe der Navigationspfeile.
• Pfeilfarbe: Ändert die Pfeilfarbe.

🔘 Hinzufügen zu Cart Button Styling

• Knopffarbe: Ändert die Hintergrundfarbe des Buttons.
• Button Textgröße & Farbe: Kontrolliert das Aussehen des Textes.
• Eckenhalbmesser: Stellt die Knopfrundheit ein.
• Tastenart: Wählen Sie aus verfügbaren Button-Styles.
• Schriftgewicht: Kontrolliert die Textdicke.
• Schriftart: Wechsel zwischen verschiedenen Textstilen.

💻 Custom CSS (für Entwickler)

💡Erweitertes FeatureWenn Sie ein völlig einzigartiges Styling hinzufügen möchten, das in den Standardeinstellungen nicht verfügbar ist, können Sie Ihr benutzerdefiniertes CSS direkt in das Editorfeld einfügen.

• Bereitstellung von Zielklassen:
• • Gesamter Badge Container: .futureblink-free-shipping
  • Fortschrittsmeldung: .futureblink-free-shipping .futureblink-message
  • Icon über der Progress-Leiste: .futureblink-free-shipping .futureblink-icon
  • Call-to-Action-Taste: .futureblink-free-shipping .futureblink-cta-button
• Klicken Beantragen um Ihre Stile sofort zu testen.

„⚠️ Bitte beachten Sie: Wenn die Stile nach dem Klick Auf Anwenden nicht angewendet werden, versuchen Sie es bitte erneut, indem Sie hinzufügen !important zu jeder Erklärung.

🎯 Icon Einstellungen

Hinzufügen und Anpassen eines Symbols, das über der Fortschrittsleiste angezeigt wird.

🖼️ Icon auswählen / entfernen

• Öffnen Sie die integrierte Icon Library, um ein Icon auszuwählen.
• Entfernen Sie das aktuell ausgewählte Icon jederzeit.

📤 Upload Icon

• Laden Sie Ihr eigenes benutzerdefiniertes Icon für vollständige Flexibilität hoch.

📏 Icon Größe & Farbe

• Passen Sie die Symbolgröße an und ändern Sie ihre Farbe.

🚀 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:

✅ Die Free Shipping Bar fühlt sich mehr mit Ihrem Store Branding ausgerichtet
✅ Wichtige Nachrichten werden auffälliger und ansprechender
✅ Fortschrittsverfolgung fühlt sich sauberer und leichter zu verstehen an
✅ CTA-Buttons werden visuell attraktiver
✅ Upsell-Sektionen verschmelzen natürlicher in die Storefront
✅ Kunden erleben eine ausgefeiltere und interaktivere Benutzeroberfläche
✅ Händler erhalten eine bessere Kontrolle über das Gesamtbild und die Benutzererfahrung

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