Jak dodać link do Ulubionych (ikonę, tekst lub przycisk) do nagłówka Shopify

Dowiedz się, jak dodać link do Ulubionych do paska nawigacji Shopify (nagłówek), aby kupujący mogli otworzyć zapisane produkty bezpośrednio w Klaviyo Customer Hub.

Możesz wdrożyć to jako ikonę (np. serce), prosty link tekstowy (np. „Ulubione”) lub przycisk. Ten przewodnik opisuje, jak wstawić niezbędny kod do nagłówka Twojej witryny za pomocą kodu Liquid Shopify.

Ten link w nagłówku otwiera zapisane ulubione. Aby umożliwić kupującym zapisywanie produktów na stronach szczegółów produktu lub na stronach kolekcji, postępuj zgodnie z instrukcją Jak wyświetlać przyciski ulubionych na swojej stronie i w Klaviyo Customer Hub.

Uwaga Ten proces obejmuje edycję kodu motywu Shopify. Jeśli nie czujesz się komfortowo podczas pisania kodu lub nie masz w zespole dewelopera, zalecamy skontaktowanie się z partnerem Klaviyo, aby uzyskać pomoc. Dział wsparcia Klaviyo nie może rozwiązywać problemów związanych z niestandardowymi implementacjami kodu.

Kilka słów na początek

Zanim dodasz ten link, skonfiguruj Klaviyo Customer Hub w swoim sklepie Shopify i włącz Ulubione w Klaviyo. Upewnij się, że osadzanie aplikacji Klaviyo jest włączone w motywie Shopify, który będziesz edytować.

Zdecydowanie zalecamy zduplikowanie aktywnego motywu przed wprowadzeniem zmian. Dzięki temu możesz przetestować nowy link bez wpływu na działanie Twojego sklepu na żywo.

1. W Shopify przejdź do sekcji Sklep internetowy > Motywy.
2. Kliknij menu z trzema kropkami (...) obok Twojego aktywnego motywu.
3. Wybierz Duplikuj.

Krok 1: przygotuj zasoby (jeśli chcesz użyć ikony)

W przypadku opcji ikony poniżej użyj pliku SVG mniejszego niż 15 KB. Pliki SVG skalują się do dowolnego rozmiaru ekranu bez utraty jakości i mogą dziedziczyć kolory Twojego motywu. Jeśli wolisz link tekstowy lub przycisk, przejdź do kroku 2.

1. Musisz znaleźć ikonę, której chcesz użyć. Może to być dowolna ikona, ale zalecamy użycie pliku SVG, aby uniknąć pikselizacji. Standardową wersję (na licencji MIT) możesz pobrać tutaj: Heroicons heart.svg. Zapisz plik jako icon-heart.svg, aby nazwa pasowała do poniższego kodu ikony.
2. W panelu administratora Shopify przejdź do sekcji Sklep internetowy > Motywy.
3. Znajdź zduplikowany motyw i kliknij menu z trzema kropkami (...) > Edytuj kod.
4. Na lewym pasku bocznym kliknij prawym przyciskiem myszy folder assets i wybierz Upload..., aby otworzyć selektor plików.
5. Wybierz plik SVG i kliknij Otwórz.

Krok 2: wstaw link do nagłówka (górny pasek nawigacji)

Następnie dodaj wycinek kodu źródłowego dla ikony, linku tekstowego lub przycisku. Każda opcja otwiera funkcję Ulubione w Klaviyo Customer Hub.

1. Jeśli pominąłeś krok 1, otwórz edytor kodu w Shopify: przejdź do Sklep online > Szablony. Obok zduplikowanego szablonu kliknij menu z trzema kropkami (...) > Edytuj kod. W edytorze kodu zduplikowanego szablonu znajdź plik, który kontroluje nagłówek.
   • Motywy Online Store 2.0 (np. Dawn): Wyszukaj sections/header.liquid.
   • Motywy vintage: Wyszukaj snippets/header-icons.liquid lub header-bar.liquid.
2. Znajdź miejsce wstawienia: naciśnij Ctrl+F (lub Cmd+F na Macu) i wyszukaj słowo cart lub account. Wklej nowy kod wewnątrz tego samego kontenera (zwykle <div> lub <ul>), który zawiera te istniejące ikony.
3. Wklej 1 z poniższych opcji kodu w miejscu, w którym ma się pojawić link (np. tuż przed ikoną koszyka).

Opcja A: link do ikony

Użyj tego kodu, jeśli ukończyłeś(-aś) krok 1 i chcesz wyświetlić ikonę serca, zakładając, że w naszym przykładzie ma nazwę icon-heart.svg:

<a href="#k-hub/favorites"
   id="favorites-icon-bubble"
   aria-label="Open Favorites"
   title="Favorites"
   style="display:flex;align-items:center;justify-content:center;height:4.4rem;width:4.4rem;">
  <span style="height:20px;width:20px">
    {{ 'icon-heart.svg' | inline_asset_content }}
  </span>
</a>

Opcja B: link tekstowy lub przycisk

Użyj tego kodu, jeśli wolisz link tekstowy lub przycisk. Nie musisz wgrywać do tego żadnych zasobów.

W przypadku prostego linku tekstowego:

<a href="#k-hub/favorites" class="header__menu-item header__menu-item--list" style="text-decoration: none;">
  Favorites
</a>

W przypadku przycisku:

<a href="#k-hub/favorites" class="button button--primary">
  Favorites
</a>

1. Kliknij Zapisz.

Wskazówka: dopasowanie do stylu Twojego motywu Jeśli Twój motyw używa konkretnej klasy CSS dla ikon w nagłówku (np. header__icon lub icon-link), możesz zastąpić atrybut style= w kodzie powyżej tą klasą (np. class="header__icon"). Podejrzyj wynik, aby sprawdzić, czy odstępy i efekty najechania pasują do Twoich pozostałych linków w nagłówku.

Krok 3: Przetestuj i opublikuj zmiany

Po zapisaniu kodu wyświetl podgląd edytowanego motywu i przetestuj link przed jego opublikowaniem.

1. W Shopify przejdź do sekcji Sklep internetowy > Motywy. Obok zduplikowanego motywu, który edytowałeś(-aś), kliknij menu trzech kropek (...) > Podgląd.
2. Sprawdź nagłówek w wersji na komputery i urządzenia mobilne. Powinieneś/powinnaś widzieć ikonę, link tekstowy lub przycisk, który/którą dodałeś/dodałaś. Kliknij go i potwierdź, że otwiera zapisane przez Ciebie ulubione w Klaviyo Customer Hub.
3. Gdy będziesz gotowy(-a), aby wszystkie zmiany w zduplikowanym motywie były widoczne dla klientów, wróć do Sklep online > Motywy. W sekcji Wersje robocze motywów znajdź edytowany duplikat i kliknij Opublikuj.
4. Otwórz swój sklep na żywo i przetestuj ponownie link Ulubione.

Rozwiązywanie problemów

Jeśli link się nie pojawia, wygląda nieprawidłowo lub nie otwiera Klaviyo Customer Hub:

• Ikona się nie wyświetla: Sprawdź, czy plik znajduje się w folderze assets, jest plikiem SVG mniejszym niż 15 KB i ma nazwę dokładnie icon-heart.svg, aby pasowała do wycinka kodu źródłowego. Nazwa pliku uwzględnia wielkość liter.
• Ikona jest nieprawidłowo wyrównana: Może być konieczne dostosowanie wartości height i width w atrybucie style w wycinku kodu źródłowego, aby pasowały do wysokości paska nawigacji w Twoim motywie.
• Zmiany się nie wyświetlają: Upewnij się, że podglądasz motyw, który(-a) edytujesz. Otwórz ponownie jego Podgląd w Shopify. Zapisanie zduplikowanego motywu nie aktualizuje Twojego sklepu na żywo; opublikuj go po przetestowaniu.
• Link nie otwiera Klaviyo Customer Hub: Potwierdź, że Klaviyo Customer Hub jest skonfigurowany i że osadzenie aplikacji Klaviyo jest włączone w motywie, który przeglądasz. Sprawdź, czy link nadal korzysta z #k-hub/favorites.