Tworzenie bloku highlight

Blok highlight to siatka elementów z cechami — każdy z obrazem, tytułem i opisem — które umieszczasz na stronach produktów, aby pokazać korzyści i atuty. Edytor ma dwie karty: Design (treść i styl) oraz Placement (gdzie i komu się wyświetla).

1. Otwórz kartę Highlights

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

   

   Karta Highlights zawiera listę wszystkich utworzonych bloków highlight.

2. Kliknij Create highlights

   Kliknij Create highlights. Pełnoekranowy edytor otworzy się na karcie Design.

   Notatka

   Przewiń do Featured templates i kliknij View all templates, aby zacząć od gotowego bloku, takiego jak Free Delivery, zamiast tworzyć go od zera.

   

   Utwórz blok highlight od zera lub zacznij od polecanego szablonu.

3. Nadaj nazwę blokowi

   Pole nazwy znajduje się nad podglądem. Zastąp New Highlight nazwą o długości do 50 znaków. Ta nazwa jest wewnętrzna — pozwala rozpoznać blok na liście i nie jest widoczna dla klientów.

4. Dodaj nagłówek i opis

   W sekcji Content & Badges wypełnij Title i Description — to nagłówek i tekst wstępny dla całego bloku, na przykład „Why Choose Us”. Oba pola to edytory tekstu sformatowanego z opcjami pogrubienia, kursywy, podkreślenia, emoji, wyrównania i widoku HTML (</>), a ich zawartość jest zależna od języka, dlatego etykieta pokazuje aktywny język, na przykład Title (en).

   Oba pola są opcjonalne; zostaw je puste, aby wyświetlać same elementy.

   

   Nagłówek i opis bloku to pola tekstu sformatowanego, edytowane osobno dla każdego języka.

5. Dodaj elementy highlight

   W sekcji Badges kliknij Add highlight, a następnie wybierz:

   Opcja	Co robi
   Select badge image	Otwiera selektor obrazów, aby dodać jeden lub więcej elementów.
   Line break	Wstawia przerwę, dzięki której kolejne elementy zaczynają się w nowym wierszu.

   W selektorze Library zawiera ponad 1 800 obrazów. Wyszukaj po nazwie lub zawęź listę filtrami Images, Free Labels, All colors i Latest (Clear je resetuje). Kliknij wybrane obrazy, a następnie kliknij Select Image. Możesz też przełączyć źródło na Design your Images, aby użyć własnych, lub kliknąć Edit with AI, aby zmodyfikować wybrany obraz.

   

   Filtruj lub przeszukuj bibliotekę, a następnie wybierz obrazy dla elementów highlight.

6. Napisz tytuł i opis każdego elementu

   Każdy element jest wyświetlany jako wiersz na liście Badges. Kliknij ikonę koła zębatego w wierszu, aby otworzyć jego panel, w którym możesz ustawić:

   • Image — kliknij Change, aby zamienić go na inny.
   • Title — krótki nagłówek danej cechy, osobno dla każdego języka.
   • Description — do 250 znaków, osobno dla każdego języka.

   Użyj Delete w panelu, aby usunąć element, i przeciągnij wiersz za uchwyt, aby zmienić kolejność w siatce.

   

   Każdy element ma własny obraz, tytuł i opis.

7. Ustaw siatkę i styl bloku

   Otwórz Design Main Section, aby kontrolować cały blok:

   Ustawienie	Co robi
   Alignment	Do lewej, do środka lub do prawej.
   Column	Ile elementów jest w jednym wierszu.
   Width	Szerokość bloku w % lub px.
   Background Heading Color	Tło za nagłówkiem i opisem.
   Background Color	Tło obszaru elementów.
   Margin / Padding	Odstępy na zewnątrz i wewnątrz bloku.
   Border & corners	Styl i kolor obramowania oraz promień zaokrąglenia rogów.

   

   Design Main Section kontroluje siatkę i kontener bloku.

8. Nadaj styl elementom highlight

   Otwórz Design Badge, aby nadać styl samym elementom:

   Ustawienie	Co robi
   Alignment	Sposób wyrównania treści każdego elementu.
   Style	Cztery style obrazu: monochromatyczny, monochromatyczny na karcie, w oryginalnych kolorach i w oryginalnych kolorach na karcie.
   Background Color	Tło każdego elementu.
   Size	Width i Height obrazu w px lub % (domyślnie 50 px).
   Positions	Położenie obrazu względem tekstu, na przykład Image Position Top.
   Margin / Padding / Border & corners	Odstępy i obramowanie każdego elementu.
   Title / Description	Czcionka, kolor, rozmiar i interlinia tekstu elementu.

   

   Design Badge określa styl poszczególnych elementów highlight.

9. Nadaj styl nagłówkowi bloku (opcjonalnie)

   Otwórz Design title & description. Design Title i Design Description mają własną czcionkę, kolor, rozmiar i interlinię dla nagłówka i tekstu wstępnego całego bloku.

10. Ustaw rozmiary responsywne i własny kod CSS (opcjonalnie)

    • Responsive size — zastąp rozmiary na tablecie i telefonie.
    • Advance Section — dodaj Custom CSS (Developer Zone). Lista CSS reference pod edytorem zawiera selektory, które możesz wskazać, na przykład .samita_highlight_container; kliknij jeden, aby go wstawić.

    

    Lista CSS reference zawiera selektory dostępne do własnej stylizacji.

11. Wybierz, gdzie wyświetla się blok highlight

    Przejdź do karty Placement:

    • Product page — włącz, aby wyświetlać blok we wbudowanej pozycji aplikacji na każdej stronie produktu.
    • Shortcode — skopiuj fragment kodu i wklej go w motywie, aby umieścić blok w dokładnie wybranym miejscu.
    • Conditions — warunki Product, Customer, Page, Language i Country zawężają, komu i gdzie blok się wyświetla.

    Notatka

    Zobacz Kierowanie wyświetlania bloku highlight, aby dowiedzieć się, jak działają zestawy warunków.

    

    Karta Placement łączy warunki wyświetlania, przełącznik strony produktu i shortcode.

12. Podgląd i zapis

    Nad podglądem możesz zmienić język, wybrać stronę do podglądu, przełączać widok komputer / telefon i ukryć przykładowy produkt ikoną oka. Ustaw blok jako Active lub Draft, a następnie kliknij Save w prawym górnym rogu. Użyj Discard, aby odrzucić niezapisane zmiany.

Notatka

Plan FREE obejmuje 2 bloki highlight, a usunięte nadal wliczają się do tego limitu. Przejdź na plan GOLD lub DIAMOND, aby korzystać z nieograniczonej liczby bloków highlight.

Kolejne kroki

• Umieszczanie bloku highlight za pomocą shortcode’u — umieść blok w wybranym miejscu motywu.
• Kierowanie wyświetlania bloku highlight — określ, na jakich stronach i dla jakich klientów wyświetlają się bloki highlight.
• Przegląd bloków highlight — czym są bloki highlight i kiedy ich używać.
• Tworzenie plakietki zaufania — dodaj ikony płatności i bezpieczeństwa na strony produktów.

Wskazówka

Potrzebujesz pomocy?

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