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

Czy chcesz, aby pasek ogłoszeń wyświetlał się w konkretnym miejscu, którego automatyczne pozycjonowanie nie obejmuje? 🎯

Niestandardowe położenie daje Ci pełną kontrolę nad tym, gdzie dokładnie wyświetli się pasek — niezależnie od tego, czy ma to być wewnątrz konkretnej sekcji motywu, pod nawigacją, w obszarze opisu produktu, czy gdziekolwiek indziej, gdzie możesz dodać fragment kodu lub blok aplikacji.

Ten przewodnik przeprowadzi Cię przez konfigurację paska ogłoszeń z ręcznym położeniem, aby wyświetlał się dokładnie tam, gdzie chcesz ✨

✅ Zanim zaczniesz

Upewnij się, że osadzenie aplikacji Hoppy Announcement Bars & Banners jest włączone w Twoim motywie. Nawet przy niestandardowym położeniu osadzenie ładuje wymagane skrypty i style.

Aby je włączyć:

1. Przejdź do Shopify Admin → Sales Channels (Kanały sprzedaży) → Online Store (Sklep internetowy) → Themes (Motywy)
2. Kliknij Edit Theme (Edytuj motyw) w aktywnym motywie
3. W lewym panelu wybierz App Embeds (Osadzenia aplikacji)
4. Znajdź Announcement Bar/Banner (Pasek ogłoszeń/baner)
5. Przełącz go w pozycję ON (WŁ.)
6. Kliknij Save (Zapisz)

💡 Już włączone? Możesz przejść dalej!

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

Otwórz aplikację Hoppy Announcement Bars & Banners w panelu Shopify Admin.

Na pulpicie kliknij Create New Announcement (Utwórz nowe ogłoszenie).

Zostaniesz przeniesiony na ekran wyboru położenia.

📌 Krok 2 — Wybierz niestandardową pozycję

Wśród opcji położenia wybierz Custom Position (Niestandardowa pozycja).

To informuje aplikację, że to Ty — a nie automatyczny iniektor — zdecydujesz, gdzie dokładnie pasek pojawi się w sklepie.

Po wyborze kliknij Continue (Kontynuuj).

🎨 Krok 3 — Zaprojektuj swój pasek

Stwórz pasek ogłoszeń tak, jak chcesz:

• Dodaj tytuł, podtytuł i CTA (przycisk wezwania do działania)
• Wybierz typ ogłoszenia (Simple, Running, Multiple lub Email)
• Dostosuj wygląd w karcie Design (Projekt)

💡 Szczegółowe wskazówki dotyczące projektowania — w tym szablony, kolory, animacje i własny CSS — znajdziesz w dokumentacji Design & Styling (Projekt i style).

📍 Krok 4 — Ustaw Display Position na Manual

Kliknij kartę Placement (Położenie).

Z rozwijanej listy Display Position (Pozycja wyświetlania) wybierz Manual (Ręczna).

Gdy to zrobisz:

• Lista rozwijana Page Targeting (Targetowanie strony) zostaje automatycznie wyłączona i ustawiona na Custom (Niestandardowe)
• Pasek nie będzie już automatycznie wstrzykiwany na stronę
• Zamiast tego będzie czekać, aż umieścisz go za pomocą fragmentu kodu lub bloku aplikacji

To właśnie sprawia, że niestandardowe położenie działa 🛠️

📋 Krok 5 — Skopiuj fragment kodu położenia

Po zapisaniu paska na karcie Placement (Położenie) pojawi się kopiowalny fragment kodu:

\<div class="futureblink-announcement-block" id="{announcementId}"\>\</div\>

Każde ogłoszenie ma unikalny identyfikator. Fragment kodu informuje aplikację, który pasek ma wyrenderować wewnątrz tego kontenera.

Kliknij przycisk kopiowania, aby zapisać go w schowku 📋

🧩 Krok 6 — Dodaj fragment kodu do motywu

Masz dwie możliwości umieszczenia fragmentu:

Opcja A — Za pomocą bloku aplikacji (zalecane)

To najprostsza metoda, która działa z motywami Online Store 2.0.

1. Przejdź do Shopify Admin → Sales Channels → Online Store → Themes
2. Kliknij Edit Theme w aktywnym motywie
3. Przejdź do strony lub sekcji, w której chcesz umieścić pasek
4. Kliknij Add Section (Dodaj sekcję) lub Add Block (Dodaj blok)
5. Przejdź do zakładki Apps (Aplikacje)
6. Wybierz Hoppy Announcement Bars & Banners
7. Wklej swój Announcement ID (Identyfikator ogłoszenia) w ustawieniach bloku
8. Przeciągnij blok na wybrane miejsce
9. Kliknij Save

Opcja B — Za pomocą niestandardowego fragmentu Liquid

Skorzystaj z tej opcji, jeśli chcesz umieścić pasek w konkretnym pliku Liquid lub motywie innym niż OS 2.0.

1. Przejdź do Shopify Admin → Sales Channels → Online Store → Themes
2. Kliknij menu ... przy aktywnym motywie → Edit Code (Edytuj kod)
3. Otwórz plik Liquid, w którym ma się pojawić pasek
4. • Typowe przykłady: theme.liquid, product.liquid, header.liquid
4. Wklej fragment kodu w miejsce, w którym ma być wyrenderowany
5. Kliknij Save

⚠️ Ważne:

• Wklejaj fragment kodu tylko raz na pasek
• Jeśli ten sam identyfikator pojawi się wielokrotnie na tej samej stronie, pasek może wyrenderować się w każdym pasującym kontenerze
• Upewnij się, że kontener znajduje się wewnątrz znacznika <body>, a nie <head>

🚀 Krok 7 — Zapisz i opublikuj

Wróć do edytora Hoppy Announcement Bars & Banners i kliknij Save.

Następnie kliknij Publish (Opublikuj), aby wprowadzić go na żywo.

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

Po opublikowaniu odwiedź stronę, na której umieściłeś fragment kodu, aby upewnić się, że pasek pojawia się we właściwym miejscu 👀

🎯 Kiedy używać niestandardowego położenia

Niestandardowe położenie jest szczególnie przydatne, gdy:

• Chcesz, aby pasek znajdował się w konkretnej sekcji motywu, a nie globalnie u góry lub u dołu
• Układ Twojego motywu koliduje z automatycznym pozycjonowaniem u góry/u dołu
• Wyświetlasz wiele pasków i musisz kontrolować, gdzie dokładnie znajduje się każdy z nich
• Chcesz umieścić pasek w sekcji kreatora stron, na niestandardowej stronie docelowej lub w konkretnym szablonie produktu
• Chcesz, aby pasek pojawiał się pomiędzy istniejącymi blokami treści, a nie nad lub pod nimi

⚠️ Przydatne wskazówki

Przemieszczanie lub usuwanie paska

Ponieważ pasek jest przypisany do ręcznego kontenera, możesz:

• Przenosić blok aplikacji lub fragment Liquid w nowe miejsce w dowolnej chwili
• Usunąć blok lub fragment, aby zatrzymać wyświetlanie paska na tej stronie
• Ponownie użyć tego samego fragmentu w wielu szablonach, jeśli jest to potrzebne

Łączenie z targetowaniem

Nawet przy niestandardowym położeniu nadal możesz korzystać z:

• Scheduling (Harmonogram) — ustaw daty rozpoczęcia i zakończenia
• Geolocation (Geolokalizacja) — pokazuj tylko odwiedzającym z wybranych krajów
• Customer Targeting (Targetowanie klientów) — filtruj według statusu logowania, tagów lub całkowitych wydatków
• UTM Source Filtering (Filtrowanie źródeł UTM) — pokazuj tylko odwiedzającym z konkretnych źródeł ruchu
• Time-on-Site Delay (Opóźnienie po czasie na stronie) — opóźnij pojawienie się paska

💡 Te opcje konfiguruje się w tej samej karcie Placement. Pełne omówienie znajdziesz w dokumentacji Advanced Targeting (Zaawansowane targetowanie).

Niestandardowe położenie w koszyku i kasie

• Położenia Cart Page (Strona koszyka) i Cart Drawer (Szuflada koszyka) również obsługują pozycję Manual, jeśli chcesz precyzyjnie umieścić pasek wewnątrz obszaru koszyka
• Położenie Checkout Page (Strona kasy) (tylko Shopify Plus) zamiast fragmentu Liquid używa systemu bloków rozszerzeń interfejsu kasy

🎉 Efekt końcowy

Po poprawnej konfiguracji:

✅ Pasek ogłoszeń pojawia się dokładnie w tym miejscu w motywie, w którym go umieściłeś
✅ Respektuje wszystkie aktywne reguły targetowania (harmonogram, geolokalizację, segmenty klientów itd.)
✅ Możesz go w dowolnej chwili przenosić lub usuwać, nie zmieniając treści ani wyglądu paska
✅ Wiele niestandardowych pasków może współistnieć na tej samej stronie w różnych sekcjach
✅ Układ Twojego sklepu pozostaje uporządkowany i przemyślany ✨

📚 Powiązana dokumentacja

• How to Set Up an Announcement Bar (Jak skonfigurować pasek ogłoszeń) — Pełny przewodnik po tworzeniu i publikowaniu każdego typu paska
• Design & Styling (Projekt i style) — Zaawansowana konfiguracja kolorów, czcionek, animacji i własnego CSS
• Advanced Targeting (Zaawansowane targetowanie) — Harmonogram, geolokalizacja, tagi klientów, filtrowanie UTM i reguły opóźnienia
• Announcement Bar Types Explained (Wyjaśnienie typów pasków ogłoszeń) — Różnice między paskami Simple, Running, Multiple i Email

Udanych umiejscowień! 🥂

Aktualizowane na: 10/09/2026