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

Aktualizowane na: 10/09/2026