> ## 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). # 🎨 Appointment Bookings — Opcje projektowania i stylizacji > ℹ️ **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. Hoppy Appointments zawiera kompletny system projektowania, dzięki czemu widżet rezerwacji, strony sukcesu, strona zmiany terminu i strona anulowania idealnie wpisują się w wygląd Twojego sklepu. Możesz kontrolować kolory, czcionki, przyciski, tła, a nawet przesyłać własne obrazy. Wszystko zarządzane jest w dwóch miejscach: * **Settings → Design** (Ustawienia → Projekt) → Domyślne ustawienia sklepu, które dotyczą każdej usługi * **Service → Design tab** (Usługa → Zakładka Projekt) → Nadpisania dla poszczególnych usług, gdy chcesz, aby jedna usługa wyglądała inaczej Ten przewodnik wyjaśnia każde ustawienie projektu, kiedy się pojawia i jak wpływa na witrynę sklepu. --- # **⚠️ Zanim zaczniesz** Ustawienia projektu zarządza się z poziomu: * **Hoppy Appointments → Settings → Default Design** (Ustawienia → Domyślny projekt) dla ustawień globalnych * **Hoppy Appointments → Services → [Twoja usługa] → Design** (Usługi → [Twoja usługa] → Projekt) w celu nadpisania dla konkretnej usługi Przed dostosowaniem stylu widżeta upewnij się, że: * Aplikacja Hoppy Appointments jest zainstalowana * Masz utworzoną co najmniej jedną usługę * Blok osadzania aplikacji **Appointment Bookings** jest włączony w Twoim motywie Shopify ℹ️ Bez włączonego osadzania aplikacji klienci w ogóle nie zobaczą widżeta rezerwacji — bez względu na to, jak piękne są Twoje ustawienia projektu. Zapoznaj się z przewodnikiem rozwiązywania problemów **Calendar Not Showing**, jeśli potrzebujesz pomocy w włączeniu osadzania. --- # **🌐 Projekt globalny vs. projekt dla poszczególnych usług** ## **Projekt globalny (Settings → Design)** To domyślny wygląd dla całego sklepu. Każda nowa usługa automatycznie używa tych kolorów, czcionek i stylów, chyba że zdecydujesz inaczej. Użyj tego, gdy chcesz zachować spójny wygląd we wszystkich usługach dostępnych do rezerwacji. --- ## **Projekt dla poszczególnych usług (Service → Design tab)** Każda usługa ma pole wyboru oznaczone jako: **Do not Follow Default Theme Settings** (Nie stosuj domyślnych ustawień motywu) * **Unchecked** (Niezaznaczone) → Usługa używa projektu globalnego. Wszystkie pola kolorów/czcionek są ukryte, aby zachować prostotę. * **Checked** (Zaznaczone) → Pojawia się pełny edytor projektu, a ta usługa używa własnego stylu zamiast domyślnych ustawień globalnych. 💡 Skorzystaj z projektu dla konkretnej usługi, gdy jedna z nich ma wyglądać inaczej — na przykład premium konsultacja z ciemniejszym motywem lub świąteczne warsztaty. --- ## **Co jest kontrolowane gdzie** Większość ustawień projektu istnieje zarówno globalnie, jak i dla poszczególnych usług, ale niektóre są dostępne tylko dla konkretnej usługi: | Ustawienie | Zakres | | ----- | ----- | | Kolory, czcionki, przyciski, custom CSS | Globalne + per-service | | Custom logo (Niestandardowe logo) | Tylko dla konkretnej usługi | | Floating Action Button (Pływający przycisk akcji) | Tylko dla konkretnej usługi (konfigurowane na zakładce General) | | Theme editor app block styling (Stylizacja bloku aplikacji w edytorze motywu) | Tylko w edytorze motywu Shopify | --- # **🎨 Zakładki projektu** Edytor projektu jest podzielony na zakładki. Każda zakładka kontroluje inny ekran widziany przez klientów. --- ## **📅 Strona rezerwacji** Ta zakładka kontroluje główny widżet rezerwacji — kalendarz, przedziały czasowe, formularz i przyciski nawigacji. ### **Czcionka** Wybierz rodzinę czcionek używaną w całym widżecie. Aplikacja obsługuje dziesiątki czcionek Google Fonts oraz popularne czcionki systemowe. * **System fonts** (Czcionki systemowe, np. Arial lub Helvetica) ładują się natychmiast z urządzenia klienta * **Google Fonts** (Czcionki Google) ładują się automatycznie po wybraniu Jeśli czcionka nie może zostać załadowana, widżet używa bezpiecznej czcionki domyślnej. --- ### **Kolory tła** * **Outer background color** (Kolor tła zewnętrznego) → Obszar za widżetem rezerwacji * **Info section background color** (Kolor tła sekcji informacyjnej) → Lewy panel wyświetlający zdjęcie usługi, tytuł i cenę * **Card background color** (Kolor tła karty) → Główna karta zawierająca kalendarz i formularz Te trzy warstwy pozwalają stworzyć głębię i oddzielenie elementów wewnątrz widżeta. --- ### **Tekst i ikony** * **Text color** (Kolor tekstu) → Domyślny kolor większości tekstu w widżecie * **Icons color** (Kolor ikon) → Kolor używany dla małych ikon, takich jak strzałki i znaczniki wyboru --- ### **Wybrana data i przedział czasowy** * **Selected background color** (Kolor tła wybranego elementu) → Kolor za wybraną datą lub przedziałem czasowym * **Selected text color** (Kolor tekstu wybranego elementu) → Kolor tekstu na wybranej dacie lub przedziale czasowym Pomaga to klientom wyraźnie zobaczyć, co wybrali. --- ### **Przyciski** * **Confirm button** (Przycisk potwierdzenia) → Kolor tła i tekstu dla głównej akcji * **Back button** (Przycisk wstecz) → Kolor tła i tekstu dla cofania się o krok * **Continue button** (Przycisk kontynuacji) → Kolor tła i tekstu dla wieloetapowych procesów Każdy przycisk można stylizować niezależnie, aby dopasować go do hierarchii przycisków w sklepie. --- ## **🎉 Strona sukcesu** Ta zakładka kontroluje ekran, który widzą klienci po bezpłatnej lub potwierdzonej rezerwacji. * **Heading size / color** (Rozmiar/kolor nagłówka) * **Description size / color** (Rozmiar/kolor opisu) * **Details size / color** (Rozmiar/kolor szczegółów) → Dla tekstu podsumowania rezerwacji * **Button text size / background color / text color** (Rozmiar tekstu przycisku / kolor tła / kolor tekstu) → Przycisk CTA na ekranie sukcesu * **Icons color** (Kolor ikon) * **Custom image** (Niestandardowy obraz) → Zastąp domyślną ilustrację sukcesu własnym obrazem 💡 Przesłanie niestandardowego obrazu sukcesu to świetny sposób na wzmocnienie marki lub uczczenie rezerwacji przyjazną grafiką. --- ## **🔄 Strona zmiany terminu** Ta zakładka ma dwie wewnętrzne sekcje: * **Reschedule Form** (Formularz zmiany terminu) → Ekran, na którym klienci wybierają nowy termin * **Success Page** (Strona sukcesu) → Ekran potwierdzenia po zakończeniu zmiany terminu Każda sekcja ma te same rodzaje kontrolek co główna zakładka Success Page: * **Heading size / color** (Rozmiar/kolor nagłówka) * **Message text size / color** (Rozmiar/kolor tekstu wiadomości) * **Details size / color** (Rozmiar/kolor szczegółów) * **Button size and colors** (Rozmiar i kolory przycisku) * **Icons color** (Kolor ikon) * **Custom image** (Niestandardowy obraz) --- ## **❌ Strona anulowania** Ta zakładka również ma dwie wewnętrzne sekcje: * **Cancel Form** (Formularz anulowania) → Ekran, na którym klienci potwierdzają chęć anulowania * **Success Page** (Strona sukcesu) → Ekran potwierdzenia po zakończeniu anulowania Zawiera te same kontrolki stylizacji co zakładka Rescheduling Page. --- # **🖼️ Niestandardowe logo** ℹ️ To ustawienie jest dostępne tylko w zakładce **per-service Design tab** (Projekt dla konkretnej usługi). Włącz **Custom logo** (Niestandardowe logo), aby zastąpić zdjęcie produktu w widżecie rezerwacji własnym przesłanym logo lub obrazem. * Zalecane dla spójności marki * Przesyłane obrazy są ograniczone do **1 MB** * Akceptowane formaty to GIF, JPEG, PNG i WebP --- # **🧑‍💻 Niestandardowy CSS** Dla sprzedawców, którzy chcą mieć idealną kontrolę, zarówno strony projektu globalnego, jak i dla konkretnych usług zawierają edytor **Custom CSS** (Niestandardowy CSS). * Wklej własny CSS do edytora * Kliknij **Apply** (Zastosuj), aby aktywować go w witrynie sklepu * Kliknij **Reset** (Resetuj), aby przywrócić domyślny szablon CSS i dezaktywować własne zmiany Edytor zawiera domyślny szablon pokazujący popularne selektory, które możesz namierzyć, takie jak: * Zewnętrzny kontener widżeta * Karta dialogowa * Sekcja informacyjna * Wybrane daty w kalendarzu i przedziały czasowe * Przyciski Confirm, Back i Continue * Warianty mobilne ⚠️ Ważne: * Niestandardowy CSS jest stosowany tylko wtedy, gdy klikniesz **Apply** * Jeśli usługa stosuje domyślny motyw, używa **globalnego** niestandardowego CSS * Jeśli usługa używa własnego projektu, używa własnego niestandardowego CSS **per-service** * Aplikacja automatycznie dodaje `!important` do deklaracji CSS, aby pomóc w nadpisywaniu stylów motywu 💡 Niestandardowy CSS świetnie sprawdza się przy zaawansowanych poprawkach, ale większość sprzedawców może uzyskać dokładnie taki wygląd, jaki chce, używając samych narzędzi do wyboru kolorów i czcionek. --- # **🔘 Pływający przycisk akcji** ℹ️ Floating Action Button jest konfigurowany na zakładce **General tab** (Ogólne) usługi, a nie na zakładce Design. Został tu uwzględniony, ponieważ ma własne opcje stylizacji. Włącz **Floating Action Button** (Pływający przycisk akcji), aby wyświetlać stały przycisk **Book Now** (Zarezerwuj teraz), który podąża za klientami podczas przewijania sklepu. Po włączeniu możesz dostosować: * **Button text** (Tekst przycisku) → Domyślnie „Book Now” * **Position** (Pozycja) → Bottom right (Prawy dolny), bottom left (Lewy dolny) lub bottom center (Środkowy dolny) * **Background color** (Kolor tła) * **Text color** (Kolor tekstu) Jest to przydatne, gdy chcesz, aby klienci mogli rezerwować z dowolnej strony, nie tylko ze strony produktu. Więcej informacji o włączaniu i umieszczaniu pływającego przycisku znajdziesz w dokumentacji **Service Setup**. --- # **🧩 Stylizacja bloku aplikacji w edytorze motywu** Jeśli dodasz blok **Appointment Calendar** (Kalendarz rezerwacji) za pośrednictwem edytora motywu Shopify, uzyskasz dodatkowe opcje stylizacji niezależne od panelu administracyjnego aplikacji. Te ustawienia kontrolują **kartę lub przycisk**, który otwiera modal rezerwacji: * **Title color / font size** (Kolor tytułu / rozmiar czcionki) * **Price color / font size** (Kolor ceny / rozmiar czcionki) * **Option color / font size** (Kolor opcji / rozmiar czcionki) * **View details button** (Przycisk Zobacz szczegóły) → Pokaż/ukryj, tekst, kolory, rozmiar czcionki * **Book Now button** (Przycisk Book Now / Zarezerwuj teraz) → Tło, kolor tekstu, rozmiar czcionki * **Block background color** (Kolor tła bloku) ⚠️ Ważne: Te ustawienia stylizują tylko blok na stronie. Modal, który się otwiera, nadal używa ustawień projektu z **Settings → Design** (Ustawienia → Projekt) lub zakładki **Design tab** (Projekt) usługi. Niektóre ustawienia bloku pojawiają się tylko wtedy, gdy blok jest ustawiony w trybie **Modal** (Modalnym). --- # **🖥️ Jak stylizacja wygląda w witrynie sklepu** Widżet rezerwacji ładuje się wewnątrz iframe w witrynie sklepu. Iframe pobiera skonfigurowane ustawienia projektu i stosuje je do: * Zewnętrzne tło widżeta * Tła panelu informacyjnego i karty * Cały tekst i ikony * Wybrane daty w kalendarzu i przedziały czasowe * Przyciski Confirm, Back i Continue * Strony Success, Rescheduling i Cancel (Sukces, Zmiana terminu i Anulowanie) * Umiejscowienie niestandardowego logo * Nadpisania niestandardowego CSS Czcionki są ładowane dynamicznie. Czcionki Google Fonts pobierane są z serwerów Google, a czcionki systemowe ładowane są z urządzenia klienta. Jeśli czcionka nie zostanie załadowana lub brakuje koloru, widżet wraca do bezpiecznych ustawień domyślnych, aby proces rezerwacji pozostał użyteczny. --- # **⚠️ Ważne informacje i ograniczenia** * **Global design is the default.** (Projekt globalny jest domyślny.) Nowe usługi automatycznie stosują motyw globalny, chyba że zaznaczysz **Do not Follow Default Theme Settings**. * **Custom CSS must be applied.** (Niestandardowy CSS musi zostać zastosowany.) Pisanie CSS w edytorze nic nie daje, dopóki nie klikniesz **Apply**. * **Per-service CSS only applies when the service uses its own design.** (CSS per-service ma zastosowanie tylko wtedy, gdy usługa używa własnego projektu.) Jeśli usługa stosuje motyw globalny, ignoruje własne pole niestandardowego CSS. * **Custom logo is per-service only.** (Niestandardowe logo jest dostępne tylko dla konkretnej usługi.) Nie ma globalnego ustawienia niestandardowego logo. * **Image uploads are limited to 1 MB.** (Przesyłane obrazy są ograniczone do 1 MB.) Większe obrazy trzeba będzie skompresować przed przesłaniem. * **Theme editor block settings are separate.** (Ustawienia bloku w edytorze motywu są oddzielne.) Stylizowanie bloku Appointment Calendar w Shopify nie zmienia wnętrza modala. * **Modal wrapper background is theme-controlled.** (Tło otoczki modala jest kontrolowane przez motyw.) Obszar za wyskakującym modem stylizowany jest przez CSS rozszerzenia motywu, a nie przez ustawienia projektu w panelu administracyjnym aplikacji. * **App embed must be enabled.** (Osadzanie aplikacji musi być włączone.) Ustawienia projektu pojawiają się w witrynie sklepu tylko wtedy, gdy osadzanie aplikacji Appointment Bookings jest włączone w Twoim motywie. --- # **💡 Typowe przypadki użycia** ## **Dopasowanie widżeta do marki sklepu** * Przejdź do **Settings → Design** (Ustawienia → Projekt) * Ustaw **Outer background color** (Kolor tła zewnętrznego), **Card background color** (Kolor tła karty) i **Text color** (Kolor tekstu), aby dopasować je do sklepu * Wybierz czcionkę pasującą do motywu * Dostosuj styl **Confirm button** (Przycisk potwierdzenia), aby pasował do głównego CTA Rezultat: Każda usługa wygląda jak naturalna część Twojego sklepu. --- ## **Jedna usługa z innym wyglądem** * Otwórz usługę → zakładkę **Design** (Projekt) * Zaznacz **Do not Follow Default Theme Settings** (Nie stosuj domyślnych ustawień motywu) * Zmień kolory i prześlij **Custom logo** (Niestandardowe logo) Rezultat: Tylko ta usługa używa niestandardowej stylizacji. Wszystkie pozostałe usługi zachowują projekt globalny. --- ## **Niestandardowy obraz strony sukcesu** * Otwórz **Settings → Design → Success Page** (Ustawienia → Projekt → Strona sukcesu) * Prześlij niestandardowy obraz w sekcji **Custom image** (Niestandardowy obraz) Rezultat: Klienci po rezerwacji zobaczą Twoją markową ilustrację zamiast domyślnej. --- ## **Zaawansowana poprawka układu** * Otwórz **Settings → Design** (Ustawienia → Projekt) * Rozwiń edytor **Custom CSS** (Niestandardowy CSS) * Dodaj swój CSS i kliknij **Apply** (Zastosuj) Rezultat: Możesz namierzyć konkretne elementy widżeta, które nie są objęte narzędziami do wyboru kolorów. --- # **🎉 Efekt końcowy** Gdy Twoje ustawienia projektu są skonfigurowane: ✅ Widżet rezerwacji pasuje do kolorów i czcionek Twojego sklepu ✅ Strony sukcesu, zmiany terminu i anulowania wyglądają zgodnie z Twoją marką ✅ Nadpisania dla poszczególnych usług pozwalają wyróżnić konkretne usługi, gdy jest to potrzebne ✅ Niestandardowe loga i obrazy dodają osobistego charakteru ✅ Niestandardowy CSS daje pełną kontrolę nad zaawansowaną stylizacją ✅ Klienci otrzymują dopracowane, profesjonalne doświadczenie rezerwacji 🎨 Przy odpowiednich ustawieniach projektu rezerwowanie terminu staje się płynną częścią Twojego sklepu Shopify ✨