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

# 🚀 Jak dostosować kolory widget

> ℹ️ **Note:** Ten artykuł został automatycznie przetłumaczony za pomocą AI i może zawierać nieścisłości. Jeśli coś wygląda źle, skontaktuj się z naszym zespołem wsparcia.

Wybieracz szczelin powinien czuć się jak naturalna część sklepu - a kolor jest najszybszym sposobem, aby to się stało 🎨

Z **Kolory widżetu aplikacji** ustawienia w Hoppy Delivery Dates, można dopasować przyciski, podświetlenia i tekst do tematu - oddzielnie dla Desktop i Mobile.

---

# **📌 Zanim zaczniesz**

*   Hoppy Delivery Dates jest zainstalowany, a aplikacja osadzona jest włączona w temacie
*   Wybór szczeliny jest widoczny na Twojej stronie koszyka
*   Jesteś zalogowany do swojego Shopify admin

---

# **Krok 1 - Otwórz stronę Wygląd**

W nawigacji aplikacji przejdź do:

**Hoppy Delivery Dates → Wygląd**

Znajdź **Kolory widżetu aplikacji** karta.

Karta ma **Desktop** oraz **Mobile** tabs - kolory są skonfigurowane oddzielnie dla każdego urządzenia.

---

# **Krok 2 - Zrozumienie ustawień czterech kolorów**

Istnieją cztery kolory do pracy z:

*   **Kolor pierwotny** → główny kolor akcentu. Używany do takich rzeczy jak wybrane stany, przyciski i górny pasek picker
*   **Kolor wtórny** → kolor tła używany za elementami picker
*   **Kolor czcionki pierwotnej** → kolor tekstu używany na tle wtórnym / światła
*   **Kolor czcionki wtórnej** → kolor tekstu używany na tle podstawowym / akcentu

### **Domyślne kolory**

*   Kolor pierwotny → `#3D3D3D` (ciemnoszary)
*   Kolor wtórny → `#ffffff` (biały)
*   Podstawowy kolor czcionki → `#3D3D3D`
*   Drugorzędowy kolor czcionki → `#ffffff`

---

# **Krok 3 - Ustawienie kolorów**

Każdy kolor ma dwa sposoby ustawienia:

*   Wpisz kod szesnastkowy bezpośrednio do pola tekstowego (np. `#1a73e8`)
*   Lub kliknij **swatch kolorów** obok pola, aby otworzyć wybielacz kolorów i wybrać wizualnie 🌈

Oba pozostają w synchronizacji - wybieranie z swatch aktualizuje pole hex, a wpisując hex uaktualnia swatch.

### **Przykład**

*   Kolor pierwotny → `#2c6ecb` (Twój motyw jest niebieski)
*   Kolor wtórny → `#ffffff`
*   Podstawowy kolor czcionki → `#212121`
*   Drugorzędowy kolor czcionki → `#ffffff`

💡 Najprostszy sposób, aby uzyskać idealne dopasowanie: skopiować kod szesnastkowy koloru przycisku motywu z **Sklep internetowy → Tematy → Dostosuj → Ustawienia motywu → Kolory**.

---

# **Krok 4 - Powtórzyć dla Mobile (opcjonalnie)**

Przełącz na **Mobile** tab i ustawić tam kolory, jeśli chcesz inny wygląd na mniejszych ekranach. Jeśli nie, skonfigurować obie zakładki o tych samych wartościach dla spójnego wyglądu.

---

# **Krok 5 - Zapisywanie i przegląd**

Kliknij **Zapisz** na górze strony.

Użyj panelu podglądu po prawej stronie strony Wygląd do szybkiego sprawdzenia, a następnie otwórz stronę koszyka, aby zobaczyć kolory na żywo 👀

---

# **⚠️ Ważne uwagi**

⚠️ Upewnij się, że kolory czcionki kontrastują dobrze z ich tła - lekki tekst na jasnym tle będzie trudny do przeczytania przez klientów.

ℹ️ Desktop i Mobile kolory są niezależne - pamiętaj, aby sprawdzić obie karty po zapisaniu.

---

# **🎉 Wynik końcowy**

Po skonfigurowaniu:

✅ Picker szczeliny pasuje do kolorów Twojego motywu ✅ Przyciski, podświetlenia i tekst używają wybranej palety ✅ Desktop i Mobile każdy wyglądać dokładnie tak, jak chcesz ✨