Der Tab Design (Design) gibt dir die vollständige Kontrolle darüber, wie deine Hinweisleiste in deinem Shop aussieht und wirkt. Von Hintergrundfarben und Typografie bis hin zu Button-Animationen, Icon-Styling und benutzerdefiniertem CSS – fast jedes visuelle Detail kann an deine Marke angepasst werden.

Du kannst entweder schnell mit einer fertigen Vorlage starten oder jeden Pixel manuell anpassen. Auf jeden Fall wirkt die Leiste wie ein natürlicher Teil deines Shops 🎨

Die meisten farbbezogenen Einstellungen umfassen:

• Einen Color Picker (Farbwähler) zur visuellen Auswahl
• Ein Hex Code Input (Hexadezimaleingabe) für exakte Markenfarben

⚠️ Bevor du beginnst

So konfigurierst du die Design-Einstellungen:

→ Öffne eine bestehende Hinweisleiste
→ Oder erstelle zuerst eine neue

Klicke dann im Editor auf den Tab Design (Design).

ℹ️ Einige Optionen werden nur für bestimmte Leistentypen oder Konfigurationen angezeigt. So werden Slide-Animationen beispielsweise nur für Multiple-Leisten (Mehrfach) angezeigt, und das Coupon-Styling erscheint nur, wenn ein Coupon-CTA (Gutschein) verwendet wird. Diese bedingten Felder sind unten markiert, damit du genau weißt, wann du sie erwarten kannst.

🎨 Template

• Funktion: Wendet sofort einen vorgefertigten visuellen Stil auf deine Hinweisleiste an.
• Verwendung: Wähle aus über 25 Vorlagen, um dein Design schnell zu starten, ohne jedes Feld manuell anzupassen.

Jede Vorlage füllt vorab:

• Hintergrundtyp, -farbe und -verlaufseinstellungen
• Titel- und Untertitel-Farben und -Größen
• Button-Farben, Textfarbe und Eckenradius
• Rahmen-, Icon- und Coupon-Styling

Verfügbare Vorlagen umfassen: Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy

⚠️ Wichtig: Die Auswahl einer Vorlage überschreibt die meisten Design-Felder. Deine Einstellung Visibility (Sichtbarkeit) und Position (Position), konfiguriert im Tab Placement (Platzierung), bleiben erhalten.

💡 Vorlagen eignen sich hervorragend für saisonale Kampagnen. Du möchtest einen Black-Friday-Look? Wähle die Vorlage Black Friday und passe sie von dort aus an.

👀 Visibility

• Funktion: Steuert, auf welchen Geräten deine Hinweisleiste angezeigt wird.
• Optionen:
• • Desktop and Mobile (Desktop und Mobil) — Auf allen Geräten sichtbar
  • Only Desktop (Nur Desktop)
  • Only Mobile (Nur Mobil)

Das ist hilfreich, wenn du unterschiedliche Botschaften oder Layouts für Desktop-Besucher und mobile Besucher verwenden möchtest.

🖼️ Background Style

• Funktion: Ändert das Erscheinungsbild des Hintergrunds der Hinweisleiste.
• Verfügbare Optionen:
• • Single Color (Einzelne Farbe) — Eine einfarbige Hintergrundfarbe
  • Gradient (Farbverlauf) — Zwei Farben, die in einem benutzerdefinierten Winkel gemischt werden
  • Patterns (Muster) — Dekorative Hintergrundmuster

🎨 Single Color

• Wähle eine Farbe mit dem Color Picker (Farbwähler) oder gib einen Hex Code (Hex-Code) manuell ein.

🌈 Gradient

• Gradient Angle Degree (Farbverlaufwinkel): Steuert die Richtung der Mischung (0–360°)
• Initial Color (Anfangsfarbe): Die Startfarbe
• Final Color (Endfarbe): Die Endfarbe

💡 Ein dezenter Farbverlauf kann Tiefe verleihen, ohne abzulenken. Probiere niedrige Kontrastwinkel für einen modernen Look aus.

✨ Patterns

Wenn du Patterns (Muster) auswählst, wird ein Dropdown mit über 35 integrierten Hintergrundoptionen angezeigt:

• Dekorativ: Wavy, Sale, Discount, Balloon, Girly, Party, Fresh
• Feiertage & Saisonales: Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday
• Texturiert: Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese

ℹ️ Muster werden als CSS-Hintergrundstile angewendet. Einige verwenden reines CSS, andere Bild-Assets.

📐 Borders & Corners

Dieser Bereich steuert Form und Umriss der Leiste.

• Bar Corner Radius (px) (Eckenradius der Leiste in px): Wie abgerundet die Ecken der Leiste erscheinen
• Bar Padding (px) (Innenabstand der Leiste in px): Der innere Abstand zwischen den Leistenrändern und ihrem Inhalt
• Border Size (px) (Rahmenstärke in px): Dicke des äußeren Rahmens
• Border Color (Rahmenfarbe): Die Farbe des Rahmens

💡 Ein Eckenradius von 0 ergibt eine scharfe rechteckige Leiste. Höhere Werte erzeugen weichere, modernere Formen.

🔤 Typography

Dieser Bereich steuert, wie der gesamte Text in der Hinweisleiste angezeigt wird.

📝 Title Styling

• Title Size (px) (Titelgröße in px): Die Größe der Hauptbotschaft
• Title Color (Titelfarbe): Die Farbe der Hauptbotschaft

📄 Subheading Styling

• Subheading Size (px) (Untertitelgröße in px): Die Größe des ergänzenden Textes
• Subheading Color (Untertitelfarbe): Die Farbe des ergänzenden Textes

ℹ️ Das Untertitelfeld wird ausgeblendet, wenn der Leistentyp Running (Laufband) verwendet wird, da Laufband-Leisten in der Regel nur eine Textzeile nutzen.

🔠 Font

Wähle aus 63 verfügbaren Schriftarten, darunter:

• Systemschriftarten: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI und mehr
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script und viele mehr

Die erste Option lautet Use your theme font (Schriftart deines Themes verwenden), die automatisch an die vorhandene Typografie deines Shops angepasst wird.

💡 Für gute Lesbarkeit verwendest du am besten 1–2 Schriftarten pro Leiste. Eine kräftige Display-Schriftart für den Titel und eine saubere Sans-Serif für den Untertitel funktionieren oft gut.

🔘 Button Design

Dieser Bereich passt den Call-to-Action-Button an.

ℹ️ Diese Einstellungen sind immer im Tab Design (Design) verfügbar. Sie wirken sich nur auf das Storefront aus, wenn dein CTA-Typ auf Button (Button), Full Bar (Gesamte Leiste) oder Trigger (Auslöser) eingestellt ist.

🎨 Button Color

• Ändert die Hintergrundfarbe des CTA-Buttons.

🔤 Button Text Size & Color

• Size (px) (Größe in px): Steuert die Textgröße innerhalb des Buttons
• Color (Farbe): Ändert die Farbe des Button-Textes

⭕ Corner Radius & Button Style

Diese beiden Felder sind verknüpft:

• Corner Radius (px) (Eckenradius in px): Gib manuell einen Wert ein, um die Rundung zu steuern
• Button Style (Button-Stil): Schneller Wechsel zwischen Voreinstellungen:
• • Square (Eckig) → setzt den Radius auf 0 px
  • Rounded (Abgerundet) → setzt den Radius auf 10 px
  • Fully Rounded (Vollständig abgerundet) → setzt den Radius auf 30 px

Wenn du eine Stilvoreinstellung auswählst, wird der Eckenradius automatisch aktualisiert. Gibst du einen benutzerdefinierten Radius ein, passt sich die Stilvoreinstellung entsprechend an:

• 0–9 px → Square
• 10–29 px → Rounded
• 30+ px → Fully Rounded

💪 Font Weight

• Steuert, wie fett oder leicht der Button-Text erscheint
• Optionen: Normal, Bold, 100–900

✍️ Font Style

• Wechsle zwischen: Normal, Italic, Underline

✨ Button Animation

Fügt dem Button eine kontinuierliche Animation hinzu, damit er auffällt.

Verfügbare Animationen: None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip

💡 Dezente Animationen wie Bounce oder Emitting ziehen die Aufmerksamkeit auf sich, ohne aufdringlich zu wirken. Verwende Flip oder Tada für Kampagnen mit hoher Dringlichkeit.

🏷️ Coupon Design

Dieser Bereich passt das Erscheinungsbild des Gutscheincode-Feldes an.

ℹ️ Dieser Bereich wird nur angezeigt, wenn:

• Eine beliebige Inhaltsslide Coupon (Gutschein) als CTA-Typ verwendet, oder
• Der Leistentyp auf Email (E-Mail) eingestellt ist

Verfügbare Einstellungen

• Coupon Border Style (Gutschein-Rahmenstil): Dashed (Gestrichelt), Solid (Durchgezogen), Dotted (Gepunktet), Double (Doppelt), Groove (Gerillt), Ridge (Erhaben), Inset (Eingesetzt), Outset (Hervorgehoben) oder None (Keiner)
• Coupon Border Color (Gutschein-Rahmenfarbe): Die Umrissfarbe des Gutscheinfeldes
• Coupon Text Color (Gutschein-Textfarbe): Die Farbe des Gutscheincode-Textes
• Coupon Background (Gutschein-Hintergrund): Die Hintergrundfarbe des Gutscheinfeldes (unterstützt transparente Hintergründe)

💡 Ein gestrichelter Rahmen mit kontrastierendem Hintergrund ist der klassische Gutschein-Look. Probiere einen halbtransparenten Hintergrund, wenn das Muster oder der Farbverlauf der Leiste durchscheinen soll.

🎆 Bar Animations

Multiple Bar Transition

Nur verfügbar, wenn der Leistentyp auf Multiple (Mehrfach) eingestellt ist.

Steuert, wie Slides ineinander übergehen:

• Slide (Gleiten) — Gleitet horizontal zwischen Ankündigungen
• Fade In (Einblenden) — Blendet sanft von einem Slide zum nächsten
• Cube (Würfel) — Ein 3D-Würfel-Rotationseffekt
• Flip (Drehen) — Ein Karten-Dreh-Übergangseffekt

ℹ️ Diese Einstellung befindet sich im Tab Design (Design), nicht im Tab Content (Inhalt).

🎨 Icon Settings

🚪 Close Icon Color

• Ändert die Farbe des Schließen- (Verwerfen-) Button-Icons.
• Nur sichtbar, wenn die Option Close Icon (Schließen-Icon) im Tab Content (Inhalt) aktiviert ist.

➡️ Arrow Icon Color

• Ändert die Farbe der Navigationspfeile.
• Nur sichtbar, wenn der Leistentyp auf Multiple (Mehrfach) eingestellt ist, da die Pfeile zum Navigieren zwischen Slides verwendet werden.

👥 Banner Icons (Social Icons)

Dieser Bereich gestaltet Social-Media-Icons, die innerhalb der Leiste angezeigt werden.

• Social Icon Size (px) (Social-Icon-Größe in px): Passt die Icon-Größe an
• Social Icon Color (Social-Icon-Farbe): Ändert die Icon-Farbe
• Social Icon Position (Social-Icon-Position): Platziert die Icons auf der Left (Linken) oder Right (Rechten) Seite der Leiste
• Use Original Social Icon Color (Originale Social-Icon-Farbe verwenden): Wenn aktiviert, behält jede Plattform ihre Markenfarbe (Facebook-Blau, Instagram-Verlauf usw.) statt deiner benutzerdefinierten Farbe

ℹ️ Social-Icons werden im Tab Content (Inhalt) konfiguriert. Der Tab Design (Design) steuert nur ihr Aussehen.

💻 Custom CSS (für fortgeschrittene Nutzer)

💡 Erweiterte Funktion: Wenn du Styling benötigst, das in den Standardeinstellungen nicht verfügbar ist, kannst du dein eigenes CSS direkt im Editor eingeben.

Wenn aktiviert, wird ein CSS-Gerüst mit vordefinierten Ziel-Klassen bereitgestellt:

• Gesamter Leisten-Container: .futureblink-announcement-bar
• Titel-Text: .futureblink-announcement-bar .title
• Untertitel-Text: .futureblink-announcement-bar .subheading
• Mobiler Titel: .futureblink-announcement-bar.mobile .title
• Mobiler Untertitel: .futureblink-announcement-bar.mobile .subheading
• CTA-Button: .futureblink-announcement-bar .cta-button
• Mobiler CTA-Button: .futureblink-announcement-bar.mobile .cta-button
• Schließen-Button: .futureblink-announcement-bar .close-btn
• Navigationspfeile: .futureblink-announcement-bar .arrow
• Zurück-/Weiter-Buttons: .futureblink-announcement-bar .button-prev und .button-next

So funktioniert benutzerdefiniertes CSS im Shop-Frontend:

• Alle Selektoren werden automatisch auf deine spezifische Hinweisleiste beschränkt
• Jede Deklaration erhält !important-Priorität, um Theme-Stile zu überschreiben
• Mobile Selektoren (.mobile) werden automatisch in eine mobile Media-Query eingebettet
• Das CSS wird als <style>-Tag eingefügt, wenn die Leiste gerendert wird

⚠️ Bitte beachten: Benutzerdefiniertes CSS ist leistungsstark, kann aber mit Theme-Stilen in Konflikt geraten. Teste nach Änderungen gründlich auf Desktop und Mobil.

🛒 Checkout Design

Nur verfügbar für Hinweisleisten, die auf der Checkout Page (Checkout-Seite) platziert werden (Shopify Plus erforderlich).

Wenn der Tab Placement (Platzierung) auf Checkout Page (Checkout-Seite) eingestellt ist, wird der gesamte Tab Design (Design) durch ein vereinfachtes Panel ersetzt:

• Checkout Title Size (Checkout-Titelgröße) — Extra Small, Small, Base, Medium, Large, Extra Large
• Checkout Title Color (Checkout-Titelfarbe) — Blue, Dull Grey, Black, Green, Yellow, Red
• Checkout Subheading Size (Checkout-Untertitelgröße) — Dieselben Größenoptionen
• Checkout Subheading Color (Checkout-Untertitelfarbe) — Dieselben Farboptionen

ℹ️ Das Checkout-Design verwendet die nativen Tone-Tokens von Shopify, damit die Gestaltung im Checkout-Umfeld einheitlich bleibt. Farbverläufe, Muster, Buttons und benutzerdefiniertes CSS sind in Checkout-Leisten nicht verfügbar.

🚀 Endergebnis

Wenn sie erfolgreich konfiguriert wurden, helfen dir die Einstellungen für Design & Styling, eine optisch konsistente, professionelle Hinweisleiste zu erstellen, die wie ein natürlicher Teil deines Shops wirkt.

Mit passendem Styling erzielst du:

✅ Die Leiste passt zu deinen Markenfarben und deiner Typografie
✅ Wichtige Botschaften werden auffälliger und lesbarer
✅ Buttons und CTAs fallen auf, ohne aufdringlich zu wirken
✅ Hintergrundmuster und -verläufe verleihen visuelle Persönlichkeit
✅ Slide-Übergänge wirken flüssig und poliert
✅ Mobile und Desktop-Erfahrungen werden unabhängig voneinander optimiert
✅ Fortgeschrittene Nutzer können das Styling mit benutzerdefiniertem CSS erweitern

Die effektive Nutzung dieser Design- und Styling-Optionen sorgt dafür, dass jede Hinweisleiste durchdacht, markenkonform und einfach für Kunden zum Interagieren wirkt ✨

Aktualisiert am: 01/09/2026