> ## 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ć Announcement Bar > ℹ️ **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 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: | Typ | Najlepszy do | | ----- | ----- | | **Simple** | Pojedynczej statycznej wiadomości | | **Running** | Przewijającego się paska bieżącego | | **Multiple** | Rotujących slajdów z wieloma wiadomościami | | **Email** | Zbierania adresów e-mail odwiedzających | ### **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\! 🥂