Tworzenie banera z nieskończonym przewijaniem

Baner z nieskończonym przewijaniem to pasek, którego treść przewija się w pętli od prawej do lewej, jak pasek z wiadomościami. Użyj go do powtarzających się promocji, informacji o darmowej wysyłce lub krótkich ogłoszeń, które mają przyciągnąć uwagę klientów.

Notatka

Baner z nieskończonym przewijaniem ma jedną sekcję treści — nie ma opcji Add Group. Jeśli potrzebujesz kilku komunikatów wyświetlanych jeden po drugim, użyj zamiast tego podstawowego banera.

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 Infinite Scroll

   Kliknij Create banners. W oknie Select Type kliknij Select obok Infinite Scroll — typu, który zapętla treść banera w nieskończoność, dając płynny efekt przewijania.

   

   Wybierz Infinite Scroll, aby zbudować pasek w stylu paska wiadomości.

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 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. Edytuj przewijaną treść

   Section 1 zawiera na początku jeden element Description z przykładowym tekstem, takim jak ✨ Free ship on order $40+ ✨. Kliknij go, aby otworzyć jego ustawienia po prawej stronie:

   • Content — edytor tekstu sformatowanego z opcjami pogrubienia, kursywy, podkreślenia, emoji, wyrównania i widoku HTML (</>). Znacznik języka pokazuje, w którym języku edytujesz treść.
   • Text — Size i Color czcionki.
   • Padding i Margin — odstępy wokół elementu w pikselach.

   Kliknij Add element, aby dodać do pętli kolejne elementy — Message, Heading, Line break, Button, Countdown lub Image — i przeciągnij uchwyt po lewej stronie wiersza, aby zmienić ich kolejność.

   

   Edytuj element, który przewija się po pasku, lub dodaj kolejne do sekwencji.

5. Nadaj styl paskowi

   W panelu Style:

   • Background Type — wybierz Single Color, Gradient Color lub Pattern Image. Banery z nieskończonym przewijaniem domyślnie używają Pattern Image; użyj Change Image, aby zmienić kafelek, lub Remove, aby go usunąć.
   • Font Style — ustaw krój pisma, grubość i domyślny kolor tekstu.
   • Padding — określ odstępy wewnątrz paska.

   Notatka

   Obrazy wzoru powinny mieć format PNG, JPG lub SVG, rozmiar do 5 MB i wymiary 512 × 512 px.

6. 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.

7. Ustaw szybkość przewijania i czasy

   Wszystkie cztery pola w panelu Animation są podawane w sekundach:

   Pole	Co kontroluje
   Scroll speed	Jak długo trwa jedna pełna pętla. Wyższa liczba oznacza wolniejsze przewijanie.
   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ę.

   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.

   

   Scroll speed określa czas trwania jednej pętli — zwiększ go, aby spowolnić przewijanie.

8. (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 — w tym .samita_banner_groups.infinityScroll, czyli element opakowujący używany po włączeniu nieskończonego przewijania. Kliknij selektor, aby go wstawić.

9. 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.

10. 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 — określ, gdzie i komu wyświetla się baner.
• Tworzenie podstawowego banera — zbuduj zamiast tego statyczny lub rotujący pasek z ogłoszeniem.

Wskazówka

Potrzebujesz pomocy?

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