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

Aktualisiert am: 10/09/2026