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

Chcesz, żeby twój licznik lub bar idealnie pasowały do marki sklepu? 🎨

Podczas gdy aplikacja zawiera obszerne kontrole projektu, czasami potrzebujesz dodatkowej elastyczności, aby dostosować konkretne szczegóły stylizacji. W Niestandardowe CSS funkcja pozwala na zastosowanie własnych zasad CSS do liczników i pasków dla zaawansowanej wizualnej dostosowania.

Ten przewodnik przechodzi przez wszystko, co musisz wiedzieć o dodawaniu i zarządzaniu CSS Custom dla miejsc odliczania.

⚠️ Zanim zaczniesz

Przed użyciem CSS:

• Upewnij się, że już stworzyłeś licznik czasu lub pasek odliczania.
• Upewnij się, że masz dostęp do Projekt zakładka wewnątrz edytora odliczania.
• Podstawowe zrozumienie CSS lub dostęp do dewelopera, który może pomóc.

⚠️ Ważne:

CSS jest nie jest dostępny dla Countdown strony checkout.

Ponieważ Shopify Checkout wykorzystuje bezpieczne ramy rozszerzeń UI, zewnętrzne CSS wtrysk jest ograniczony przez Shopify.

Własny CSS jest w pełni obsługiwany na:

• Strony produktowe
• Strony wyładunku
• Sztaby górne
• Sztaby denne
• Strony w koszyku
• Koparki
• Umieszczanie poczty elektronicznej

🛠️ Krok 1 - Otwórz kartę projektu

Otwórz licznik lub pasek, który chciałbyś dostosować.

Następnie:

➡️ Kliknij Projekt Tab.

Przewiń w dół, aż zlokalizujesz Niestandardowe CSS sekcja.

💡 Własny CSS działa na górze istniejących ustawień projektu, szablonów, kolorów i typografii wyboru.

🎨 Krok 2 - Otwarcie sekcji CSS

Wnętrze zakładki Design:

➡️ Zlokalizuj Niestandardowe CSS karta.

W tej sekcji znajdziesz:

• Edytor CSS
• Wzór CSS dla startera
• An Zastosuj przycisk

Szablon startowy zawiera powszechnie używane selektory, co ułatwia dostosowanie odliczania bez konieczności ręcznej identyfikacji nazw klas.

✍️ Krok 3 - Dodaj swój własny CSS

Edytor zawiera kilka selektorów ready- to- use.

Dostępne Selektory

Wybór

Opis

.futureblink-countdown-timer

Cały pojemnik do odliczania

.futureblink-countdown-timer .title

Główny tekst tytułu

.futureblink-countdown-timer .subheading

Tekst podpozycji

.futureblink-countdown-timer .cta-button

Przycisk Call- to- action

.futureblink-countdown-timer .close-btn

Zamknij ikonę

Przykład CSS

Aby tytuł pogrubiony i zmienić jego kolor:

.futureblink- countdown- timer .title {
masa: 700;
kolor: # ff6600;
¶

💡 Można również dodać własne selektory, zapytania medialne, animacje i dodatkowe zasady CSS w razie potrzeby.

✅ Krok 4 - Zastosuj CSS

Po wprowadzeniu CSS:

➡️ Kliknij Zastosuj.

Po aktywacji Zastosuj zmiana przycisku Reset, wskazując, że Twoje style są aktywne.

Co dzieje się automatycznie

Aplikacja automatycznie wykonuje kilka akcji za kulisami:

• Wstrzykuje CSS do sklepu.
• Dodaje !important w razie potrzeby pierwszeństwo.
• Skanuje style do bieżącej konfiguracji odliczania.
• Zapobiega konfliktom stylizacji z innymi odliczeniami.

Pomaga to zapewnić, że CSS działa konsekwentnie w całym sklepie.

💾 Krok 5 - Zapisz i opublikuj

Po zastosowaniu CSS:

➡️ Kliknij Zapisz.

➡️ Kliknij Publikuj.

⚠️ Saving alone nie aktualizuje sklepu.

Odliczanie musi być również opublikowane, zanim klienci mogą zobaczyć zmiany.

👀 Krok 6 - Weryfikacja zmian

Po publikacji:

➡️ Otwórz swój sklep.

➡️ Przejdź do strony, na której pojawia się odliczanie.

➡️ Odśwież stronę.

Jeśli zaktualizowane style nie pojawią się natychmiast, wykonaj odświeżanie:

Okna

Ctrl + Shift + R

Mac

Cmd + Shift + R

W przypadku konieczności dalszych dostosowań:

➡️ Wróć do redaktora.

➡️ Uaktualnij CSS.

➡️ Kliknij Zastosuj, Zapiszoraz Publikuj Znowu.

⚠️ Ważne uwagi

Ograniczenie strony wymeldowania

Własny CSS jest niedostępny w licznikach stron checkout ponieważ ShopifyRozszerzenia UI Checkout działają w bezpiecznym środowisku, które ogranicza niestandardowe wtryskiwanie CSS.

Automatyczne! ważne obsługi

Aplikacja automatycznie dodaje !important pierwszeństwo deklaracji CSS przy renderowaniu stylów na stronie internetowej.

Jeśli !important jest już obecny, aplikacja unika stosowania go dwa razy.

Styling łuskany

Każdy odliczanie otrzymuje własny, odizolowany zakres stylizacji.

Oznacza to:

✅ Różne obliczenia mogą mieć różne wzory.

✅ Style pozostają odizolowane do wybranego odliczania.

✅ Pozostałe elementy strony pozostają nienaruszone.

Opcja resetu

Kliknięcie Reset Tylko usuwa CSS.

Nie wpływa na:

• Szablony
• Kolory
• Typografia
• Ustawienia projektu
• Konfiguracja odliczania

Przewodnik widoku

Sekcja CSS Custom zawiera również Przewodnik widoku link, który w razie potrzeby zawiera dodatkowe odniesienia do CSS.

❓ Rozwiązywanie problemów

Jeśli style nie pojawiają się poprawnie:

➡️ Weryfikacja Zastosuj został kliknięty.

➡️ Potwierdź odliczanie zostało Uratowana oraz Opublikowane.

➡️ Sprawdź, czy selektory dokładnie pasują do podanych nazw klas.

➡️ Test za pomocą okna przeglądarki Incognito lub Private.

➡️ Wykonaj twardy odświeżanie, aby oczyścić style cached.

🎉 Wynik końcowy

✅ Twój zegar odliczania lub bar odzwierciedla wymagania stylizacji marki.

✅ Konflikty stylizacji motywów są minimalizowane poprzez automatyczne zarządzanie priorytetem CSS.

✅ Indywidualne liczniki mogą być stylizowane niezależnie.

✅ Style niestandardowe pozostają odizolowane bez wpływu na inne elementy sklepowe.

Własny CSS zapewnia elastyczny sposób do fine- tune projektów odliczania przy zachowaniu reszty konfiguracji proste i łatwe w zarządzaniu. 🚀

Aktualizowane na: 10/09/2026