> ## 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). # 🎨 Liczenia - Design & Styling > ℹ️ **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. Karta Design daje pełną kontrolę nad tym, jak twój zegar odliczania wygląda na twoim sklepie. Od kolorów i czcionek do animacji zegara i wzorców tła, prawie każdy szczegół wizualny może być dostosowany do Twojej marki. Możesz albo: * Szybkie uruchomienie przy użyciu **Wzory formularzy** * Lub głęboko dostosować **każdy szczegół wizualny** ręcznie Ten przewodnik rozbija każdą opcję projektowania, dzięki czemu można budować liczniki, które czują się rodzime do sklepu ✨ --- # **⚠️ Zanim zaczniesz** Konfigurowanie ustawień projektu: → Otwórz istniejącą konfigurację licznika → Albo najpierw utworzyć nowy licznik czasu Następnie przejdź do **Projekt** zakładka wewnątrz edytora odliczania. ℹ️ Dostępne opcje projektowe zmieniają się w zależności od tego, **Rodzaj umieszczenia** Wybrałeś. Na przykład, Countdown strony checkout używać ShopifySystem projektowy i oferuje znacznie mniej opcji personalizacji. --- # **🎨 Szablon i widoczność** Ta sekcja kontroluje ogólny wizualny punkt startowy i widoczność urządzenia dla odliczania. --- ## **Szablony wykonane wstępnie** W **Szablon** dropdown pozwala na natychmiastowe zastosowanie pełnego stylu wizualnego. Są **24 wbudowane szablony** do wyboru, w tym: * **Dawn** - Czysty i minimalny * **Elektryczne** - Odważny i energiczny * **Las** - Naturalne tony ziemi * **Neon** - Bright and eyey- catching * **Minimalne** - Prostota pleców * **Mięta** - Miękkie i świeże * **Guma bąbelkowa** - Zabawny i kolorowy * I wiele więcej Wybór szablonu automatycznie wypełnia się: * Kolory tła lub gradienty * Style graniczne * Kolory i rozmiary typografii * Stylizacja przycisku 💡 Jeśli wybierzesz szablon, a następnie ręcznie ustawisz indywidualne ustawienia, zmiany zostaną zachowane. Wybór nowego szablonu później nadpisze wartości niestandardowe. ℹ️ Dla **Strona koszyka**, **Drawer w koszyku**oraz **Bar górny / dolny** staże, szablony zachować istniejące **wielkość tytułu**, **Rozmiar zegara**oraz **Rozmiar separatora** Zamiast przesadzać. --- ## **Widoczność** Sterowanie urządzeniami, na których pojawia się odliczanie: * **Komputer stacjonarny i mobilny** - Widoczne wszędzie (domyślnie) * **Tylko pulpit** - Ukryte na urządzeniach mobilnych * **Tylko mobilne** - Ukryte na pulpicie --- ## **Położenie i lepkie zachowanie** Te opcje pojawiają się tylko dla **Bar górny / dolny** Liczby. * **Pozycja** - Wybierz **Góra** lub **Dół** strony * **Sticky** - Pojawia się. **tylko wtedy, gdy pozycja jest ustawiona na Top**. Po włączeniu, pasek pozostaje na górze ekranu podczas przewijania klientów. --- # **Styl Timera** Ta sekcja kontroluje sposób wyświetlania cyfr odliczania. ℹ️ Ta sekcja jest **niedostępne** zamiast **Strona koszyka**, **Drawer w koszyku**, **Stopień strony koszyka**lub **Strona odprawy** Liczby. --- ## **Dostępne style** * **Zegar zwrotny** - Klasyczna animacja 3D dla każdej cyfry * **Podwójne płytki** - Każda cyfra dostaje własne mini flipp płytek * **Liczby proste** - Czyste cyfry bez pola tła * **Płytki kwadratowe** - Liczby wewnątrz zaokrąglonych kwadratów * **Płytki okrągłe** - Liczby wewnątrz okrągłych pudełek * **Brak - zegar ukrywania** - Usuwa cyfry timera całkowicie --- ## **Kolor tła licznika** Pojawia się ten wybielacz kolorów **tylko wtedy, gdy** wybrać: * Zegar zwrotny * Podwójne płytki * Płytki kwadratowe * Płytki okrągłe Tak. **nie** dla **Liczby proste** lub **Brak**. Dla stylów flipclock, dolna połowa każdej płytki flipfle jest automatycznie renderowana w nieco lżejszym odcieniu wybranego koloru. Tworzy to realistyczny efekt rzutu 3D w sklepach. --- # **🖼️ Kontekst** Ta sekcja kontroluje wygląd tła kontenera do odliczania. ℹ️ Ta sekcja jest **niedostępne** zamiast **Strona odprawy** Liczby. --- ## **Typy tła** * **Pojedynczy kolor** - Jeden solidny kolor tła * **Gradient** - Dwa kolory zmieszane pod kątem, który kontrolujesz * **Gradient koloru tri** - Trzy kolory zmieszane pod kątem, który kontrolujesz * **Wzory** - Dekoracyjne nakłady tła --- ## **Pojedynczy kolor** Wybierz kolor za pomocą **Wybór koloru** lub wprowadzić **Kod szesnastkowy** bezpośrednio. --- ## **Gradient** Po wybraniu, pojawiają się trzy dodatkowe pola: * **Stopień gradientu kątowego** - Steruje kierunkiem (0 ° do 360 °) * **Kolor początkowy** - Kolor startowy * **Kolor końcowy** - Kolor zakończenia --- ## **Gradient koloru tri** Po wybraniu, pojawiają się cztery dodatkowe pola: * **Stopień gradientu kątowego** * **Kolor początkowy** * **Kolor pośredni** - Środkowy kolor * **Kolor końcowy** --- ## **Wzory** Po wybraniu **Wzór** Zrzut pojawia się z **37 opcji built- in**, w tym: * Małe kwadraty, losowe ziarna, puzzle, kwiaty * Sezonowe tematy: urodziny, balon, karnawał, Wielkanoc, dzień ojców, dzień matki, Święto Dziękczynienia, dzień weteranów, dzień kobiet * Salefonia: sprzedaż, zniżka, tapicerka, świeża, falista * I więcej Niektóre wzory zawierają subtelne ciemne nakładki, aby tekst był czytelny. --- # **📐 Granica** Ta sekcja kontroluje kontener do odliczania. ℹ️ Ta sekcja jest **niedostępne** zamiast **Strona odprawy** Liczby. --- ## **Styl graniczny** Wybierz spośród: * None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset --- ## **Warunkowe pola graniczne** Pojawiają się następujące pola: **tylko wtedy, gdy styl graniczny nie jest "Brak"**: * **Promień graniczny (px)** - Jak zaokrąglone rogi pojawiają się * **Rozmiar graniczny (px)** - Grubość linii granicznej * **Kolor granic** - Kolor granicy ⚠️ Jeśli wybierzesz styl graniczny, podczas gdy rozmiar jest ustawiony na 0, aplikacja automatycznie ustawia go na 0 **2px** więc granica staje się widoczna. --- # **📏 Odstęp** Ta sekcja kontroluje wewnętrzne i zewnętrzne odstępy wokół odliczania. ℹ️ Ta sekcja jest **niedostępne** zamiast **Strona odprawy** Liczby. --- ## **Dostępne pola** * **Wewnątrz góry (px)** - Przestrzeń pomiędzy treścią a górną krawędzią * **Wewnętrzne dno (px)** - Przestrzeń pomiędzy treścią a dolną krawędzią * **Na zewnątrz góry (px)** - Przestrzeń między odliczaniem a elementami nad nim * **Zewnętrzne dno (px)** - Przestrzeń pomiędzy odliczaniem a elementami poniżej niego 💡 Pomyśl o "wewnątrz" jak o wyściółce i "na zewnątrz" jak o marginesie. Rosnące odstępy zewnętrzne pomagają oddzielić odliczanie od pobliskich elementów strony. --- # **🔤 Typografia** Ta sekcja kontroluje jak wszystkie elementy tekstowe się pojawiają. Dokładne dostępne pola zależą od miejsca odliczania. ℹ️ Ta sekcja jest **niedostępne** zamiast **Strona odprawy** Liczby. --- ## **Rodzina czcionek** Wybierz **60 + opcje czcionek**, w tym: * **Użyj czcionki motywu** - Pasuje do twojego Shopify motyw automatycznie * Czcionki systemowe: Helvetica, Arial, Taemount, Times New Roman, Georgia, Courier New, Segoe UI, Impact i więcej * Czcionki Google: Roboto, Montserrat, Open Sans, Poppins, Inter, Playfair Display, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script i wiele innych ℹ️ Jeśli wybierzesz czcionkę Google, aplikacja automatycznie ładuje ją z czcionek Google na Twojej stronie. Czcionki systemowe i "Użyj czcionki motywu" nie wywołują zewnętrznych żądań. --- ## **Elementy typograficzne według miejsca** Każdy element ma swój własny **Wielkość (px)** oraz **Kolor** pola: ### **Strona produktu, strona lądowania i niestandardowe położenie** * **Tytuł** - Główny nagłówek odliczania * **Podpozycja** - Drugorzędna wiadomość poniżej tytułu * **Czas** - Odliczanie się cyfry same * **Etykiety czasowe** - "Dni", "Godziny", "Protokół", "Sekundy" tekst * **Rozszerzona wiadomość** - Pokazane, gdy licznik czasu jest przedłużony (pojawia się tylko wtedy, gdy akcja końcowa jest ustawiona na "Rozszerzenie") ### **Strona koszyka i drawer** * **Tytuł** - Zazwyczaj zawiera `{timer}` zmienna inline * **Czas** - Cyfry odliczania na żywo * **Rozszerzona wiadomość** - Pojawia się tylko wtedy, gdy działanie końcowe jest "Rozszerzyć" ℹ️ Staże związane z kartami **nie** Pokaż opcje typograficzne podnagłówka lub etykiety czasu. --- # **📊 Pasek postępu** Ta sekcja dostosowuje wizualny wskaźnik postępu pokazany powyżej lub poniżej zegara. ℹ️ Ta sekcja jest **tylko dostępne** zamiast **Strona produktu**, **Strona lądowania**oraz **Niestandardowe położenie** Liczby. --- ## **Kiedy pojawia się** Pojawia się karta projektowa Progress Bar **tylko jeśli** Włączyłeś pasek postępu w **Zawartość** Najpierw zakładka. Jeśli pasek postępu nie jest włączony w Treści, cała karta jest ukryta. --- ## **Ustawienia paska postępu** * **Kolor tła** - Kolor niewypełnionej części paska (domyślnie: jasnoszary) * **Kolor paska** - Kolor wypełnionej części (domyślnie: czarny) ### **Zachowanie w magazynach** Pasek postępu jest 8px wysoki zaokrąglony bar, który wypełnia proporcjonalnie w oparciu o pozostały czas. Aktualizuje co sekundę gładką 1-sekundową animację przejściową. --- # **Separator** Ta sekcja kontroluje znaki pojawiające się pomiędzy jednostkami czasowymi (między dniami, godzinami, minutami i sekundami). --- ## **Miejsce niekontrolne** * **Znak separatora** - Wybierz spośród: * `:` Kolon * `-` Hyphen * `.` Okres * `|` Pasek pionowy * `/` Przednie cięcie * Przestrzeń (pusta) * **Rozmiar separatora (px)** * **Kolor separatora** - Wybór koloru Heks --- ## **Strona odprawy** Ponieważ liczniki checkout używają Shopify's Checkout UI Extension framework, separator styling jest ograniczony do Shopifywstępnie zdefiniowane żetony: * **Rozmiar separatora** - `extraSmall`, `small`, `base`, `medium`, `large`, `extraLarge` * **Kolor separatora** - `accent` (niebieski), `subdued` (szary), `info` (czarny), `success` (zielony), `warning` (żółty), `critical` (czerwony) --- # **🔘 Projekt przycisku** Ta sekcja dostosowuje przycisk call- to- action. ℹ️ Ta sekcja jest **tylko dostępne** zamiast **Bar górny / dolny**, **Strona lądowania**oraz **Niestandardowe położenie** Liczby. --- ## **Styl animacji przycisku** Dodaje ciągłą animację pętli do przycisku: * **Brak** - Przycisk statyczny * **Wstrząśnij** - Delikatny wstrząs boczny * **Puls** - Efekt skalowania rytmicznego * **Powiększ** - Rozszerzenia i kontrakty * **Slide** - Subtelny ruch przesuwny * **Fade** - Puls zmętnienia * **Obrót** - Działanie wirujące * **Pop** - Szybkie odbicie w skali * **Mrugnij** - Krótki efekt migania --- ## **Efekty przyciskowe** Dodaje efekt interaktywny, gdy klienci unoszą się na przycisku: * **Brak** * **Blask** - Gradient świeci wokół przycisku * **Blob** - Organiczny efekt morfiny blob * **Impuls podnośnika** - Pulses on mouse-over * **Przycisk nr 045** - Ponumerowany preset style * **Przycisk Kolor** * **Przesuń prawy przycisk** * **Smoosh**, **Przeskocz**, **Kolizja** * **Bańka przycisku** - Bubble pop effect * **Squishy** * **Maska 1**, **Maska 2**, **Maska 3** * **Gooey Button** * **Przycisk 3D** - Efekt głębokości trójwymiarowej --- ## **Dodatkowe ustawienia przycisku** * **Kolor przycisku** - Kolor tła przycisku * **Rozmiar tekstu przycisku (px)** * **Kolor tekstu przycisku** * **Promień graniczny (px)** - Jak zaokrąglone są narożniki guzików --- # **📝 Własny projekt wiadomości** Ta sekcja pojawia się **tylko wtedy, gdy** Twoje odliczanie jest ustawione na **Pokaż niestandardową wiadomość** lub **Wydłuż czas**. Kontroluje typografię wiadomości, którą klienci widzą po zakończeniu zegara. --- ## **Dostępne pola** * **Własny rozmiar tytułu (px)** + **Kolor** * **Własny rozmiar podpozycji (px)** + **Kolor** ℹ️ Jeśli akcja końcowa zawiera wiele rozszerzeń interwałów, a którakolwiek z nich używa własnej wiadomości, karta ta staje się widoczna. --- # **❌ Zamknij ikonę** Ta sekcja dostosowuje przycisk zwalniania dla pasków odliczania. ℹ️ Ta sekcja jest **tylko dostępne** zamiast **Bar górny / dolny** Liczby. --- ## **Wymagane** Ikona bliska musi być najpierw włączona w **Zawartość** zakładka przy użyciu **Zamknij ikonę** Pudełko. Jeśli nie jest tam włączona, ta karta nie ma wpływu. --- ## **Zamknij kolor ikon** Wybierz kolor szesnastkowy dla ikony X. Ikona jest umieszczona na prawej krawędzi pręta i skierowana pionowo. **Zachowanie w sklepach:** Kiedy klient kliknie na ikonę, pasek jest ukryty przy użyciu pamięci masowej przeglądarki i nie pojawi się ponownie podczas tej sesji. --- # **💻 Niestandardowe CSS** Dla kupców, którzy potrzebują stylizacji poza built- w opcjach, można napisać własny CSS. ℹ️ Ta sekcja jest **niedostępne** zamiast **Strona odprawy** Liczby. --- ## **Dostępne klasy docelowe** Edytor zawiera domyślny szablon z tymi klasami docelowymi: `.futureblink-countdown-timer { }` `.futureblink-countdown-timer .title { }` `.futureblink-countdown-timer .subheading { }` `.futureblink-countdown-timer .cta-button { }` `.futureblink-countdown-timer .close-btn { }` --- ## **Jak stosować** 1. Wprowadź CSS w obszarze tekstowym 2. Kliknij **Zastosuj** 3. Style są wstrzykiwane do sklepu automatycznie ⚠️ Aplikacja automatycznie dodaje `!important` do każdej właściwości CSS, gdy jest stosowana, co pomaga obejść konflikty tematyczne. Jeśli styl nie wydaje się działać natychmiast, spróbuj zapisać i odświeżyć swój sklep. --- # **📍 Projekt według miejsca** Różne miejsca do odliczania mają różne możliwości projektowe w oparciu o ograniczenia techniczne. --- ## **Strona produktu, Strona lądowania, pozycja użytkownika** Te staże oferują **Najpełniejsze doświadczenie projektowe**: ✅ Wszystkie szablony ✅ Wszystkie style zegara (flip, płytki, plain, itp.) ✅ Opcje pełnego tła (pojedynczy, gradient, trójgradient, wzory) ✅ Granica, odstępy, pasek postępu ✅ Kompletna kontrola typograficzna ❌ Konstrukcja przycisku - niedostępna dla stron produktowych ✅ Niestandardowe CSS --- ## **Bar górny / dolny** Prawie pełne opcje projektowe z kilkoma konkretnymi dodatkami: ✅ Położenie (górna / dolna) i lepkie przełączanie ✅ Zamknij projekt ikon ✅ Projekt przycisku ✅ Wszystkie style zegara i tła ✅ Niestandardowe CSS ❌ Pasek postępu - niedostępny dla barów --- ## **Strona koszyka, Drawer koszyka, Stopień strony koszyka** Uproszczony układ koncentrujący się na wiadomości inline: ✅ Tło, granica, odstępy, separator ✅ Typografia tytułów i czasopism ✅ Niestandardowe CSS ❌ Styl timera - zawsze zwykły tekst inline ❌ Pasek postępu ❌ Projekt przycisku ❌ Typografia podpozycji i etykiet czasowych --- ## **Strona odprawy** Bardzo ograniczone ze względu na Shopify Sprawdź rozszerzenia UI: ✅ Rozmiar i kolor separatora (tylko żetony Polaris) ✅ Wielkość tytułu i kolor (tylko żetony Polaris) ✅ Rozmiar zegara i kolor (tylko żetony Polaris) ❌ Szablony ❌ Tło, granica, odstępy ❌ Style zegara - tylko tekst ❌ Pasek postępu ❌ Stylizacja przycisku ❌ Zamknij ikonę ❌ Niestandardowe CSS ❌ Wybór rodziny czcionek --- # **⚠️ Ważne uwagi** ## **Szablony Zastąp własne wartości** Po wybraniu wcześniej wykonanego szablonu zastępuje większość wartości projektowych. Jeśli masz już dostosowane kolory i rozmiary ręcznie, zapisać swoją pracę przed eksperymentami z szablonów. --- ## **Ograniczenia kontroli są platform- Poziom** Ograniczone opcje projektowe na stronach zameldowania są narzucone przez ShopifySystem rozszerzeń UI Checkout. To nie są ograniczenia aplikacji - zapewniają, że odliczanie pozostaje kompatybilne z ShopifyTo bezpieczne środowisko. --- ## **Timery w koszyku są zawsze proste** Odliczenia związane z kartami sprawiają, że timer jest prostym tekstem inline, ponieważ odliczanie jest zazwyczaj osadzone wewnątrz zdania za pomocą `{timer}` zmienna. Zegary Flip i style płytek złamałyby przepływ zdania wizualnie. --- ## **Mobile Timer Scaling** Na ekranach o szerokości mniejszej niż 633px, cyfry zegara są automatycznie zmniejszane (zazwyczaj o około 33%), aby zapobiec przepełnieniu i utrzymać czytelność urządzeń mobilnych. --- # **💡 Użyj przypadków i przykładów** ### **Minimalny licznik strony produktu** → Umieszczenie: Strona produktu → Styl zegara: proste numery → Tło: pojedynczy kolor (biały lub przezroczysty) → Granica: Brak → Typografia: Mały tytuł, średni zegar, subtelny separator ### **Gładkie ogłoszenie Top Bar** → Umieszczenie: pasek górny / dolny → Pozycja: Top + Sticky → Szablon: Neon lub elektryczny → Styl zegara: Zegar błyskowy lub płytki kwadratowe → Animacja przycisku: Puls → Zamknij ikonę: Włączone z pasującym kolorem ### **Sezonowa sprzedaż strony lądowania** → Umieszczenie: Strona lądowania → Tło: wzór (np. urodziny, karnawał lub temat sezonowy) → Styl czasowy: Płytki okrągłe → Progress Bar: Enabled z kolorów marki → Przycisk: Zaokrąglone narożniki z efektem świecącym --- # **🎉 Wynik końcowy** Po pomyślnym skonfigurowaniu ustawienia Design & Styling pomagają tworzyć liczniki, które czują się jak naturalna część twojego sklepu. ✅ Liczenia pasują do kolorów marki i typografii ✅ Style timera tworzą odpowiedni poziom pilności wizualnej ✅ Podstawy i wzory wyznaczają nastrój dla każdej kampanii ✅ Guziki wyróżniają się animacjami i efektami wiszącymi ✅ Odstęp i granice dać odliczanie profesjonalny polski ✅ Własny CSS odblokowuje nieograniczoną elastyczność projektowania ✅ Każdy typ lokowania przestrzega własnych ograniczeń konstrukcyjnych Korzystanie z tych opcji projektowych prawidłowo zapewnia liczniki wyglądają zamierzone, profesjonalne i dostosowane do reszty sklepu ✨