Karta Design (Projekt) daje Ci pełną kontrolę nad wyglądem i charakterem paska ogłoszeniowego w całym sklepie. Od kolorów tła i typografii po animacje przycisków, styl ikon i własny CSS — niemal każdy wizualny szczegół można dostosować do marki.

Możesz szybko uruchomić pasek, używając gotowego szablonu, lub dostosować każdy piksel ręcznie. W obu przypadkach pasek będzie wyglądał jak naturalna część witryny sklepu 🎨

Większość ustawień związanych z kolorem obejmuje:

• Color Picker (Próbnik koloru) do wizualnego dobierania koloru
• Hex Code Input (Pole kodu szesnastkowego) do dokładnych kolorów marki

⚠️ Zanim zaczniesz

Aby skonfigurować ustawienia karty Design (Projekt):

→ Otwórz istniejący pasek ogłoszeniowy
→ Lub najpierw utwórz nowy

Następnie kliknij kartę Design w edytorze.

ℹ️ Niektóre opcje pojawiają się tylko dla określonych typów pasków lub konfiguracji. Na przykład animacje slajdów są widoczne tylko dla pasków Multiple (Wielokrotnych), a styl kuponu pojawia się tylko wtedy, gdy użyty jest przycisk CTA typu Coupon (Kupon). Warunkowe pola zostały opisane poniżej, dzięki czemu wiesz, kiedy można się ich spodziewać.

🎨 Szablon

• Co robi: Natychmiastowo stosuje gotowy styl wizualny na pasku ogłoszeniowym.
• Jak używać: Wybierz jeden z ponad 25 szablonów, aby szybko rozpocząć projektowanie bez ręcznego ustawiania każdego pola.

Każdy szablon wstępnie wypełnia:

• Typ tła, kolor i ustawienia gradientu
• Kolory i rozmiary tytułu oraz podtytułu
• Kolory przycisku, kolor tekstu i zaokrąglenie narożników
• Styl obramowania, ikon i kuponu

Dostępne szablony obejmują: Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy

⚠️ Ważne: Wybranie szablonu nadpisze większość pól projektowych. Zachowane zostaną ustawienia Visibility (Widoczności) oraz Position (Pozycji) (skonfigurowanej w karcie Placement (Umiejscowienie)).

💡 Szablony świetnie sprawdzają się w kampaniach sezonowych. Chcesz uzyskać wygląd Black Friday? Wybierz szablon Black Friday i dostosuj go według potrzeb.

👀 Widoczność

• Co robi: Kontroluje, na jakich urządzeniach wyświetla się pasek ogłoszeniowy.
• Opcje:
• • Desktop and Mobile (Komputer i urządzenia mobilne) — Widoczny na wszystkich urządzeniach
  • Only Desktop (Tylko komputer)
  • Only Mobile (Tylko urządzenia mobilne)

Przydaje się, gdy chcesz wyświetlać inny komunikat lub układ dla kupujących na komputerach i na urządzeniach mobilnych.

🖼️ Styl tła

• Co robi: Zmienia wygląd tła paska ogłoszeniowego.
• Dostępne opcje:
• • Single Color (Jeden kolor) — Jeden stały kolor tła
  • Gradient (Gradient) — Dwa kolory połączone pod dowolnym kątem
  • Patterns (Wzory) — Dekoracyjne wzory tła

🎨 Jeden kolor

• Wybierz kolor za pomocą Color Picker lub wprowadź ręcznie Hex Code.

🌈 Gradient

• Gradient Angle Degree (Kąt nachylenia gradientu): Kontroluje kierunek przejścia kolorów (0–360°)
• Initial Color (Kolor początkowy): Kolor początkowy
• Final Color (Kolor końcowy): Kolor końcowy

💡 Subtelny gradient może dodać głębi, nie rozpraszając uwagi. Spróbuj niskokontrastowych kątów, aby uzyskać nowoczesny wygląd.

✨ Wzory

Wybranie opcji Patterns odsłania listę rozwijaną z ponad 35 wbudowanymi opcjami tła:

• Dekoracyjne: Wavy, Sale, Discount, Balloon, Girly, Party, Fresh
• Świąteczne i sezonowe: Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday
• Teksturowane: Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese

ℹ️ Wzory są stosowane jako style CSS tła. Niektóre wykorzystują czysty CSS, inne zasoby graficzne.

📐 Obramowanie i narożniki

Ta sekcja kontroluje kształt i kontur paska.

• Bar Corner Radius (px) (Promień zaokrąglenia narożników paska (px)): Jak bardzo zaokrąglone są narożniki paska
• Bar Padding (px) (Wewnętrzny odstęp paska (px)): Wewnętrzny odstęp między krawędziami paska a jego zawartością
• Border Size (px) (Grubość obramowania (px)): Grubość zewnętrznego obramowania
• Border Color (Kolor obramowania): Kolor obramowania

💡 Promień zaokrąglenia równy 0 daje ostry, prostokątny pasek. Wyższe wartości tworzą bardziej miękkie, nowoczesne kształty.

🔤 Typografia

Ta sekcja kontroluje wygląd całego tekstu w pasku ogłoszeniowym.

📝 Styl tytułu

• Title Size (px) (Rozmiar tytułu (px)): Rozmiar głównej wiadomości
• Title Color (Kolor tytułu): Kolor głównej wiadomości

📄 Styl podtytułu

• Subheading Size (px) (Rozmiar podtytułu (px)): Rozmiar tekstu uzupełniającego
• Subheading Color (Kolor podtytułu): Kolor tekstu uzupełniającego

ℹ️ Pole podtytułu jest ukryte przy użyciu typu paska Running (Przewijany), ponieważ paski typu marquee zazwyczaj zawierają jeden wiersz tekstu.

🔠 Czcionka

Wybierz spośród 63 dostępnych czcionek, w tym:

• Czcionki systemowe: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI i inne
• Czcionki Google: Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script i wiele innych

Pierwszą opcją jest Use your theme font (Użyj czcionki motywu), która automatycznie dopasowuje się do istniejącej typografii Twojego sklepu.

💡 Dla czytelności ogranicz się do 1–2 czcionek na pasek. Pogrubiona czcionka dekoracyjna na tytuł i czysty bezszeryfowy krój na podtytuł często sprawdzają się najlepiej.

🔘 Projekt przycisku

Ta sekcja pozwala dostosować przycisk zachęcający do działania (CTA).

ℹ️ Te ustawienia są zawsze dostępne w karcie Design. Wpływają na witrynę sklepu tylko wtedy, gdy typ CTA jest ustawiony na Button (Przycisk), Full Bar (Cały pasek) lub Trigger (Wyzwalacz).

🎨 Kolor przycisku

• Zmienia kolor tła przycisku CTA.

🔤 Rozmiar i kolor tekstu przycisku

• Size (px) (Rozmiar (px)): Kontroluje rozmiar tekstu wewnątrz przycisku
• Color (Kolor): Zmienia kolor tekstu przycisku

⭕ Promień zaokrąglenia i styl przycisku

Te dwa pola są ze sobą powiązane:

• Corner Radius (px) (Promień zaokrąglenia (px)): Wprowadź wartość ręcznie, aby kontrolować zaokrąglenie
• Button Style (Styl przycisku): Szybko przełączaj się między ustawieniami wstępnymi:
• • Square (Kwadratowy) → ustawia promień na 0 px
  • Rounded (Zaokrąglony) → ustawia promień na 10 px
  • Fully Rounded (W pełni zaokrąglony) → ustawia promień na 30 px

Po wybraniu ustawienia wstępnego stylu promień zaokrąglenia aktualizuje się automatycznie. Po wpisaniu własnego promienia ustawienie wstępne stylu aktualizuje się odpowiednio:

• 0–9 px → Square (Kwadratowy)
• 10–29 px → Rounded (Zaokrąglony)
• 30+ px → Fully Rounded (W pełni zaokrąglony)

💪 Grubość czcionki

• Kontroluje, jak pogrubiony lub cienki wydaje się tekst przycisku
• Opcje: Normal (Normalna), Bold (Pogrubiona), 100–900

✍️ Styl czcionki

• Przełączaj się między: Normal (Normalny), Italic (Kursywa), Underline (Podkreślenie)

✨ Animacja przycisku

Dodaje ciągłą animację do przycisku, aby wyróżniał się na tle paska.

Dostępne animacje: None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip

💡 Subtelne animacje, takie jak Bounce lub Emitting, przyciągają uwagę bez agresywnego efektu. Użyj Flip lub Tada w kampaniach o wysokiej pilności.

🏷️ Styl kuponu

Ta sekcja pozwala dostosować wygląd pola z kodem kuponu.

ℹ️ Ta sekcja pojawia się tylko wtedy, gdy:

• Dowolny slajd treści używa typu CTA Coupon (Kupon), lub
• Typ paska jest ustawiony na Email (E-mail)

Dostępne ustawienia

• Coupon Border Style (Styl obramowania kuponu): Dashed (Kreskowany), Solid (Ciągły), Dotted (Kropkowany), Double (Podwójny), Groove (Wklęsły), Ridge (Wypukły), Inset (Wcięty), Outset (Wysunięty) lub None (Brak)
• Coupon Border Color (Kolor obramowania kuponu): Kolor konturu pola kuponu
• Coupon Text Color (Kolor tekstu kuponu): Kolor tekstu kodu kuponu
• Coupon Background (Tło kuponu): Kolor tła pola kuponu (obsługuje przezroczyste tła)

💡 Kreskowane obramowanie z kontrastującym tłem to klasyczny wygląd kuponu. Spróbuj półprzezroczystego tła, jeśli chcesz, aby wzór lub gradient paska był widoczny.

🎆 Animacje paska

Przejście między wieloma paskami

Dostępne tylko wtedy, gdy typ paska jest ustawiony na Multiple (Wielokrotny).

Kontroluje, jak slajdy przechodzą jeden w drugi:

• Slide (Przesunięcie) — Przesuwa poziomo między ogłoszeniami
• Fade In (Pojawienie się) — Płynnie zanika z jednego slajdu do drugiego
• Cube (Sześcian) — Efekt obrotu w 3D
• Flip (Obrót) — Efekt przewrócenia karty

ℹ️ To ustawienie znajduje się w karcie Design, a nie w karcie Content (Treść).

🎨 Ustawienia ikon

🚪 Kolor ikony zamykania

• Zmienia kolor ikony przycisku zamykania (zamykania paska).
• Widoczne tylko wtedy, gdy opcja Close Icon (Ikona zamykania) jest włączona w karcie Content (Treść).

➡️ Kolor ikony strzałki

• Zmienia kolor strzałek nawigacyjnych.
• Widoczne tylko wtedy, gdy typ paska jest ustawiony na Multiple (Wielokrotny), ponieważ strzałki służą do nawigacji między slajdami.

👥 Ikony baneru (ikony społecznościowe)

Ta sekcja pozwala stylizować ikony mediów społecznościowych wyświetlane wewnątrz paska.

• Social Icon Size (px) (Rozmiar ikony społecznościowej (px)): Dostosowuje rozmiar ikony
• Social Icon Color (Kolor ikony społecznościowej): Zmienia kolor ikony
• Social Icon Position (Pozycja ikony społecznościowej): Umieszcza ikony po stronie Left (Lewej) lub Right (Prawej) paska
• Use Original Social Icon Color (Użyj oryginalnego koloru ikony społecznościowej): Gdy włączone, każda platforma zachowuje swój markowy kolor (niebieski Facebooka, gradient Instagrama itp.) zamiast używać Twojego niestandardowego koloru

ℹ️ Ikony społecznościowe są konfigurowane w karcie Content (Treść). Karta Design kontroluje tylko ich wygląd.

💻 Własny CSS (dla zaawansowanych użytkowników)

💡 Funkcja zaawansowana: Jeśli potrzebujesz stylów niedostępnych w standardowych ustawieniach, możesz napisać własny CSS bezpośrednio w edytorze.

Po włączeniu dostępny jest szkielet CSS z predefiniowanymi klasami docelowymi:

• Cały kontener paska: .futureblink-announcement-bar
• Tekst tytułu: .futureblink-announcement-bar .title
• Tekst podtytułu: .futureblink-announcement-bar .subheading
• Tytuł mobilny: .futureblink-announcement-bar.mobile .title
• Podtytuł mobilny: .futureblink-announcement-bar.mobile .subheading
• Przycisk CTA: .futureblink-announcement-bar .cta-button
• Mobilny przycisk CTA: .futureblink-announcement-bar.mobile .cta-button
• Przycisk zamykania: .futureblink-announcement-bar .close-btn
• Strzałki nawigacyjne: .futureblink-announcement-bar .arrow
• Przyciski Poprzedni/Następny: .futureblink-announcement-bar .button-prev i .button-next

Jak działa własny CSS w witrynie sklepu:

• Wszystkie selektory są automatycznie ograniczone do konkretnego paska ogłoszeniowego
• Każda deklaracja otrzymuje priorytet !important, aby nadpisać style motywu
• Selektory mobilne (.mobile) są automatycznie owijane w zapytanie medialne dla urządzeń mobilnych
• CSS jest wstrzykiwany jako tag <style> podczas renderowania paska

⚠️ Uwaga: Własny CSS jest potężnym narzędziem, ale może kolidować ze stylami motywu. Przetestuj dokładnie zarówno na komputerze, jak i na urządzeniu mobilnym po wprowadzeniu zmian.

🛒 Styl strony Checkout

Dostępne tylko dla pasków ogłoszeniowych umieszczonych na Checkout Page (Strona realizacji zakupu) (wymagany Shopify Plus).

Gdy karta Placement (Umiejscowienie) jest ustawiona na Checkout Page (Strona realizacji zakupu), pełna karta Design zostaje zastąpiona uproszczonym panelem:

• Checkout Title Size (Rozmiar tytułu w checkout) — Extra Small (Bardzo mały), Small (Mały), Base (Podstawowy), Medium (Średni), Large (Duży), Extra Large (Bardzo duży)
• Checkout Title Color (Kolor tytułu w checkout) — Blue (Niebieski), Dull Grey (Przygaszony szary), Black (Czarny), Green (Zielony), Yellow (Żółty), Red (Czerwony)
• Checkout Subheading Size (Rozmiar podtytułu w checkout) — Te same opcje rozmiaru
• Checkout Subheading Color (Kolor podtytułu w checkout) — Te same opcje koloru

ℹ️ Projekt checkout wykorzystuje natywne tokeny tonu Shopify, aby zapewnić spójny styl w środowisku realizacji zakupu. Gradienty, wzory, przyciski i własny CSS nie są dostępne w paskach checkout.

🚀 Efekt końcowy

Po pomyślnej konfiguracji ustawienia Design & Styling (Projekt i styl) pomagają stworzyć wizualnie spójny, profesjonalny pasek ogłoszeniowy, który wygląda jak naturalna część sklepu.

Przy odpowiednim stylu:

✅ Pasek jest zgodny z kolorami i typografią marki
✅ Ważne komunikaty stają się bardziej widoczne i czytelne
✅ Przyciski i CTA wyróżniają się, nie będąc natrętne
✅ Wzory tła i gradienty nadają wizualną osobowość
✅ Przejścia slajdów są płynne i dopracowane
✅ Doświadczenia na urządzeniach mobilnych i komputerach są optymalizowane niezależnie
✅ Zaawansowani użytkownicy mogą rozszerzyć styl o własny CSS

Skuteczne wykorzystanie tych opcji projektowania i stylizacji sprawia, że każdy pasek ogłoszeniowy wydaje się przemyślany, zgodny z marką i łatwy w interakcji dla klientów ✨

Aktualizowane na: 01/09/2026