ℹ️ 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 Announcement Bar oferuje cztery różne sposoby wyświetlania komunikatów w Twoim sklepie. Każdy typ zachowuje się inaczej, obsługuje różne konfiguracje treści i został zaprojektowany z myślą o określonych zastosowaniach.

Wybór odpowiedniego typu na wczesnym etapie konfiguracji pozwala uniknąć ponownej pracy i zapewnia, że ogłoszenie będzie się zachowywać dokładnie tak, jak oczekujesz, w sklepie na żywo.

⚠️ Zanim zaczniesz

Typ ogłoszenia wybiera się w zakładce Content (Zawartość) podczas tworzenia lub edycji ogłoszenia.

Możesz zmieniać typy w dowolnym momencie, ale pamiętaj, że:

• Niektóre pola pojawią się lub znikną w zależności od wybranego typu
• Elementy treści mogą zostać przycięte lub rozszerzone podczas przełączania się między niektórymi typami
• Ustawienia projektu i umiejscowienia pozostają wspólne dla wszystkich typów

ℹ️ Typ ogłoszenia nie jest tym samym co umiejscowienie. Umiejscowienie określa gdzie pasek się pojawia. Typ określa jak pasek się zachowuje.

📋 Cztery typy ogłoszeń

1️⃣ Simple Announcement

Typ Simple (Prosty) wyświetla pojedynczy, statyczny komunikat. To najczęściej używany format, ponieważ jest prosty i sprawdza się w prawie każdym zastosowaniu.

Co robi

• Wyświetla jedno ogłoszenie z tytułem, podtytułem i opcjonalnym wezwaniem do działania
• Pozostaje statyczny na stronie, dopóki klient jej nie opuści lub nie zamknie paska
• Obsługuje wszystkie typy CTA: przycisk, kliknięcie w cały pasek, kupon, zdarzenie wyzwalające lub brak CTA

Dostępne pola treści

• Title (Tytuł) — Główny komunikat. Obsługuje formatowanie tekstu.
• Subheading (Podtytuł) — Druga linia pod tytułem.
• Call to action type (Typ wezwania do działania) — Wybierz, jak klienci będą wchodzić w interakcję z paskiem.

Zachowanie CTA

ℹ️ Gdy wybrany jest Trigger App Event, pojawia się dodatkowe pole Trigger ID (ID wyzwalacza). Ten identyfikator musi być zgodny z nazwą zdarzenia skonfigurowaną w aplikacji odbierającej.

Najlepiej sprawdza się w

• Ogłoszeniach o wyprzedażach w całym sklepie
• Aktualizacjach polityki wysyłki
• Ofertach ograniczonych czasowo
• Ogólnych promocjach

2️⃣ Running Line Announcement

Typ Running (Bieżący) tworzy ciągły, przesuwający się poziomo pasek informacyjny — podobny do wiadomościowych napisów bieżących. Tekst tytułu animuje się przez cały pasek w pętli.

Co robi

• Wyświetla jeden tytuł w płynnym, nieskończonym przewijaniu
• Kierunek i prędkość są w pełni konfigurowalne
• Pole podtytułu jest ukryte, ponieważ format opiera się na pojedynczej przewijającej się linii

Dostępne pola treści

• Title (Tytuł) — Komunikat, który przewija się przez pasek. Obsługuje formatowanie tekstu.
• Animation speed (Szybkość animacji) — Suwak od 1 do 80 kontrolujący szybkość przesuwania się tekstu.
• Run left to right (Kierunek od lewej do prawej) — Pole wyboru, które odwraca domyślny kierunek przewijania.

Jak działa szybkość animacji

• Niższe wartości = wolniejsze, bardziej czytelne przewijanie
• Wyższe wartości = szybszy ruch paska bieżącego
• Szybkość jest obliczana dynamicznie na podstawie długości tekstu tytułu

Zachowanie CTA

Ogłoszenia Running obsługują przycisk, kupon, wyzwalacz i brak CTA. Opcja Make entire bar clickable (Klikalny cały pasek) owija przewijający się obszar linkiem.

Jeśli użyty jest przycisk lub kupon, pojawia się on statycznie obok przewijającego się tekstu.

Najlepiej sprawdza się w

• Alertach o szybkich wyprzedażach
• Pilnych terminach wysyłki
• Powtarzalnych sloganach marki
• Przypomnieniach zależnych od czasu

⚠️ Ważne: Paski bieżące najlepiej działają z krótszymi tytułami. Bardzo długie komunikaty mogą powodować nierównomierne tempo przewijania na mniejszych ekranach.

3️⃣ Multiple Rotating Announcements

Typ Multiple (Wielokrotny) pozwala na umieszczenie kilku ogłoszeń w jednym pasku, który automatycznie się przez nie przewija. Klienci widzą jeden komunikat na raz, ze strzałkami nawigacyjnymi do ręcznego przeglądania.

Co robi

• Przewija się przez kolejne slajdy ogłoszeń
• Każdy slajd ma własny tytuł, podtytuł i CTA
• Automatycznie przechodzi dalej na podstawie konfigurowalnego czasu wyświetlania
• Zawiera nawigację strzałkami w lewo/w prawo

Dostępne pola treści

• Announcement display duration (Czas wyświetlania ogłoszenia) — Suwak od 1 do 10 sekund kontrolujący, jak długo każdy slajd pozostaje widoczny przed automatycznym przejściem.
• Announcement #1, #2, #3... (Ogłoszenie nr 1, 2, 3...) — Każdy slajd to niezależny blok treści z własnym tytułem, podtytułem i CTA.
• Add new announcement (Dodaj nowe ogłoszenie) — Dodaje kolejne slajdy.

Limity slajdów

• Minimum: 2 slajdy
• Maksimum: 20 slajdów

Możesz zmieniać kolejność slajdów za pomocą strzałek góra/dół i usuwać slajdy, jeśli masz ich więcej niż 2.

Zachowanie CTA

Każdy slajd może mieć własne, niezależne CTA. Jeden slajd może mieć przycisk, inny może wyświetlać kupon, a trzeci może w ogóle nie mieć CTA.

Obsługiwane typy CTA na slajd: przycisk, kliknięcie w cały pasek, kupon, wyzwalacz lub brak.

Efekty animacji

Przejście między slajdami kontroluje ustawienie Animation (Animacja) w zakładce Design (Wygląd):

• Slide (Przesunięcie) — Standardowe poziome przejście przesuwne
• Fade (Zanikanie) — Płynne przejście przez zanikanie między slajdami
• Cube (Kostka) — Efekt obrotu w 3D
• Flip (Obrót) — Przejście w stylu obracania karty

Najlepiej sprawdza się w

• Prezentowaniu wielu promocji jednocześnie
• Ogłaszaniu różnych kategorii produktów
• Rotacyjnym wyświetlaniu komunikatów o wysyłce, zwrotach i zaufaniu
• Wyróżnianiu kilku kuponów bez zaśmiecania strony

4️⃣ Email Collection Banner

Typ Email (E-mail) zamienia pasek ogłoszeń w formularz zbierania leadów. Wyświetla pole wprowadzania adresu e-mail i przycisk przesyłania, a następnie pokazuje stan sukcesu po przesłaniu.

Co robi

• Wyświetla tytuł, podtytuł i pole wprowadzania adresu e-mail
• Pokazuje Success Message (Komunikat sukcesu) po przesłaniu adresu e-mail przez klienta
• Może zawierać kod kuponu jako nagrodę za zapisanie się

Dostępne pola treści

• Title (Tytuł) — Główny komunikat zachęcający klientów do zapisania się.
• Subheading (Podtytuł) — Tekst uzupełniający pod tytułem.
• Button text (Tekst przycisku) — Etykieta przycisku przesyłania. Jeśli pozostanie puste, domyślnie ustawia się Subscribe (Zapisz się).
• Success Message (Komunikat sukcesu) — Tekst potwierdzenia wyświetlany po pomyślnym przesłaniu adresu e-mail.
• Email Placeholder (Tekst zastępczy e-maila) — Tekst podpowiedzi wewnątrz pustego pola wprowadzania adresu e-mail.

Zachowanie CTA

Paski zbierania adresów e-mail obsługują dwa tryby CTA:

• Button (Przycisk) — Standardowy przycisk przesyłania. Pasek zbiera adres e-mail i pokazuje stan sukcesu.
• Coupon (Kupon) — Wyświetla kod kuponu obok lub zamiast pola wprowadzania, z opcjonalnym przyciskiem kopiowania.

Opcje Make entire bar clickable (Klikalny cały pasek) i Trigger App Event (Wyzwól zdarzenie aplikacji) nie są dostępne dla tego typu, ponieważ pasek jest zbudowany wokół przesyłania formularza.

Podgląd stanu sukcesu

W podglądzie aplikacji zobaczysz dwa stany paska ułożone jeden nad drugim:

1. Aktywny formularz zbierania adresów e-mail
2. Pasek z komunikatem sukcesu

W witrynie sklepu na żywo klienci widzą stan sukcesu dopiero po przesłaniu swojego adresu e-mail.

Najlepiej sprawdza się w

• Budowaniu list mailingowych
• Oferowaniu kodów rabatowych w zamian za adresy e-mail
• Zapisach na listę oczekujących przed premierą
• Promowaniu programów VIP lub lojalnościowych

🔀 Jak wybór typu wpływa na widoczne ustawienia

Wybór typu ogłoszenia dynamicznie zmienia pola wyświetlane w zakładce Content (Zawartość). Oto szybka ściąga:

Pola według typu

Limity elementów treści

• Simple, Running, Email — Używany jest tylko pierwszy element treści. Nawet jeśli w modelu danych istnieje wiele elementów, renderuje się tylko pierwszy.
• Multiple — Wszystkie elementy treści są używane jako poszczególne slajdy.

⚠️ Jeśli przełączysz się z Multiple na Simple, dodatkowe slajdy zostaną zachowane w tle, ale nie będą wyświetlane. Ponownie pojawią się, gdy wrócisz do Multiple.

🎯 Wyjaśnienie typów wezwań do działania (CTA)

Zachowanie CTA jest w większości spójne we wszystkich typach ogłoszeń, z kilkoma wyjątkami specyficznymi dla typu.

No call to action (Brak wezwania do działania)

Pasek ma charakter wyłącznie informacyjny. Nie renderują się żadne przyciski, linki ani klikalne obszary.

Button (Przycisk)

Pojawia się klikalny przycisk. Konfigurujesz:

• Button text (Tekst przycisku) — Co mówi przycisk
• Link (Link) — Dokąd prowadzi przycisk

Make entire bar clickable (Klikalny cały pasek)

Cały obszar ogłoszenia staje się linkiem. Kliknięcie w dowolne miejsce na pasku przekierowuje do skonfigurowanego adresu URL.

ℹ️ Jeśli Twój pasek zawiera zagnieżdżone klikalne elementy, takie jak ikony społecznościowe, nadal działają one niezależnie. Kliknięcie w cały pasek nie zastępuje ich.

Coupon (Kupon)

Wyświetla sformatowane pole kodu kuponu. Konfigurujesz:

• Coupon Code (Kod kuponu) — Rzeczywisty kod rabatowy
• Show copy button (Pokaż przycisk kopiowania) — Dodaje ikonę kopiowania jednym kliknięciem obok kodu

Trigger App Event (Wyzwól zdarzenie aplikacji)

Zamiast nawigować do adresu URL, przycisk wysyła zdarzenie CustomEvent przeglądarki. Konfigurujesz:

• Trigger ID (ID wyzwalacza) — Ciąg znaków nazwy zdarzenia (na przykład, my-app:open-modal)

Inne aplikacje lub niestandardowe skrypty szablonu nasłuchujące tej nazwy zdarzenia mogą na nie odpowiedzieć.

⚠️ CTA wyzwalające nie są dostępne w paskach zbierania adresów e-mail, ponieważ główną akcją paska jest przesyłanie formularza.

🎨 Zachowanie projektu według typu

Większość ustawień projektu ma zastosowanie uniwersalne, ale niektóre zachowują się inaczej w zależności od typu.

Ustawienie Animation (Animacja) w zakładce Design (Wygląd)

• Simple i Email — Animation (Animacja) kontroluje efekt pojawiania się paska podczas pierwszego ładowania.
• Running — Szybkość animacji jest kontrolowana w zakładce Content (Zawartość), a nie Design (Wygląd).
• Multiple — Animation (Animacja) kontroluje efekt przejścia między slajdami (Slide, Fade, Cube, Flip).

Social icons (Ikony społecznościowe)

Ikony baneru można dodać do wszystkich typów. Widoczność kontroluje się osobno dla komputerów stacjonarnych i urządzeń mobilnych.

• Ikony pojawiają się statycznie obok treści
• Każda ikona może prowadzić do adresu URL lub pozostać nieklikalna

Close icon (Ikona zamykania)

Wszystkie typy obsługują ikonę zamykania. Po włączeniu możesz skonfigurować:

• Appear again after (Pokaż ponownie po) — Liczba godzin lub dni, po których pasek ponownie się pojawi dla wracającego klienta

Jeśli nie ustawisz czasu ponownego pojawienia się, pasek pozostanie ukryty na stałe po zamknięciu.

📱 Zachowanie na urządzeniach mobilnych

Wszystkie cztery typy ogłoszeń są w pełni responsywne. Jednak dostosowania układu następują automatycznie:

• Paski Email (E-mail) układają się pionowo na urządzeniach mobilnych — pole wprowadzania i przycisk znajdują się w osobnych liniach
• Paski Multiple (Wielokrotny) zmniejszają odstępy strzałek i nieco pomniejszają czcionki
• Paski Running (Bieżący) zachowują prędkość przewijania, ale kompresują rozmiary ikon, jeśli włączone są ikony społecznościowe
• Paski Simple (Prosty) z przyciskami mogą wyśrodkować tekst na mniejszych ekranach w zależności od typu CTA

W razie potrzeby możesz zastąpić wygląd mobilny za pomocą panelu Custom CSS (Niestandardowy CSS) w zakładce Design (Wygląd).

💡 Przykłady zastosowań

Przykład 1 — Pasek Simple z kuponem

• Type: Simple
• Title: „Letnia wyprzedaż trwa ☀️”
• Subheading: „Użyj kodu SUNNY, aby otrzymać 20% zniżki”
• CTA: Coupon
• Coupon code: SUNNY
• Rezultat: Czysty, statyczny pasek z kopiowalnym kodem rabatowym.

Przykład 2 — Pasek bieżący dla pilności

• Type: Running
• Title: „Darmowa wysyłka kończy się dziś o północy ⏰”
• Animation speed: 25
• CTA: No call to action
• Rezultat: Ciągle przewijający się komunikat o pilności u góry sklepu.

Przykład 3 — Wiele slajdów dla różnych kolekcji

• Type: Multiple
• Slide 1: „Do 50% zniżki na buty →” z przyciskiem linkującym do /collections/shoes
• Slide 2: „Nowości w akcesoriach →” z przyciskiem linkującym do /collections/accessories
• Slide 3: „Darmowe zwroty wszystkich zamówień” bez CTA
• Display duration: 4 sekundy
• Rezultat: Jeden pasek, który automatycznie przewija się przez trzy różne promocje.

Przykład 4 — Zbieranie e-maili z nagrodą w postaci kuponu

• Type: Email
• Title: „Dołącz do listy VIP”
• Subheading: „Odbierz 15% zniżki na pierwsze zamówienie”
• Button text: „Odbierz mój kod”
• Success Message: „Witamy! Twój kod WELCOME15 jest gotowy.”
• Email Placeholder: „Wpisz swój adres e-mail”
• Rezultat: Pasek zbierający leady, który nagradza subskrybentów natychmiastowym kuponem.

⚠️ Ważne informacje i ograniczenia

Przełączanie typów

Przełączanie między typami nie usuwa Twojej treści. Jednak:

• Przełączenie z Multiple na Simple ukrywa dodatkowe slajdy
• Przełączenie z Running na Simple ponownie ujawnia pole podtytułu
• Przełączenie na Email ukrywa pola Trigger ID, jeśli zostały wcześniej ustawione

Zawsze sprawdzaj swoją treść po zmianie typu.

Długość paska bieżącego

Bardzo długie tytuły w paskach bieżących mogą powodować nierównomierne tempo przewijania, szczególnie na urządzeniach mobilnych. Testuj z rzeczywistą długością komunikatu przed opublikowaniem.

Minimum slajdów w Multiple

Nie możesz opublikować ogłoszenia Multiple z mniej niż 2 slajdami. Jeśli potrzebujesz tylko jednego komunikatu, użyj zamiast tego typu Simple.

Stan sukcesu paska Email

Stan sukcesu pojawia się dopiero po przesłaniu adresu e-mail przez klienta. Podgląd w aplikacji pokazuje oba stany ułożone jeden nad drugim jako informację, ale klienci w sklepie na żywo najpierw widzą formularz.

Klikalny cały pasek a zagnieżdżone elementy

Gdy włączona jest opcja Make entire bar clickable, klikanie ikon społecznościowych lub przycisku kopiowania nadal działa zgodnie z oczekiwaniami. Kliknięcie w cały pasek ignoruje te zagnieżdżone elementy interaktywne.

🎉 Podsumowanie

Zrozumienie czterech typów pasków ogłoszeń pomaga dopasować odpowiedni format do Twojego celu:

✅ Simple (Prosty) — Najlepszy do pojedynczych, statycznych promocji
✅ Running (Bieżący) — Najlepszy do komunikatów o pilności i powtarzalnych napisów bieżących
✅ Multiple (Wielokrotny) — Najlepszy do rotacji kilku ofert w jednym umiejscowieniu
✅ Email (E-mail) — Najlepszy do zbierania leadów i rozbudowywania list subskrybentów

Każdy typ obsługuje ten sam system projektu, zasady umiejscowienia, harmonogramowanie i logikę kierowania. Różnica polega wyłącznie na tym, jak treść jest prezentowana i jak można z nią wchodzić w interakcję.

Wybór odpowiedniego typu na początku zapewnia, że Twoje ogłoszenie będzie naturalnie wpisywać się w wygląd sklepu i dostarczy właściwą wiadomość we właściwym formacie 🚀

Aktualizowane na: 10/09/2026