> ## 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).

# 🚀 Wie man Widget-Farben anpasst

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

Der slot picker sollte sich wie ein natürlicher teil ihres geschäfts anfühlen - und farbe ist der schnellste weg, um dies zu erreichen. 🎨

Mit dem **App Widget Farben** Einstellungen in Hoppy Delivery DatesSie können die Buttons, Highlights und Text des Pickers mit Ihrem Theme übereinstimmen - separat für Desktop und Mobile.

---

# **📌 Bevor Sie beginnen**

*   Hoppy Delivery Dates ist installiert und das App-Embed ist in Ihrem Theme aktiviert
*   Der slot picker ist auf ihrer wagenseite sichtbar.
*   Sie sind bei Ihrem Shopify Admin

---

# **Schritt 1 - Öffnen Sie die Erscheinungsseite**

In der App-Navigation gehen Sie zu:

**Hoppy Delivery Dates → Aussehen**

Finden Sie die **App Widget Farben** Karte.

Die Karte hat **Desktop** und **Mobil** Tabs - Farben werden für jedes Gerät separat konfiguriert.

---

# **Schritt 2 - Verstehen Sie die vier Farbeinstellungen**

Es gibt vier Farben, mit denen man arbeiten kann:

*   **Primärfarbe** → die Hauptakzentfarbe. Wird für Dinge wie ausgewählte Zustände, Buttons und die obere Leiste des Pickers verwendet
*   **Sekundärfarbe** → Hintergrundfarbe, die hinter Picker-Elementen verwendet wird
*   **Primärfarben** → die Textfarbe, die auf sekundären / hellen Hintergründen verwendet wird
*   **Sekundäre Schriftfarbe** → die Textfarbe, die auf primären / Akzenthintergründen verwendet wird

### **Standardfarben**

*   Primärfarbe `#3D3D3D` (dunkelgrau)
*   Sekundärfarbe `#ffffff` (weiß)
*   Primäre Schriftfarbe `#3D3D3D`
*   Sekundäre Schriftfarbe `#ffffff`

---

# **Schritt 3 - Stellen Sie Ihre Farben ein**

Jede Farbe hat zwei Möglichkeiten, sie festzulegen:

*   Geben Sie einen Hexcode direkt in das Textfeld ein (z.B.) `#1a73e8`)
*   Oder klicken Sie auf **Farbfleck** neben dem Feld, um den Farbwähler zu öffnen und visuell zu wählen 🌈

Beide bleiben synchron - das Auswählen aus dem Swatch aktualisiert das Hex-Feld und das Eingeben eines Hex aktualisiert das Swatch.

### **Beispiel**

*   Primärfarbe `#2c6ecb` (Button blau)
*   Sekundärfarbe `#ffffff`
*   Primäre Schriftfarbe `#212121`
*   Sekundäre Schriftfarbe `#ffffff`

💡 Der einfachste Weg, um eine perfekte Übereinstimmung zu erhalten: Kopieren Sie den Hex-Code der Schaltfläche Ihres Themas von **Online-Shop → Themen → Anpassen → Themeneinstellungen → Farben**.

---

# **Schritt 4 — Wiederholen für Mobilgeräte (optional)**

Wechsel zum **Mobil** Tab und setzen Sie Farben auch dort, wenn Sie einen anderen Look auf kleineren Bildschirmen wollen. Wenn nicht, konfigurieren Sie beide Registerkarten mit den gleichen Werten für ein konsistentes Erscheinungsbild.

---

# **Schritt 5 — Speichern und Überprüfen**

Klicken **Sparen** Ganz oben auf der Seite.

Verwenden Sie das Vorschaufeld auf der rechten Seite der Erscheinungsseite für eine schnelle Überprüfung, dann öffnen Sie Ihre Warenkorbseite, um die Farben live zu sehen 👀

---

# **⚠️ Wichtige Hinweise**

⚠️ Stellen Sie sicher, dass Ihre Schriftfarben gut mit ihren Hintergründen kontrastieren - heller Text auf einem hellen Hintergrund wird für Kunden schwer zu lesen sein.

ℹ️ Desktop- und Mobile-Farben sind unabhängig - denken Sie daran, beide Registerkarten nach dem Speichern zu überprüfen.

---

# **🎉 Endergebnis**

Einmal erfolgreich konfiguriert:

✅ Der slot picker passt zu den farben ihres themas. ✅ Buttons, Highlights und Text verwenden alle Ihre gewählte Palette ✅ Desktop und Mobile sehen jeweils genau so aus, wie Sie möchten ✨