Ten artykuł jest również dostępny w:

📅 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:


  1. Automatyczny przycisk Teraz książki - zastępuje przycisk Dodaj do koszyka na stronach produktów podłączonych do Twoich usług.
  2. 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


  1. Otwórz Hoppy Appointments aplikacja
  2. W deska rozdzielcza, Znajdź Status aplikacji karta
  3. Kliknij Aktywuj


To otwiera twój Shopify edytor motywu bezpośrednio do sekcji osadzonej aplikacji.


Opcja B: Włącz ręcznie Shopify Admin


  1. Idź do Shopify Admin → Sklep internetowy → Tematy
  2. Kliknij Dostosuj na żywo temat
  3. Kliknij Pomieszczenia aplikacji ikona na górze
  4. Znajdź Rezerwacje mianowań
  5. Włączenie / wyłączenie PL
  6. 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.


  1. W aplikacji, przejdź do Moje usługi
  2. 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
  3. 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.


  1. Otwórz swój sklep na żywo
  2. Przejdź do produktu podłączonego do usługi
  3. Potwierdź Zarezerwuj teraz pojawi się przycisk
  4. 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


  1. Idź do Shopify Admin → Sklep internetowy → Tematy
  2. Kliknij Dostosuj na żywo temat
  3. Przejdź do strony, gdzie chcesz kalendarza
  4. Kliknij Dodaj blok lub Dodaj sekcję
  5. Znajdź Aplikacje → Kalendarz powoływania
  6. Wklej Identyfikator usługi
  7. 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


  1. Klient odwiedza stronę produktu
  2. Widzą Zarezerwuj teraz przycisk zamiast Dodaj do koszyka
  3. Klikają i otwierają kalendarz
  4. Wybierają datę, godzinę i wypełniają formularz rezerwacji
  5. Jeśli płatność jest włączona, produkt jest dodawany do koszyka i sprawdzają
  6. Jeśli płatność nie jest włączona, rezerwacja jest potwierdzona natychmiast


Ręczny blok modalny


  1. Klient odwiedza stronę, na której umieściłeś blok
  2. Widzą kartę ze szczegółami serwisowymi, ceną i wariantem lub czasem trwania opcji
  3. Klikają Zarezerwuj teraz aby otworzyć kalendarz wyskakujących
  4. Dokonują rezerwacji.


Ręczny blok bezpośredni


  1. Klient odwiedza stronę, na której umieściłeś blok
  2. Pełny kalendarz ładuje się w linii podczas przewijania do widoku
  3. Wybierają datę i godzinę bezpośrednio na stronie
  4. 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

Czy ten artykuł był pomocny?

Podziel się swoją opinią

Anuluj

Dziękuję!