Tworzenie podstawowego banera

Podstawowy baner to pasek zbudowany z content elements — nagłówków, komunikatów, przycisków, odliczań i obrazów — pogrupowanych w jedną lub kilka sekcji. Edytor ma dwie karty: Design (treść i styl) oraz Placement (gdzie i komu wyświetla się pasek).

1. Otwórz stronę Banners

   W panelu administracyjnym Shopify otwórz aplikację Sami Product Labels, kliknij Extra Features na pasku bocznym aplikacji, a następnie przejdź do karty Banners.

   

   Otwórz Banners z paska bocznego Sami Product Labels.

2. Kliknij Create banners, a następnie wybierz Basic

   Kliknij Create banners. W oknie Select Type kliknij Select obok Basic — typu, który obsługuje jedną lub wiele grup treści.

   

   Wybierz Basic, aby zbudować standardowy pasek z ogłoszeniem.

   Notatka

   Nie chcesz zaczynać od zera? Na stronie Banners użyj Featured templates lub View all templates, aby otworzyć gotowy baner i go edytować.

3. Nadaj nazwę banerowi

   Pełnoekranowy edytor otworzy się na karcie Design. W polu nazwy nad podglądem zastąp New Banner nazwą o długości do 50 znaków. Ta nazwa jest wewnętrzna — pozwala rozpoznać baner na liście i nigdy nie jest widoczna dla klientów.

   Obok nazwy znajdziesz też selektor języka, przełączniki podglądu na komputerze i telefonie oraz przełącznik statusu Active / Draft.

   

   Pasek narzędzi nad podglądem zawiera nazwę banera, język, urządzenie podglądu i status.

4. Zbuduj treść

   W sekcji Content element Section 1 zawiera listę elementów tworzących pasek. Kliknij dowolny element, aby edytować jego tekst i styl, przeciągnij uchwyt po lewej stronie, aby zmienić kolejność, lub użyj ikon po prawej stronie wiersza, aby go ukryć, zduplikować albo usunąć.

   Kliknij Add element, aby dodać nowy:

   Element	Co dodaje
   Message	Wiersz zwykłego tekstu.
   Heading	Duży nagłówek.
   Line break	Pionowy odstęp między elementami.
   Button	Przycisk wezwania do działania z własnym linkiem.
   Countdown	Licznik dni / godzin / minut / sekund.
   Image	Obraz lub logo.

   

   Dodawaj, porządkuj i edytuj elementy tworzące pasek.

5. (Opcjonalnie) Dodaj więcej grup treści

   Kliknij Add Group, aby utworzyć Section 2, Section 3 i kolejne. Każda sekcja to osobny komunikat, a baner wyświetla je kolejno — czas ustawisz w sekcji Animation w następnych krokach.

   Zostaw jedną sekcję, jeśli chcesz wyświetlać tylko jeden statyczny komunikat.

6. Nadaj styl paskowi

   W panelu Style:

   • Background Type — wybierz Single Color, Gradient Color lub Pattern Image, a następnie ustaw kolor lub obraz.
   • Font Style — ustaw krój pisma, rozmiar, grubość i kolor tekstu.
   • Padding — określ odstępy wewnątrz paska.

   

   Ustaw tło, czcionki i odstępy dla całego paska.

7. Dodaj przycisk zamykania lub spraw, aby pasek był klikalny

   Obie opcje znajdują się w panelu Button i domyślnie są wyłączone:

   • Zaznacz Include Close Button, aby umieścić na pasku „x”, którym klienci mogą go zamknąć. Pojawią się dwa pola: Color i Hover Color.
   • Zaznacz Bar Clickable, aby cały pasek działał jak link. Pojawi się pole Link URL — wpisz adres docelowy, a przełącznik obok niego pozwala otworzyć link w nowej karcie.

   

   Zaznaczenie każdego pola wyboru odsłania jego ustawienia — kolory przycisku zamykania lub adres URL linku.

8. Ustaw czasy animacji

   W panelu Animation wybierz przejście Horizontal lub Vertical, a następnie ustaw czasy w sekundach:

   Pole	Co kontroluje
   Disappear After	Jak długo pasek pozostaje na ekranie, zanim się ukryje.
   Interval Between Bar Display	Przerwa, po której pasek pojawia się ponownie.
   Time For The Bar To Fade In	Czas trwania animacji pojawiania się.
   Time Per Group	Jak długo każda sekcja jest widoczna, zanim zastąpi ją następna.

   Notatka

   Pozostaw w polu wartość 0, aby wyłączyć dane zachowanie — na przykład Disappear After = 0 sprawia, że pasek jest widoczny, dopóki klient go nie zamknie.

9. (Opcjonalnie) Dodaj własny kod CSS

   Otwórz Advance Section, aby wpisać własny kod CSS w polu Custom CSS (Developer Zone). Lista CSS reference pod nim pokazuje dostępne selektory — kliknij jeden, aby go wstawić.

10. Wybierz, gdzie wyświetla się baner

    Przejdź do karty Placement i wybierz pozycję wyświetlania:

    Pozycja	Zachowanie
    Top	Przesuwa treść strony w dół.
    Top Sticky	Przesuwa treść w dół i pozostaje widoczny podczas przewijania.
    Top Overlay	Nakłada się na górną część treści strony.
    Overlay Sticky	Nakłada się na treść i pozostaje widoczny podczas przewijania.
    Bottom Sticky	Przypięty na dole strony.
    Custom	Umieść pasek w dowolnym miejscu za pomocą shortcode’u.

    Pod wyborem pozycji możesz zawęzić odbiorców za pomocą Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions i Visibility date. Panel Shortcode podaje fragment kodu do wklejenia w motywie po wybraniu Custom.

    Pełny opis każdego typu warunku znajdziesz w artykule Konfigurowanie warunków wyświetlania.

    

    Wybierz pozycję wyświetlania, a następnie dodaj warunki, aby określić, kto zobaczy baner.

11. Zapisz i aktywuj

    Ustaw przełącznik statusu nad podglądem na Active, a następnie kliknij Save w prawym górnym rogu. Pozostaw Draft, aby kontynuować pracę bez publikowania.

    Uwaga

    Banery wyświetlają się w sklepie tylko wtedy, gdy osadzenie aplikacji jest włączone w motywie. Zobacz Włączanie aplikacji w motywie.

Kolejne kroki

• Konfigurowanie warunków wyświetlania — ustaw szczegółowe reguły kierowania dla swojego banera.
• Tworzenie banera z nieskończonym przewijaniem — wypróbuj zamiast tego przewijany pasek w stylu paska wiadomości.

Wskazówka

Potrzebujesz pomocy?

Jeśli napotkasz trudności podczas wykonywania tych kroków, napisz do nas na [email protected].