> ## 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). # 🎨 Jak skonfigurować własne popupy > ℹ️ **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 mieć pełną kontrolę nad tym, gdzie i jak pojawia się twój pup? 🛠️ Custom Popups są budowane dla zaawansowanych przypadków użycia. Domyślnie **położenie ręczne**, co oznacza, że decydujesz dokładnie, gdzie popup mieszka w temacie - plus masz dostęp do **niestandardowe CSS** pole i **Krążący przycisk działania** dla maksymalnej elastyczności. Ten przewodnik prowadzi Cię przez całą konfigurację, więc można uruchomić swój pierwszy Custom PopUp w minutach. --- # **✅ Przed rozpoczęciem - Włącz wbudowaną aplikację** Aby każdy popup pojawić się w sklepie, aplikacja embed musi być włączona wewnątrz Shopify Motyw. Przejdź do: **Shopify Admin → Kanały sprzedaży → Sklep internetowy → Tematy → Edycja tematu → Osadzanie aplikacji** Następnie: * Znajdź **Hoppy Popups** * Włączenie / wyłączenie **PL** * Kliknij **Zapisz** ℹ️ Bez tego kroku, twoja popup nie będzie renderować na sklepie nawet po publikacji. --- # **⚙️ Krok 1 - Utwórz nowe własne PopUp** Otwórz **Hoppy PopUps** aplikacja. Następnie: → Kliknij **Utwórz nową populację** → Wybierz **Własny PopUp** z listy typów wyskakujących. Strona konfiguracji otworzy się automatycznie **położenie ręczne** wybrany domyślnie. --- # **📝 Krok 2 - Konfiguracja zawartości** Po otwarciu strony konfiguracji, wylądujesz wewnątrz **Zawartość** Tab. Ta sekcja kontroluje to, co widzą odwiedzający i jak oddziałują z wyskakiwaniem. --- ## **🏷️ Nazwa programu** Pole to jest wykorzystywane wyłącznie do celów wewnętrznych. Klienci nigdy nie zobaczą tego nazwiska. Można używać każdej rozpoznawalnej nazwy, takiej jak: * Niestandardowe ogłoszenie * Zamieszczone Banner * Własny rozwój programisty * Hardcode Promo 💡 Korzystanie z właściwego wewnętrznego nazewnictwa ułatwia identyfikację ustawień później, zwłaszcza jeśli sklep prowadzi wiele kampanii. --- ## **💬 Tytuł i opis** Pojawiają się one w górnej części twojego popupu i powinny wyraźnie przekazać twoją wiadomość. ### **Przykład** * **Tytuł:** "Ogłoszenie specjalne" * **Opis:** "Sprawdź naszą najnowszą kolekcję" Możesz je dostosować do swojego głosu wyborczego. --- ## **📧 Kolekcja e-maili i telefonów** Wybierz pola, które należy pokazać w programie: * **Pokaż pole kolekcji wiadomości e-mail** - rejestruje e-maile odwiedzających * **Pokaż pole numeru telefonu** - rejestruje numery telefonów z wyborem kodu kraju Możesz pokazać oba, tylko jedno, albo żadne z nich, jeśli tylko pokazujesz ogłoszenie. --- ## **🔗 Link do przycisku** Jeśli nie zbierasz e-maili lub numerów telefonów, popup staje się prostym przyciskiem call-to-action. Ustaw **Związek** do strony, którą chcesz odwiedzić - na przykład strony kolekcji, strony produktu lub zewnętrznego adresu URL. --- ## **⚙️ Dodatkowe ustawienia kolekcji i kuponu** Sekcja ta daje dodatkową kontrolę nad tym, jak zbierane są informacje o odwiedzających i jak rabaty są prezentowane wewnątrz popup. --- ### **📩 Email Collection Placeholder** Dostosuj tekst Posiadacza miejsca pokazany w polu wprowadzania wiadomości e-mail. ### **Przykład** * "Wpisz swój e-mail" * "Twój najlepszy adres email" Pomaga to w prowadzeniu odwiedzających, jakie informacje powinny wprowadzić. --- ### **❌ Wiadomość o błędzie e- mail** Ustaw wiadomość potwierdzającą wyświetlaną po wejściu odwiedzającego w nieprawidłowy adres e-mail. ### **Przykład** * "Proszę podać poprawny adres e-mail" Pojawia się automatycznie, jeśli wprowadzony format e-mail jest nieprawidłowy. --- ### **📱 Domyślny kod kraju** Wybierz domyślny kod kraju dla pola numeru telefonu. ### **Przykład** * Stany Zjednoczone (+ 1) * Zjednoczone Królestwo (+ 44) * Indie (+ 91) Goście mogą jeszcze zmienić kraj ręcznie, chyba że jest ograniczony. --- ### **📞 Uchwyt do telefonu** Dostosuj tekst uchwytu w polu numeru telefonu. ### **Przykład** * "Wprowadź swój numer telefonu" * "Numer komórkowy" Poprawia to przejrzystość i zachęca do właściwego formatowania. --- ### **⚠️ Błąd numeru telefonu** Ustaw wyświetlaną wiadomość po wpisaniu niepoprawnego numeru telefonu. ### **Przykład** * "Proszę podać poprawny numer telefonu" Pomaga to odwiedzającym zrozumieć, dlaczego złożenie nie powiodło się. --- ### **🔘 Tekst przycisku** Dostosuj tekst przycisku call- to- action pokazany wewnątrz programu. ### **Przykład** * "Kupuj teraz" * "Zniżka" * "Odblokuj ofertę" Korzystanie z tekstu zorientowanego na działanie może poprawić konwersje. --- ### **🏷️ Pokaż kod kuponu** Wybierz, czy kod kuponu powinien pojawić się wewnątrz popup po udanym e-mail capture. Dostępne opcje: * **Tak.** - wyświetla kod kuponu dla odwiedzających * **Nie.** - ukrywa sekcję kodu kuponu Jest to przydatne, jeśli zniżki są stosowane automatycznie lub obsługiwane zewnętrznie. ℹ️ Kod kuponu może być pokazany tylko wtedy, gdy e-mail jest przechwytywany. --- ### **🎟️ Kod kuponu** ℹ️ To pole jest dostępne raz **Pokaż kod kuponu** jest togilled do **TAK**. Aby wyświetlić kod kuponu, możesz: 1. Wybierz jeden z kodów Kuponu, które stworzyłeś w Shopify Admin → Zniżki klikając na Wybierz / Zmień Rabat. 2. Możesz utworzyć nowy klikając na **Utwórz nowy rabat**. ### **Przykład** * SAVE10 * WELCOME20 * COUPON123 ### **💸 Zniżka** Ta opcja kontroluje sposób stosowania rabatu. Ma dwie opcje: 1. **Klient będzie musiał zastosować rabat ręcznie** - klient będzie musiał wprowadzić kod kuponu podczas zameldowania, aby otrzymać zniżkę. 2. **Zastosuj rabat automatycznie** - rabat będzie stosowany automatycznie podczas wymeldowania bez konieczności wprowadzania kodu kuponu przez klienta. ⚠️ **Ważne:** * Nasza aplikacja nie tworzy ani nie zarządza kodami kuponów / rabatami. Musisz je stworzyć w Shopify Admin → Zniżki przed użyciem ich w popup. --- ### **☑️ Dodaj opt- W polu wyboru** Wybierz, czy pokazać dodatkowe opt- w polu wyboru wewnątrz popup. Można to wykorzystać do: * Zezwolenie na dopuszczenie do obrotu * Zgoda SMS * Subskrypcje biuletynów * Potwierdzenie warunków Dostępne opcje: * **Tak.** - wyświetla pole wyboru * **Nie.** - ukrywa pole wyboru --- ### **❎ Zamknij ikonę** Włącz lub wyłącz ikonę bliską wyświetlaną na wyskakiwaniu. * **Włączone** - odwiedzający mogą ręcznie zamknąć popup * **Wyłączone** - usuwa ikonę z popupu Pomaga to kontrolować, jak niedopuszczalne powinno być doświadczenie wyskakujące. --- ## **✉️ Wiadomości sukcesu** Po złożeniu przez gościa ich szczegółów pojawia się komunikat o sukcesie. * **Wiadomość sukcesu:** "Witamy w naszym sklepie!" Możesz również dodać opis poniżej wiadomości z kolejnymi krokami lub instrukcjami. --- ## **🖱️ Przycisk Kliknij Zachowanie** ℹ️ Opcja ta jest dostępna tylko wtedy, gdy "Pokaż pole e- mail" i "Pokaż pole numeru telefonu" są niezaznaczone. Pozwala kontrolować, co się dzieje, gdy odwiedzający kliknie przycisk CTA wewnątrz wyskakującego. Obsługuje jedną z następujących funkcji: 1. **Zamknij popup** - Popup się zamknie 2. **Ujawnienie kodu kuponu** - kod kuponu zostanie ujawniony odwiedzającemu, ale będziesz miał konfigurację kodu kuponu jak opisano powyżej w sekcji "Pokaż kod kuponu". 3. **Przekieruj do odnośnika** - wybranie tej opcji daje pole wejściowe o nazwie "Link", w którym można określić adres URL, do którego odwiedzający zostanie przekierowany --- ## **🔄 Wpływający przycisk działania** Nawet z ręcznie umieszczonych, można dodać **Wpływający przycisk działania** która pozostaje widoczna na stronie, dzięki czemu odwiedzający mogą ponownie otworzyć popup po zamknięciu go. Wybierz pozycję: * **Prawa dolna** * **Lewa dolna** * **Prawo ekranu** * **Ekran w lewo** Następnie wprowadzić **Tekst przycisku** - np. "Otwórz ofertę", "Zdobądź zniżkę" lub "Dowiedz się więcej". Aby całkowicie wyłączyć zmienny przycisk, wybierz **Wyłącz zmienny przycisk działania**. --- # **🎨 Krok 3 - Zastosuj własny CSS (opcjonalnie)** Przełącz na **Projekt** zakładka do dostępu do **Niestandardowe CSS** sekcja. Tu naprawdę świecą Custom Popups. Możesz napisać własny CSS, aby obejść domyślną stylizację. --- ## **📝 Wzór CSS** Aplikacja zapewnia gotowy szablon ze wspólnymi selekcjami: . futureblink- popup / \* Główny pojemnik wyskakujący \* / ¶ .futureblink- popup .title / \* Popup title \* / ¶ .futureblink- popup.mobile .title { / \* Mobile title derover \* / ¶ .futureblink- popup .description { / \* Opis popupu \* / ¶ .futureblink- popup.mobile .description { / \* Mobilna kontrola opisu \* / ¶ .futureblink- popup .cta- button { / \* Przycisk Call- to- action \* / ¶ .futureblink- popup.mobile .cta- button { / \* Ruchome sterowanie przyciskiem \* / ¶ .futureblink- popup .close- btn / \* Zamknij ikonę \* / ¶ .futureblink- popup.mobile .close- btn / \* Mobile close icon deverse \* / ¶ Wklej swój własny CSS w pole i kliknij **Zastosuj**. --- ## **⚠️ Ważne uwagi** * Własny CSS nadstawia wszystkie inne ustawienia projektowe - używaj go, gdy potrzebujesz pixel- perfect control * Selektory mobilne pozwalają na inny styl dla użytkowników telefonów * Kliknij **Reset** przywracanie domyślnego szablonu CSS w dowolnym momencie --- # **🖱️ Krok 4 - Ustaw zasady tryggera i wyświetlania** Przejście do **Umiejscowienie / ukierunkowanie** zakładka do kontroli, kiedy i gdzie pojawia się Twój Custom PopUp. Ponieważ Custom Popups używa ręcznego ustawienia, większość standardowych ustawień nie ma zastosowania w ten sam sposób. Jednak nadal możesz skonfigurować: * **Częstotliwość wyświetlania** - Pokaż za każdym razem, raz na wizytę, lub ograniczenie z ochłodzeniem * **Ukierunkowanie klientów** - Status logowania, identyfikatory klientów, całe życie * **Geolokalizacja** - Wszystkie kraje świata lub konkretne * **Harmonogram** - Fakultatywne daty rozpoczęcia i zakończenia Szczegółowe wyjaśnienia dotyczące każdej opcji celowania znajdują się w specjalnej dokumentacji zaawansowanej. --- # **✅ Krok 5 - Zapisz & publikuj** Kiedy wszystko wygląda dobrze: 1. Kliknij **Zapisz** do przechowywania konfiguracji 2. Kliknij **Publikuj** Aby wyskakiwać na żywo na twoim sklepie ⚠️ **Saturing alone nie sprawia, że wyskakujące widoczne dla klientów.** Musisz to opublikować. ⚠️ **Do umieszczenia ręcznego:** Pamiętaj również, aby dodać kod snippet do tematu - samo publikowanie nie umieści popup automatycznie. Jeśli aplikacja embed nie jest jeszcze włączona, baner przypomni Ci, aby go aktywować w Twoim Shopify Edytor motywów. --- # **🎉 Wynik końcowy** Po skonfigurowaniu: ✅ Twój program pojawia się dokładnie tam, gdzie umieściłeś go w swoim temacie ✅ CSS daje pełną kontrolę wzrokową ✅ Krążący przycisk akcji zapewnia dostępność wyskakiwania (jeśli jest włączony) ✅ Twoje wyskakujące przestrzega zasad celowania, harmonogramów i ustawień urządzeń ✅ Odwiedzający wchodzą w interakcję z w pełni on- marka, indywidualne doświadczenie Twój Custom PopUp jest teraz na żywo i unikalnie twój 🚀 ---