ℹ️ 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 widget rezerwacji pasował dokładnie do marki sklepu? Hoppy Appointments pozwala na dodanie własnego CSS na szczycie built- w ustawieniach projektowych, więc można fine- tune czcionki, kolory, odstępy, przyciski i więcej.

Ten przewodnik prowadzi Cię przez dodanie i stosowanie niestandardowych CSS do widżetu rezerwacji.

⚠️ Zanim zaczniesz

Przed użyciem własnego CSS upewnij się, że masz:

• W Hoppy Appointments aplikacja zainstalowana na Twoim Shopify przechowywać
• Co najmniej jedna usługa aktywna
• Podstawowa znajomość wybranych CSS i deklaracji

💡 Dla większości zmian projektu - kolory, czcionki, logo i style guzików - użyj built- in Projekt Najpierw ustawienia. Własny CSS jest najlepszy, gdy potrzebujesz zmian built- w opcje nie pokrywają.

Pełny przegląd opcji konstrukcyjnych, patrz Rezerwacja ofert - Opcje projektowania i stylizacji.

🛠️ Krok 1 - Otwarcie własnego edytora CSS

Custom CSS można zarządzać w dwóch miejscach.

Globalny CSS (domyślnie dotyczy wszystkich usług)

1. Otwórz Hoppy Appointments aplikacja
2. Kliknij Ustawienia w menu aplikacji
3. Kliknij Projekt
4. Przewiń w dół do Niestandardowe CSS karta na dole strony

Perservice CSS (przewyższa globalny CSS dla jednej usługi)

1. Otwórz Hoppy Appointments aplikacja
2. Idź do Usługi
3. Kliknij usługę chcesz styl
4. Kliknij Projekt tab
5. Upewnij się, że Nie stosuj domyślnych ustawień motywu należy sprawdzić
6. Przewiń w dół do Niestandardowe CSS karta

🛠️ Krok 2 - Wybierz globalny lub usługowy poziom CSS

Podczas edycji CSS na usługi Projekt tab, zobaczysz toggle:

Nie stosuj domyślnych ustawień motywu

• Wyłącz → usługa wykorzystuje globalny CSS z Ustawienia → Projektowanie
• On → usługa wykorzystuje własne CSS z poziomu usługi Projekt tab

Pozwala to zachować jeden spójny styl we wszystkich usługach, lub dać konkretne usługi unikalny wygląd.

🛠️ Krok 3 - Napisz swój CSS

Edytor CSS rozpoczyna się od domyślnego szablonu, który zawiera najczęstsze wybieracze widżetów. Możesz zastąpić lub rozszerzyć szablon własnymi zasadami.

Główne klasy opakowań

Wybór

Co ma na celu

.futureblink-appointment

Cały widget rezerwacji

.futureblink-appointment .dialog

Główne okno rezerwacji (pulpit)

.futureblink-appointment.mobile .dialog

Główne okno rezerwacji (mobilne)

.futureblink-appointment .userInfoSection

Panel szczegółów obsługi

Wspólne selektory można stylizować

Wybór

Co ma na celu

.futureblink-appointment .confirm-btn

Potwierdź / zapisz przycisk

.futureblink-appointment .continue-btn

Dalej

.futureblink-appointment .back-btn

Przycisk tylny

.futureblink-appointment .time-slot.selected

Wybrane gniazdo czasu

.futureblink-appointment .highlighted_date.react-calendar__tile--active

Wybrana data kalendarzowa

.futureblink-appointment .schedule-form

Formularz rezerwacji dla klienta

.futureblink-appointment .meeting-booked

Strona sukcesu / potwierdzenia

Przykład

.futureblink- innocent. confirm- btn {
color: # 2563eb;
kolor: # ffffff;
promień graniczny: 8px;
¶

.futureblink- requirement.mobile .confirm- btn {
background- color: # 1d4ed8;
¶

ℹ️ Tak. nie trzeba dodać !important Do twoich deklaracji. Hoppy Appointments automatycznie dołącza !important kiedy CSS jest wstrzykiwane do widżetu, co pomaga Twoim zasadom nadpisać domyślne style.

🛠️ Krok 4 - Zastosuj CSS

Po wprowadzeniu CSS, kliknij przycisk Zastosuj przycisk poniżej edytora.

• Zastosuj → umożliwia niestandardowe CSS i wprowadza go do widget rezerwacji
• Reset → wyłącza własny CSS i przywraca edytor do domyślnego szablonu

⚠️ Własny CSS działa dopiero po kliknięciu Zastosuj. Wklejanie CSS w pole samo nie zmienia wyglądu widżetu.

💾 Krok 5 - Zapisz i podgląd

1. Kliknij Zapisz w górnym pasku
2. Czekaj na wiadomość potwierdzającą
3. Podgląd widżetu rezerwacji w Twoim sklepie lub w panelu podglądu admin

Jeśli edytujesz CSS, upewnij się, że Nie stosuj domyślnych ustawień motywu Włączanie jest włączone, w przeciwnym razie globalny CSS będzie nadal używany.

💡 Porady i najlepsze praktyki

• Uruchom mały - zmienić jeden element na raz, aby zobaczyć, co każda zasada wpływa
• Użyj specyficznych selektorów - cel .futureblink-appointment .your-class zamiast szerokich selektorów, które mogą wpływać na inne części sklepu
• Badanie w trybie mobilnym - .futureblink-appointment.mobile przedrostek do regulacji układu mobilnego oddzielnie
• Zachowaj kopię zapasową - skopiować działający CSS do pliku notatek przed kliknięciem Reset
• Użyj najpierw ustawień konstrukcyjnych - kolory, czcionki i logo są łatwiejsze do zarządzania tam i nie wymagają wiedzy CSS

🐞 Rozwiązywanie problemów

Mój CSS nie pokazuje się w sklepie

1. Upewnij się, że kliknąłeś Zastosuj w edytorze CSS
2. Upewnij się, że kliknąłeś Zapisz na górze strony
3. W przypadku CSS dla przerobu, upewnij się, że Nie stosuj domyślnych ustawień motywu jest włączony
4. Sprawdź, czy Twoje wybieracze pasują do prawdziwych nazw klas widget
5. Wyczyść bufora przeglądarki lub test w oknie incognito

Widget wrócił do domyślnego wyglądu

Kliknięcie Reset wyłącza CSS i przywraca domyślny szablon. Jeśli chcesz odzyskać swoje niestandardowe zasady, wklej je ponownie i kliknij Zastosuj.

Niektóre zasady nie działają.

Automat !important wtrysk działa najlepiej z prostym property: value; deklaracje. Bardzo złożony CSS - takie jak @media pytania, @keyframeslub zagnieżdżone sektory - nie mogą być przekształcane niezawodnie. Trzymaj swoje zasady proste dla najbardziej konsekwentnych wyników.

📚 Artykuły pokrewne

• Rezerwacja ofert - Opcje projektowania i stylizacji
• Jak skonfigurować lokalizacje spotkań dla rezerwacji mianowań
• Jak skonfigurować usługę rezerwacji

Aktualizowane na: 10/09/2026