ℹ️ 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 koszykuoraz Bar górny / dolny staże, szablony zachować istniejące wielkość tytułu, Rozmiar zegaraoraz 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 koszykalub 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ądowaniaoraz 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ądowaniaoraz 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 ✨

Aktualizowane na: 10/09/2026