Jak zainstalować Klaviyo Reviews w Shopify (motywy vintage i headless)

Czego się dowiesz?

Dowiedz się, jak zainstalować Klaviyo Reviews w przypadku klasycznego motywu Shopify lub architektury headless. Ten proces obejmuje skopiowanie kilku wycinków kodu źródłowego i wklejenie ich do kodu Twojej witryny.

Jeśli używasz motywu Shopify 2.0, możesz zainstalować Klaviyo Reviews bez użycia kodu. Więcej na ten temat dowiesz się z naszego artykułu o Pierwszych krokach z Klaviyo Reviews. Jeśli używasz WooCommerce, dowiedz się, jak zainstalować Klaviyo Reviews dla WooCommerce.

Kilka słów na początek

Zanim wkleisz te wycinki kodu źródłowego do kodu witryny, dodaj aplikację Klaviyo Reviews do swojego sklepu Shopify. W przypadku motywów vintage włącz śledzenie na stronie Klaviyo.

Instalacja z architekturą bezgłową w Shopify

Aby zintegrować Klaviyo Reviews ze sklepem headless na Shopify, dodaj fragment kodu śledzenia JavaScript od Klaviyo, znany też jako Klaviyo.js, do wszystkich stron, na których chcesz dodać widżety opinii (np. stron produktów). Ten fragment kodu może być już zainstalowany, jeśli skonfigurowano śledzenie na stronie Klaviyo lub formularze rejestracyjne.

Dowiedz się, jak zainstalować Klaviyo.js dla sklepów Shopify.

Po dodaniu tego skryptu do witryny przejdź dalej, kopiując wycinki kodu źródłowego w poniższych krokach do kodu witryny.

Dodaj wycinki kodu źródłowego

Poniższe wycinki kodu źródłowego umożliwiają wyświetlanie niektórych widżetów recenzji w różnych obszarach sklepu.

• Widżet oceny w gwiazdkach wyświetla aktualną ocenę w gwiazdkach dla danego produktu i najczęściej jest instalowany pod nazwą produktu.
• Widżet podsumowania opinii wyświetla wykres z podziałem wszystkich ocen wybranych dla produktu, zdjęć użytkowników przesłanych wraz z opiniami oraz najczęstszych informacji zwrotnych, jakie otrzymał produkt. Zwykle jest instalowany w pobliżu dołu strony produktu.
• Widżet opinii o produkcie to połączenie widżetu podsumowania opinii i widżetu listy opinii. Jeśli dodasz do swojej witryny widżet recenzji produktów, nie musisz osobno dodawać widżetów listy recenzji i podsumowania recenzji.
• Widżet listy recenzji wyświetla listę wszystkich opublikowanych recenzji i pytań klientów, a także pasek wyszukiwania, filtry, przycisk Napisz recenzję oraz przycisk Zadaj pytanie. Zwykle jest instalowany bezpośrednio poniżej widżetu podsumowania recenzji.
• Widżet karuzeli wyróżnionych opinii wyświetla wyróżnione opinie ze wszystkich Twoich produktów. Może być wyróżniony na stronie głównej, na osobnej stronie z recenzjami lub w dowolnym innym miejscu w witrynie. Możesz wybrać recenzje, które są wyróżnione w tym widżecie. Jeśli są dostępne, przesłane przez klienta obrazy towarzyszą każdej recenzji; jeśli wraz z recenzją nie przesłano żadnego obrazu, używane są obrazy produktu.
• Widżet SEO / Wszystkie opinie wyświetla wszystkie opinie o wszystkich produktach na jednej stronie. Użyj tego widżetu, aby poprawić SEO i zapewnić jedno miejsce, w którym potencjalni klienci zobaczą, co podoba się Twoim obecnym klientom. Ten widżet jest najczęściej dodawany do osobnej strony Opinie w Twojej witrynie.

Widżet ocen gwiazdkowych

Użyj widżetu oceny gwiazdkowej, aby wyraźnie wyeksponować średnią ocenę produktu i liczbę otrzymanych recenzji.

Aby zainstalować ten widżet pod tytułem produktu:

1. Otwórz panel administracyjny sklepu Shopify.
2. W sekcji Kanały sprzedaży kliknij Sklep online.
3. Kliknij menu z trzema kropkami obok bieżącego motywu > Duplikuj, aby utworzyć klon bieżącego motywu.
4. Z menu trzech kropek kliknij Edytuj kod.
   

5. Wpisz „product” w pasku wyszukiwania plików i znajdź plik używany do treści strony produktu. Może to być product.liquid, product-template.liquid, lub coś podobnego. (Jeśli używasz niestandardowego szablonu strony produktu, wybierz go zamiast tego.)
   

6. Wybierz plik, a następnie wyszukaj {{ product.title }}, aby znaleźć kod wyświetlający tytuł produktu.
   

7. Dodaj nowy wiersz pod tym kodem.
8. W nowym wierszu wklej ten wycinek kodu źródłowego:
   <div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}"      data-product-type="{{product.type}}"></div>
   

9. Kliknij Zapisz.
10. Kliknij Podgląd sklepu.
11. Przejdź do strony produktu w podglądzie sklepu. Pod tytułem produktu powinien być widoczny widżet z gwiazdkami.

Widżet recenzji produktów

Użyj widżetu podsumowania recenzji i listy recenzji (lub po prostu widżetu recenzji produktu), aby dodać podsumowanie i listę wszystkich opublikowanych recenzji dla każdego produktu w witrynie.

Aby zainstalować ten widżet:

1. Otwórz panel administracyjny sklepu Shopify.
2. W sekcji Kanały sprzedaży kliknij Sklep online.
3. Kliknij Dostosuj obok bieżącego motywu, aby go edytować, lub kliknij menu z trzema kropkami > Duplikuj, jeśli chcesz edytować wersję roboczą motywu zamiast aktywnej wersji.
4. Z menu trzech kropek kliknij Edytuj kod.
   

5. Wpisz „product” w pasku wyszukiwania plików i znajdź plik używany do treści strony produktu. Może to być product.liquid, product-template.liquid, lub coś podobnego. (Jeśli używasz niestandardowego szablonu strony produktu, wybierz go zamiast tego.)
   

6. Wybierz plik, a następnie przejdź na sam dół (lub w miejsce, w którym ma się pojawić podsumowanie recenzji i widżet listy).
7. Dodaj nowy wiersz, a następnie wklej ten wycinek kodu źródłowego:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   

8. Kliknij Zapisz.
9. Kliknij Podgląd sklepu.
10. Przejdź do strony produktu w podglądzie sklepu dla produktu, który ma recenzje. W pobliżu dołu strony powinien być widoczny widżet z podsumowaniem recenzji i widokiem listy.

Oddzielne widżety podsumowania recenzji i listy recenzji

Jeśli wolisz zainstalować widżet podsumowania opinii i widżet listy opinii osobno (zamiast razem, zgodnie z opisem w sekcji powyżej), użyj poniższych wycinków kodu źródłowego:

Widżet podsumowania recenzji

<div id="klaviyo-reviews-summary" data-id="{{product.id}}"></div>

Widżet listy recenzji

<div id="klaviyo-reviews-list" data-id="{{product.id}}"></div>

Widżet karuzeli wyróżnionych recenzji (opcjonalnie)

Karuzela wyróżnionych opinii wyświetla ręcznie wybrane opinie na dowolnej stronie, którą wybierzesz (np. na stronie głównej).

Aby dodać karuzelę wyświetlającą wszystkie wyróżnione recenzje, musisz najpierw wybrać recenzje do wyróżnienia.

1. W głównym menu nawigacyjnym Klaviyo wybierz Recenzje.
2. Kliknij Wszystkie recenzje.
3. Obok recenzji, którą chcesz wyróżnić, kliknij Funkcje.
   

Gdy wybierzesz kilka opinii do wyróżnienia w witrynie, możesz zainstalować widżet karuzeli opinii na dowolnej stronie. Przejdź do strony, na której ma się pojawić karuzela, a następnie wklej poniższy fragment w kodzie tej strony:

<div id="klaviyo-featured-reviews-carousel"></div>

SEO / Widżet Wszystkie recenzje (opcjonalnie)

Widżet SEO / Wszystkie opinie wyświetla wszystkie opublikowane opinie dla każdego produktu. Dodaj to do osobnej strony Opinie lub do strony O nas.

<div id="klaviyo-reviews-all" data-id="all"></div>

Rezultat

Gdy zainstalujesz widżety opisane w tym artykule i uruchomisz nowy motyw, Twoje opinie będą wyświetlane na stronach produktów (a także na innych stronach w Twojej witrynie, na których je zainstalowano).