ℹ️ 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, aby Twój Bar Free Shipping idealnie pasował do marki sklepu? 🎨

Podczas gdy zakładka Design zawiera szerokie sterowniki stylizacji, Niestandardowe CSS zapewnia dodatkową elastyczność dla zaawansowanego dostosowania wizualnego.

Niezależnie od tego, czy dostosowujesz typografię, rafinację odstępów, dodawanie animacji, tworzenie specyficznych układów telefonicznych, czy rozwiązywanie specyficznych konfliktów stylowych, CSS Custom daje większą kontrolę nad tym, jak Twój Bar Free Shipping pojawia się w sklepach.

⚠️ Zanim zaczniesz

Przed użyciem CSS:

• Upewnij się, że już stworzyłeś konfigurację Free Shipping Upsell.
• Upewnij się, że masz dostęp do Projekt Tab.
• Podstawowe zrozumienie CSS lub dostęp do dewelopera.

⚠️ Ważne:

Własny CSS jest dostępny na wszystkich obsługiwanych typach lokowania, z wyjątkiem Strona odprawy staże.

Obsługiwane staże obejmują:

• Strona produktu
• Strona koszyka
• Drawer w koszyku
• Baner (górny i dolny)

🛠️ Krok 1 - Otwórz kartę projektu

Otwórz Hoppy Free Shipping aplikacja i nawigacja do konfiguracji Free Shipping Upsell chcesz dostosować.

Następnie:

➡️ Kliknij Projekt Tab.

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

Ta sekcja znajduje się zazwyczaj poniżej ustawień konfiguracji Typografii, Paska Postępu, Przycisków i Upsell.

🎨 Krok 2 - Otwarcie własnego edytora CSS

Wewnątrz Niestandardowe CSS sekcja znajdziesz:

• Edytor CSS
• A Przewodnik widoku przycisk
• An Zastosuj przycisk
• Wzór CSS dla startera

Szablon zawiera powszechnie używane selektory, które mogą być dostosowane bez konieczności ręcznego sprawdzania elementów storefront.

🎯 Krok 3 - Zrozumienie dostępnych wyboru

Szablon startowy zawiera kilka wybranych elementów, które mają na celu różne elementy Free Shipping Bar.

Dostępne Selektory

Wybór

Opis

.futureblink-free-shipping

Cały kontener Free Shipping Bar

.futureblink-message

Tekst wiadomości o postępach

.futureblink-icon

Ikona wyświetlana z wiadomością

.futureblink-cta-button

Przycisk Call- to- action

.futureblink-price-text

Zaznaczona cena lub wartość postępu

Selektory mobilne

W przypadku stylizacji specyficznej dla komórek należy stosować .mobile zmienność.

Wybór

Opis

.futureblink-free-shipping.mobile .futureblink-message

Mobilna wiadomość o postępach

.futureblink-free-shipping.mobile .futureblink-icon

Ikona mobilna

.futureblink-free-shipping.mobile .futureblink-cta-button

Przycisk Mobile CTA

.futureblink-free-shipping.mobile .futureblink-price-text

Mobilna cena / tekst postępu

💡 Wystarczy tylko dostosować selektory istotne dla wymagań projektowych.

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

Wprowadź swoje zasady CSS w edytorze.

Przykład 1 - Dostosuj wiadomość o postępach

.futureblink-free-shipping .futureblink-message {
font-size: 18px;
color: #ff6600;
}

Przykład 2 - Dostosuj przycisk CTA

.futureblink-free-shipping .futureblink-cta-button {
background-color: #000000;
color: #ffffff;
border-radius: 20px;
}

Przykład 3 - Stylizacja specyficzna dla mobilności

.futureblink-free-shipping.mobile .futureblink-message {
font-size: 14px;
}

💡 Zacznij od małych zmian stylizacji, a następnie rozszerzyć CSS w razie potrzeby.

✅ Krok 5 - Zastosuj CSS

Po wprowadzeniu CSS:

➡️ Kliknij Zastosuj.

Podgląd aktualizuje się automatycznie, dzięki czemu można natychmiast przeglądać zmiany stylu.

Jeśli chcesz usunąć swój własny styl:

➡️ Kliknij Reset.

Przywraca domyślny szablon i wyłącza CSS.

👀 Krok 6 - Przegląd podglądu

Po zastosowaniu CSS:

➡️ Przejrzyj podgląd wewnątrz aplikacji.

Sprawdzić, czy:

• Tekst wyświetla się poprawnie.
• Guziki pojawiają się zgodnie z oczekiwaniami.
• Ikony są ustawione.
• Kolory i odstępy pasują do marki.

Jeżeli konieczne są dostosowania:

➡️ Uaktualnij CSS.

➡️ Kliknij Zastosuj Znowu.

Podgląd odświeża się automatycznie po każdej zmianie.

💾 Krok 7 - Zapisz i opublikuj

Kiedy będziesz zadowolony z projektu:

➡️ Kliknij Zapisz.

➡️ Kliknij Publikuj.

⚠️ Saving alone nie aktualizuje sklepu.

Zestaw Free Shipping Upsell musi być również opublikowany, zanim klienci będą mogli zobaczyć zmiany.

⚠️ Ważne uwagi

Automatyczne! ważne obsługi

Kiedy style są renderowane w sklepie, aplikacja automatycznie dodaje !important pierwszeństwo deklaracji CSS.

Pomaga to zapewnić, że style niestandardowe mają pierwszeństwo nad stylizacji tematu.

Jeśli style nie pojawiają się

W rzadkich przypadkach, gdzie style tematyczne pozostają dominujące, można ręcznie dodać !important wewnątrz redaktora.

Przykład:

.futureblink- free- shipping .futureblink- message {
font- size: 18px! ważne;
kolor: # ff6600! ważne;
¶

Automatyczne sterowanie mobilne

Każdy selektor .mobile zmienność jest automatycznie zawijana wewnątrz mobilnego zapytania mediów podczas renderowania w sklepie.

Nie trzeba ręcznie tworzyć punktów zwrotnych dla tych selektorów.

Ograniczenie strony wymeldowania

Własny CSS nie jest dostępny dla stacjonowania stron wymeldowania, ponieważ Shopify ogranicza niestandardowe wtryskiwanie CSS w środowiskach Checkout.

Walidacja CSS

Edytor nie sprawdza składni CSS.

Jeżeli styl nie jest prawidłowo stosowany:

➡️ Zweryfikuj nazwy wyboru.

➡️ Sprawdź aparat i średniki.

➡️ Przegląd CSS na błędy składni.

❓ Rozwiązywanie problemów

Jeśli style nie pojawiają się poprawnie:

➡️ Potwierdź Zastosuj został kliknięty.

➡️ Weryfikacja konfiguracji została Uratowana oraz Opublikowane.

➡️ Sprawdź, czy nazwy wyboru dokładnie pasują do dostarczonego szablonu.

➡️ Test w oknie przeglądarki Incognito lub Private.

➡️ Odśwież sklep do jasnych stylów cached.

🎉 Wynik końcowy

✅ Pasek Free Shipping Bar można dostosować ponad standardowe ustawienia Design.

✅ Doświadczenia pulpitu i mobilne mogą być stylizowane niezależnie.

✅ Własny typografia, odstępy, kolory i animacje są w pełni obsługiwane.

✅ Bar Free Shipping może być bardziej dostosowany do marki sklepu.

CSS Custom zapewnia dodatkową elastyczność, gdy wbudowane- w kontroli projektu nie są wystarczające, pomagając stworzyć bardziej polerowane i spójne doświadczenie storefront. ✨

Aktualizowane na: 10/09/2026