Chcesz dzielić się aktualnościami, promocjami lub ważnymi komunikatami z każdym odwiedzającym, który trafia do Twojego sklepu? 📢

Announcement Bar to jeden z najprostszych sposobów na przyciągnięcie uwagi bez zakłócania doświadczenia zakupowego. Niezależnie od tego, czy chodzi o wyprzedaż błyskawiczną, aktualizację wysyłki, czy zachętę do zapisu do newslettera, dobrze umiejscowiony pasek informuje klientów od momentu, w którym trafiają do sklepu.

Ten przewodnik przeprowadzi Cię przez cały proces konfiguracji — od utworzenia pierwszego paska po opublikowanie go w witrynie sklepu 🚀

📍 Czego się nauczysz

Pod koniec tego przewodnika będziesz wiedzieć, jak:

• Utworzyć nowy pasek ogłoszeń
• Wybrać odpowiednie umiejscowienie i typ paska
• Dodać wiadomość i wezwanie do działania
• Zastosować projekt dopasowany do Twojej marki
• Ustawić, gdzie i kiedy się pojawia
• Opublikować go w sklepie

✅ Zanim zaczniesz

Upewnij się, że osadzenie aplikacji Hoppy Announcement Bar jest włączone w Twoim motywie. Bez tego pasek nie pojawi się w sklepie, bez względu na to, jak doskonale jest skonfigurowany.

Aby to włączyć:

1. Przejdź do Shopify Admin → Sales Channels → Online Store → Themes
2. Kliknij Edit Theme przy aktywnym motywie
3. Wybierz App Embeds z lewego paska bocznego
4. Znajdź Announcement Bar/Banner
5. Przełącz go w pozycję ON
6. Kliknij Save

💡 Już włączone? Możesz zaczynać!

⚙️ Krok 1 — Utwórz nowe ogłoszenie

Otwórz aplikację Hoppy Banners w panelu Shopify admin.

Na pulpicie nawigacyjnym kliknij Create New Announcement.

Zostaniesz przeniesiony do ekranu wyboru umiejscowienia.

📌 Krok 2 — Wybierz umiejscowienie

Umiejscowienie decyduje o tym, gdzie pasek ogłoszeń pojawi się w Twoim sklepie.

Zobaczysz sześć opcji:

• Storefront Page — Pojawia się w głównej witrynie sklepu (strona główna, produkty, kolekcje itp.)
• Email Collection Bar — Pasek skupiony na zbieraniu adresów e-mail odwiedzających
• Cart Page — Pojawia się na dedykowanej stronie koszyka
• Cart Drawer — Pojawia się wewnątrz wysuwanego koszyka
• Checkout Page — Pojawia się podczas finalizacji zamówienia (tylko Shopify Plus)
• Custom Position — Umieść go ręcznie na konkretnych stronach produktów lub kolekcji

Wybierz tę, która najlepiej odpowiada Twojemu celowi. Dla większości sprzedawców najlepszym punktem wyjścia jest Storefront Page.

Po wybraniu kliknij Continue.

🎨 Krok 3 — Wybierz szablon (lub zacznij od zera)

Następnie zobaczysz kolekcję visual presets — wstępnie zaprojektowanych kombinacji kolorów, czcionek i układów.

Możesz:

• Choose a preset, aby szybko rozpocząć projektowanie
• Lub kliknąć Make your Own, aby zbudować wszystko ręcznie

Nie martw się — każdy szczegół projektu możesz później zmienić. Szablony po prostu oszczędzają czas ⏱️

Po wybraniu szablonu (lub zdecydowaniu się na start od zera) edytor otworzy się automatycznie.

📝 Krok 4 — Dodaj treść

Znajdziesz się w zakładce Content. To tutaj piszesz swoją wiadomość i wybierasz zachowanie paska.

🏷️ Announcement Name

To pole służy wyłącznie do Twojego wewnętrznego oznaczenia. Klienci go nie zobaczą.

Użyj czegoś rozpoznawalnego, np.:

• Summer Sale Banner
• Free Shipping Alert
• Black Friday Header

💡 Dobra nazwa pomaga, gdy masz uruchomionych kilka pasków jednocześnie.

📢 Announcement Type

To kontroluje sposób wyświetlania Twojej wiadomości. Są cztery typy:

Wybór typu

• Simple jest idealny dla jednej wyraźnej wiadomości — na przykład „Darmowa wysyłka przy zamówieniach powyżej 50 USD”.
• Running świetnie sprawdza się przy poczuciu pilności lub wyprzedażach błyskawicznych. Po wybraniu tej opcji pojawi się suwak Animation Speed i pole wyboru do zmiany kierunku przewijania.
• Multiple pozwala przewijać do 20 różnych slajdów. Po wybraniu tej opcji pojawi się suwak Display Duration, który kontroluje, jak długo każdy slajd pozostaje widoczny.
• Email zamienia pasek w narzędzie do pozyskiwania leadów. Po wybraniu tej opcji standardowe opcje CTA zostają zastąpione polami Success Message i Email Placeholder.

💡 Zawsze możesz wrócić i zmienić typ później.

✍️ Title & Subheading

• Title — To Twoja główna wiadomość. Obsługuje formatowanie tekstu (pogrubienie, kursywa, linki, kolory).
• Subheading — Mniejsza linia pomocnicza pod tytułem.

ℹ️ Pole Subheading jest ukryte, jeśli wybierzesz typ Running, ponieważ paski bieżące zazwyczaj używają jednej linii tekstu.

🔗 Call to Action (CTA)

Twoje CTA mówi klientom, co mają zrobić dalej.

Wybierz CTA Type:

• No Call to Action — Brak przycisku lub linku
• Button — Klikalny przycisk z własnym tekstem i linkiem
• Make entire bar clickable — Cały pasek staje się klikalny
• Coupon — Wyświetla kod kuponu z przyciskiem kopiowania do schowka
• Trigger App Event — Uruchamia niestandardowe zdarzenie do użycia z innymi aplikacjami

Jeśli wybierzesz Button, Make entire bar clickable lub Trigger App Event, zobaczysz pola na link lub tekst przycisku. Jeśli wybierzesz Coupon, pojawi się pole Coupon Code wraz z polem wyboru do wyświetlenia ikony kopiowania.

🚪 Close Icon

Włącz tę opcję, jeśli chcesz, aby klienci mogli zamknąć pasek.

Po włączeniu pojawiają się dwa dodatkowe pola:

• Appear again after — Ile czasu upływa, zanim pasek pojawi się ponownie dla tego odwiedzającego
• Unit — Godziny lub dni

Jest to przydatne, jeśli nie chcesz drażnić powracających odwiedzających tym samym komunikatem.

🎭 Banner Icons

Banner Icons pozwalają dodać klikalne ikony społecznościowe lub markowe bezpośrednio wewnątrz Announcement Bar, aby zwiększyć zaangażowanie i umożliwić szybki dostęp do zewnętrznych platform.

Jest to szczególnie przydatne do promowania profili w mediach społecznościowych, społeczności lub ważnych linków zewnętrznych bez dodawania zbędnego tekstowego chaosu do paska.

📌 Maximum Icons Allowed

Możesz dodać do 6 Banner Icons w ramach jednej konfiguracji Announcement Bar.

Pomaga to zachować czysty i zrównoważony układ zarówno na komputerach, jak i urządzeniach mobilnych.

🖥️ Desktop & Mobile Visibility

Każdą ikonę można skonfigurować tak, aby pojawiała się na:

• Urządzeniach desktopowych
• Urządzeniach mobilnych
• Lub na obu jednocześnie

Daje to większą elastyczność w zależności od tego, jak chcesz, aby Announcement Bar wyglądał na różnych rozmiarach ekranu.

🔄 Replace Icon

Ikony można zastępować w dowolnym momencie za pomocą wbudowanej Icon Library.

Dostępne działania

• Przeglądać dostępne ikony w Icon Library
• Natychmiast zastępować istniejące ikony
• Aktualizować ikony bez wpływu na resztę konfiguracji

⚠️ Ważne:

Niestandardowe przesyłanie ikon nie jest obecnie obsługiwane. Można używać tylko ikon dostępnych w Icon Library.

🔗 Call to Action (CTA)

Każda Banner Icon może opcjonalnie zawierać własne zachowanie Call to Action.

Dostępne opcje

• No call to action
• Add Link

➕ Add Link

Gdy wybrane jest Add Link:

→ Pojawia się pole CTA Link

Pozwala to ikonie przekierowywać odwiedzających na strony zewnętrzne lub wewnętrzne.

Przykłady zastosowań

• Profile w mediach społecznościowych
• Czaty WhatsApp
• Społeczności Discord
• Kolekcje produktów
• Strony docelowe promocji

⚠️ Important Notes

• Każda ikona może mieć własne niezależne zachowanie CTA
• Niektóre ikony mogą pozostać nieklikalne, podczas gdy inne przekierowują odwiedzających
• Usunięcie ikony usuwa tylko tę konkretną ikonę i nie wpływa na pozostałe ikony
• Układ ikon może wpływać na odstępy i widoczność na mniejszych ekranach mobilnych

💡 Aby zapewnić najlepsze wrażenia w sklepie, unikaj przeładowywania Announcement Bar zbyt wieloma ikonami i linkami jednocześnie.

🎨 Krok 5 — Wybierz projekt

Kliknij zakładkę Design, aby dostosować styl paska.

Aby szybko skonfigurować, skup się na tych podstawach:

• Template — Wybierz spośród ponad 20 gotowych stylów lub pozostań przy swoim szablonie
• Visibility — Wybierz, czy ma się pojawiać na Desktop and Mobile, Desktop Only czy Mobile Only
• Background — Wybierz Single Color, Gradient lub Pattern
• Typography — Wybierz czcionkę i ustaw kolor tytułu
• Button — Dostosuj kolor przycisku, kolor tekstu i promień narożników (jeśli używasz przycisku CTA)

💡 Aby uzyskać głębszą personalizację projektu — w tym animacje, niestandardowy CSS, zaawansowane efekty przycisków i stylizację ikon społecznościowych — zobacz dedykowaną dokumentację Design & Styling.

📍 Krok 6 — Ustaw pozycję i widoczność

Kliknij zakładkę Placement, aby kontrolować, gdzie i kiedy pojawia się pasek.

📐 Display Position

To ustawia fizyczną lokalizację paska:

• Top Push — Pcha zawartość strony w dół
• Top Push (Sticky) — Pozostaje przyklejony u góry podczas przewijania
• Top Overlap — Unosi się nad górą strony
• Top Overlap (Sticky) — Unosi się i pozostaje przyklejony podczas przewijania
• Bottom Overlap (Sticky) — Pojawia się u dołu obszaru widoku
• Manual — Umieszczasz go samodzielnie za pomocą fragmentu kodu lub bloku aplikacji

ℹ️ Jeśli wybierzesz Manual, rozwijana lista targetowania stron zostanie wyłączona i otrzymasz fragment kodu do wklejenia w swój motyw.

🎯 Page Targeting

Zdecyduj, na których stronach pojawia się pasek:

• Every page
• Home page only
• All products
• Products in specific collections
• Specific products
• All collections
• Specific collections

Jeśli wybierzesz opcję „specific”, pojawi się przycisk Select Products lub Select Collections, dzięki któremu ręcznie wybierzesz dokładnie miejsca, w których ma się on wyświetlać.

⏰ Scheduling

Chcesz, aby pasek uruchomił się później lub zatrzymał automatycznie? Ustaw Start Date i End Date.

Jeśli pozostawisz puste, pasek pojawi się natychmiast i pozostanie aktywny, dopóki ręcznie go nie wycofasz.

💡 Zaawansowane opcje targetowania — w tym tagi klientów, geolokalizacja, źródła UTM i opóźnienia czasu na stronie — są dostępne w tej samej zakładce. Są szczegółowo opisane w dokumentacji Advanced Targeting.

🚀 Krok 7 — Opublikuj pasek

Gdy wszystko wygląda dobrze, nadszedł czas, aby uruchomić pasek.

Kliknij Publish w prawym górnym rogu.

Pojawi się baner potwierdzający sukces. Jeśli App Embed jest już włączony, wszystko gotowe! 🎉

Jeśli App Embed nie jest włączony, baner przypomni Ci o tym i poda szybki link do włączenia go w edytorze motywu.

⚠️ Ważne: Samo zapisanie nie sprawia, że pasek jest widoczny dla klientów. Musisz kliknąć Publish.

🎉 Efekt końcowy

Po pomyślnym opublikowaniu:

✅ Twój pasek ogłoszeń pojawia się na wybranych stronach
✅ Klienci widzą Twoją wiadomość natychmiast po wejściu
✅ Twoje CTA generuje kliknięcia, zapisy lub sprzedaż
✅ Projekt idealnie współgra z brandingiem Twojego sklepu
✅ Możesz edytować, duplikować lub wycofywać publikację w dowolnym momencie z poziomu pulpitu nawigacyjnego

📚 Powiązana dokumentacja

Chcesz pójść dalej? Sprawdź te dedykowane przewodniki:

• Design & Styling — Głęboka personalizacja kolorów, czcionek, animacji i niestandardowego CSS
• Advanced Targeting — Geolokalizacja, tagi klientów, filtrowanie UTM i reguły czasu na stronie
• Translations — Uruchamianie wielojęzycznych pasków ogłoszeń
• Troubleshooting — Co zrobić, jeśli pasek się nie wyświetla

Miłego ogłaszania! 🥂

Aktualizowane na: 01/09/2026