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

Aktualizowane na: 10/09/2026