📅 Jak zaimplementować kalendarz rezerwacji na Twoim sklepie
ℹ️ 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 daje dwa sposoby wyświetlania kalendarza rezerwacji w sklepie:
- Automatyczny przycisk Teraz książki - zastępuje przycisk Dodaj do koszyka na stronach produktów podłączonych do Twoich usług.
- Ręczny blok kalendarza mianowań - umieścić kartę rezerwacji lub kalendarz inline na dowolnej stronie za pomocą Shopifyedytor motywu.
Ten przewodnik prowadzi Cię przez obie metody, więc klienci mogą rozpocząć rezerwację bezpośrednio z sklepu.
⚠️ Zanim zaczniesz
Przed umieszczeniem kalendarza upewnij się, że masz:
- W Hoppy Appointments aplikacja zainstalowana na Twoim Shopify przechowywać
- Przynajmniej utworzono jedną usługę i połączone z Shopify produkt
- Wyraźna idea, czy chcesz kalendarza popup czy kalendarza inline na stronie
Jeśli jeszcze nie stworzyłeś usługi, zacznij od Jak skonfigurować usługę rezerwacji Najpierw.
🛠️ Krok 1 - Włącz zaimplementowaną aplikację rezerwacji
Aplikacja osadzona jest głównym przełącznikiem, który sprawia, że rezerwacja widget działa. Musi być włączony zarówno do osadzania automatycznego, jak i ręcznego.
Opcja A: Włącz od wewnątrz aplikacji
- Otwórz Hoppy Appointments aplikacja
- W deska rozdzielcza, Znajdź Status aplikacji karta
- Kliknij Aktywuj
To otwiera twój Shopify edytor motywu bezpośrednio do sekcji osadzonej aplikacji.
Opcja B: Włącz ręcznie Shopify Admin
- Idź do Shopify Admin → Sklep internetowy → Tematy
- Kliknij Dostosuj na żywo temat
- Kliknij Pomieszczenia aplikacji ikona na górze
- Znajdź Rezerwacje mianowań
- Włączenie / wyłączenie PL
- Kliknij Zapisz
Po włączeniu, Status aplikacji karta wewnątrz Hoppy Appointments wyświetla Aktywne.
🛠️ Krok 2 - Upewnij się, że Twoje usługi są aktywne i zapisane
Widget rezerwacji pojawia się tylko dla usług, które są zapisane i włączone.
- W aplikacji, przejdź do Moje usługi
- Sprawdź odznakę obok usługi:
- Aktywne ✅ - usługa jest na żywo
- Nieaktywne - otworzyć Więcej menu i kliknij Włącz
- Archiwizacja - otworzyć Więcej menu i kliknij Unarchive, then turn it on
- Otwórz usługę i kliknij Zapisz
Zapisywanie resynchronizuje Twoje usługi z markefront. Jest to ważne po zmianie wariantów produktu, cenach lub dostępności.
🛠️ Krok 3 - Sprawdź przycisk teraz książki na swojej stronie produktu
Po uruchomieniu aplikacji i zapisaniu usługi strona produktu połączona z usługą automatycznie pokaże Zarezerwuj teraz przycisk zamiast Dodaj do koszyka.
- Otwórz swój sklep na żywo
- Przejdź do produktu podłączonego do usługi
- Potwierdź Zarezerwuj teraz pojawi się przycisk
- Kliknij, aby otworzyć listę rezerwacji
Jeśli Twój produkt ma wiele wariantów, przełącz między nimi. Przycisk Book Now pojawia się tylko dla wariantów, które są częścią usługi.
💡 Wybór ilości jest wyłączony dla produktów do rezerwowania, ponieważ każda rezerwacja jest dla jednego miejsca na raz.
🛠️ Krok 4 - Dodaj blok kalendarza mianowań ręcznie (opcjonalnie)
Należy stosować tę metodę, jeżeli:
- Twój motyw wykorzystuje stronę budowniczego lub niestandardowy formularz produktu
- Chcesz kalendarz na stronie, która nie jest stroną produktu
- Chcesz stylową kartę rezerwacji ze szczegółami serwisu
- Chcesz pełny kalendarz osadzony bezpośrednio na stronie
Dodaj blok
- Idź do Shopify Admin → Sklep internetowy → Tematy
- Kliknij Dostosuj na żywo temat
- Przejdź do strony, gdzie chcesz kalendarza
- Kliknij Dodaj blok lub Dodaj sekcję
- Znajdź Aplikacje → Kalendarz powoływania
- Wklej Identyfikator usługi
- Wybierz Tryb wbudowany
Znajdź identyfikator usługi
- Otwórz stronę edycji usługi - w pobliżu góry wyświetlany jest identyfikator usługi
- Albo idź do Moje usługi → Więcej → Kopiuj ID usługi
Wybierz tryb embed
- Modal - pokazuje kartę rezerwacji z obrazem usługi, tytułem, opisem, ceną i Zarezerwuj teraz przycisk, który otwiera kalendarz w popup
- Bezpośrednie - umieszczać pełny kalendarz rezerwacji bezpośrednio na stronie, tak aby klienci mogli wybrać daty i czasy bez otwierania popup
Konfiguracja stylu podstawowego
Blok pozwala dostosować:
- Kolor tła
- Kolor tytułu i rozmiar czcionki
- Kolor ceny i rozmiar czcionki
- Kolor etykiety opcji i rozmiar czcionki
- Zarezerwuj teraz kolor przycisku, tło i rozmiar czcionki
- Zobacz szczegóły odnośnik kolor, tło, rozmiar czcionki i widoczność
Aby uzyskać głębsze opcje stylizacji, zobacz Rezerwacja ofert - Opcje projektowania i stylizacji.
Zapisz motyw
Kliknij Zapisz w edytorze motywu, następnie wyświetl stronę na żywo.
⚠️ Blok Kalendarz Mianowania nadal wymaga Nominacje Zapisy aplikacji embed być włączone. Jeśli tak nie jest, blok pokazuje wiadomość "App Embed Not Enabled".
👀 Co klienci widzą
Automatyczny przycisk Teraz książki
- Klient odwiedza stronę produktu
- Widzą Zarezerwuj teraz przycisk zamiast Dodaj do koszyka
- Klikają i otwierają kalendarz
- Wybierają datę, godzinę i wypełniają formularz rezerwacji
- Jeśli płatność jest włączona, produkt jest dodawany do koszyka i sprawdzają
- Jeśli płatność nie jest włączona, rezerwacja jest potwierdzona natychmiast
Ręczny blok modalny
- Klient odwiedza stronę, na której umieściłeś blok
- Widzą kartę ze szczegółami serwisowymi, ceną i wariantem lub czasem trwania opcji
- Klikają Zarezerwuj teraz aby otworzyć kalendarz wyskakujących
- Dokonują rezerwacji.
Ręczny blok bezpośredni
- Klient odwiedza stronę, na której umieściłeś blok
- Pełny kalendarz ładuje się w linii podczas przewijania do widoku
- Wybierają datę i godzinę bezpośrednio na stronie
- Wypełniają formularz rezerwacji i checkout
⚠️ Ważne uwagi
- Dla obu metod wymagana jest osadzona aplikacja. Nawet jeśli używasz ręcznego bloku, aplikacja Nominacje Bookings musi być włączona.
- Użyj swojego na żywo, opublikowanego tematu. Kalendarz nie pojawi się w projekcie lub niepublikowane tematy.
- Jedna usługa aktywna na wariant produktu. Jeśli wariant jest podłączony do więcej niż jednej aktywnej usługi, zachowanie może być nieprzewidywalne.
- Zapisz po każdej zmianie. Warianty produktów, ceny, dostępność i ustawienia serwisowe docierają do sklepu dopiero po kliknięciu Zapisz.
- Przycisk Book Now ukrywa oryginalny przycisk Dodaj do koszyka i dynamiczne przyciski zameldowania tylko dla wariantów księgowych. Inne produkty pozostają bez zmian.
- Wybrane ilości są wyłączone dla produktów z zakładkami, ponieważ rezerwacje są jednoszczelne zakupy.
🐞 Rozwiązywanie problemów
Przycisk Book Now nie pojawia się
- Potwierdź Status aplikacji wyświetla Aktywne
- Upewnij się, że usługa jest zapisywana i aktywna
- Sprawdź, czy przeglądasz właściwą stronę produktu i wariant
- Upewnij się, że testujesz na żywo temat, a nie szkic
- Mocne odświeżenie strony lub test w oknie Incognito
Ręczny blok pokazuje "App Embed Not Enabled"
Wróć do kroku 1 i uaktywnij aplikację Rezerwacji Mianowania.
Ręczny blok pokazuje "Nie znaleziono konfiguracji usługi Mianowania"
Double- sprawdzić Identyfikator usługi Nakleiłeś się. Możesz skopiować go ponownie z Moje usługi → Więcej → Kopiuj ID usługi.
Kalendarz otwiera się, ale nie są dostępne daty
Sprawdź swoją usługę Dostępność Tab. Upewnij się, że dni robocze są włączone, patrz-przed i minimalne ogłoszenie o harmonogramie są rozsądne, i zablokowane daty nie obejmują wszystko.
Kompletne rozwiązywanie problemów, patrz Mianowanie Kalendarz rezerwacji nie jest wyświetlany na moim sklepie [Naprawiono].
🎉 Wynik końcowy
Po skonfigurowaniu:
✅ Aplikacja Anonimowa Bookings jest włączona do Twojego motywu
✅ Twoja usługa jest zapisywana, aktywna i podłączona do odpowiedniego produktu
✅ W Zarezerwuj teraz przycisk pojawia się automatycznie na stronie produktu
✅ Opcjonalnie, na każdej wybranej stronie umieszczany jest blok kalendarza
✅ Klienci mogą zarezerwować bezpośrednio ze sklepu
📚 Artykuły pokrewne
- Jak skonfigurować usługę rezerwacji
- Mianowanie Kalendarz rezerwacji nie jest wyświetlany na moim sklepie [Naprawiono]
- Rezerwacja ofert - Opcje projektowania i stylizacji
- Jak ustawić własny CSS dla aplikacji rezerwujących nominacje
- Jak skonfigurować pływający przycisk działania jak Calendly do rezerwacji mianowań
- Nominacje Rezerwacje - Wszystkie opcje płatności
- Mianowanie Rezerwacje - Rodzaje Rezerwacje
Aktualizowane na: 10/09/2026
Dziękuję!