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

Dodanie konkretnej ikony "Ulubione" do paska nawigacyjnego Twojej witryny ("nagłówek") zwiększa zaangażowanie, zmniejszając tarcie dla klientów, aby znaleźć swoje ulubione w Klaviyo Customer Hub. Dając kupującym dedykowany punkt startowy dla zapisanych przedmiotów, zachęcasz ich do budowania większych koszyków i częstszych powrotów do Twojego sklepu.

Możesz to zaimplementować jako ikonę (np. serce), prosty link tekstowy (np. "Ulubione") lub przycisk. W tym przewodniku opisano, jak wstawić niezbędny kod do nagłówka witryny przy użyciu kodu Liquid Shopify.

W tym przewodniku opisano, jak przesłać ikonę serca do zasobów szablonu i wstawić link do kodu w nagłówku witryny za pomocą kodu Liquid Shopify.

Zauważ, że proces ten wymaga edycji kodu szablonu Shopify. Jeśli nie czujesz się komfortowo pisząc kod lub nie masz programisty w swoim zespole, zalecamy skontaktowanie się z partneremKlaviyo w celu uzyskania pomocy. Wsparcie Klaviyo nie jest w stanie rozwiązywać problemów związanych z implementacją niestandardowego kodu.

Kilka słów na początek

Zdecydowanie zalecamy zduplikowanie motywu na żywo przed wprowadzeniem zmian. Pozwoli Ci to przetestować nową ikonę w bezpiecznym środowisku bez wpływu na Twój działający sklep.

1. W Shopify przejdź do Sklepu internetowego > Szablony.

2. Kliknij menu z trzema kropkami (...) obok motywu Live.

3. Wybierz opcję Duplikuj.

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

Najpierw prześlij plik z ikoną, która będzie służyć jako przycisk. Korzystanie z pliku SVG jest najlepsze, ponieważ skaluje się on do dowolnego rozmiaru ekranu bez utraty jakości i może dziedziczyć kolory Twojego motywu.

1. Musisz znaleźć ikonę, której chcesz użyć. Może to być dowolna ikona, ale zalecamy użycie SVG, aby uniknąć pikselizacji. Możesz pobrać standardową wersję (na licencji MIT) tutaj: Heroicons heart.svg.

2. W panelu administracyjnym Shopify przejdź do strony Sklep online > Szablony.

3. Znajdź swój motyw i kliknij menu z trzema kropkami (...) > Edytuj kod.

4. Na lewym pasku bocznym przewiń w dół do folderu Zasoby i kliknij przycisk Dodaj nowy zasób.

5. Prześlij plik z ikoną.

Krok 2: Wstaw link nagłówka (górny pasek nawigacyjny)

Następnie dodaj wycinek kodu źródłowego, który wyświetla ikonę i łączy ją z Klaviyo Customer Hub.

1. W edytorze kodu motywu znajdź plik kontrolujący nagłówek.

   • Motywy sklepu internetowego 2.0 (np. Dawn): Wyszukaj sekcje/header.liquid.

   • Motywy vintage: Wyszukaj snippets/header-icons.liquid lub header-bar.liquid.

2. Znajdź punkt wstawiania: Naciśnij klawisze Ctrl+F (lub Cmd+F na komputerze Mac) i wyszukaj słowo cart lub konto. Chcesz wkleić nowy kod wewnątrz tego samego kontenera (zwykle <div> lub <ul>), który zawiera istniejące ikony.

3. Wklej jedną z opcji kodu poniżej miejsca, w którym ma pojawić się link (np. tuż przed ikoną koszyka).

<a href="#k-hub/favorites"
 id="favorites-icon-bubble"
 aria-label="Otwórz Ulubione"
 title="Ulubione"
 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>

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

<a href="#k-hub/ulubione" class="button button--primary"> 
 Ulubione
</a>

Wskazówka: Dopasowanie stylu motywu Jeśli twój motyw używa określonej klasy CSS dla ikon nagłówka (np. ikona nagłówka__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__" ). Dzięki temu odstępy i efekty najechania kursorem będą idealnie pasować do pozostałych przycisków.

Rezultat

Po zapisaniu otwórz swój sklep w nowym oknie incognito/prywatnym, aby ominąć buforowanie przeglądarki. Powinieneś zobaczyć ikonę serca na pasku nawigacyjnym. Kliknięcie tej ikony otworzy teraz zakładkę Ulubione w Klaviyo Customer Hub.

Rozwiązywanie problemów

Jeśli ikona nie pojawia się lub wygląda nieprawidłowo:

• Ikona jest uszkodzonym obrazem: Upewnij się, że przesłałeś plik do folderu Assets i nazwałeś go dokładnie icon-heart.svg. W nazwach plików rozróżniana jest wielkość liter.

• Ikona jest źle wyrównana: Może być konieczne dostosowanie wartości wysokości i szerokości w atrybucie stylu wycinka kodu źródłowego, aby dopasować go do wysokości paska nawigacyjnego motywu.

• Zmiany nie są wyświetlane: Pamięć podręczna motywów Shopify agresywnie. Spróbuj wyświetlić podgląd motywu w oknie incognito lub dołączając ?preview_theme_id= do adresu URL, jeśli pracujesz nad wersją roboczą motywu.