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

🎨 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 ✨

Aktualizowane na: 10/09/2026