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

Czego się dowiesz

Dowiedz się, jak zainstalować Klaviyo Reviews z szablonem Shopify w stylu vintage lub architekturą headless. Proces ten polega na skopiowaniu kilku wycinków kodu źródłowego i wklejeniu ich do kodu Twojej strony. 

Jeśli korzystasz z szablonu Shopify 2.0, możesz zainstalować Klaviyo Reviews bez użycia kodu. Przejdź do naszego artykułu na temat Pierwsze kroki z Klaviyo Reviews, aby dowiedzieć się więcej. Jeśli korzystasz z WooCommerce, dowiedz się, jak zainstalować Klaviyo Reviews dla WooCommerce. 

Kilka słów na początek

Zanim wkleisz ten wycinek kodu źródłowego do kodu swojej strony, dodaj aplikację Klaviyo Reviews do swojego sklepu Shopify. W przypadku motywów vintage, włącz Klaviyo's onsite śledzenie. 

Instalacja z architekturą headless na Shopify

Aby zintegrować Klaviyo Reviews z bezgłowym sklepem Shopify, dodaj fragment śledzenia JavaScript Klaviyo, znany również jako Klaviyo.js, do wszystkich stron, na których chcesz dodać widżet recenzji (np. strony produktów). Być może już zainstalowałeś ten snippet, jeśli skonfigurowałeś Klaviyo's onsite śledzenie lub formularz rejestracyjny. 

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

Po dodaniu tego skryptu do witryny, skopiuj wycinek kodu źródłowego zgodnie z poniższymi krokami do kodu witryny.

Dodaj wycinek kodu źródłowego

Poniższy wycinek kodu źródłowego pozwala na wyświetlanie określonych widżetów recenzji w różnych obszarach Twojego sklepu. 

• Widżet oceny gwiazdkowej wyświetla aktualną ocenę gwiazdkową danego produktu i jest najczęściej instalowany pod nazwą twojego produktu. 
• Widżet podsumowania recenzji pokazuje wykres z podziałem na wszystkie oceny wybrane dla produktu, zdjęcia użytkowników przesłane wraz z recenzjami oraz najczęstsze opinie, jakie otrzymał produkt. Zazwyczaj jest on instalowany w dolnej części strony produktu. 
• Widżet recenzji produktu jest połączeniem widżetu podsumowania recenzji i widżetu listy recenzji. Jeśli dodasz widżet recenzji produktów do swojej witryny, nie musisz osobno dodawać listy recenzji i widżetu podsumowania recenzji.
• Widżet listy recenzji wyświetla listę wszystkich opublikowanych recenzji i pytań klientów, wraz z paskiem wyszukiwania, filtrami, przyciskiem Napisz recenzję i przyciskiem Zadaj pytanie. Zazwyczaj jest on instalowany bezpośrednio pod widżetem podsumowania recenzji. 
• Widżet karuzeli wyróżnionych recenzji wyświetla wyróżnione recenzje wszystkich Twoich produktów. Może to być umieszczone na stronie głównej, na osobnej stronie z recenzjami lub w dowolnym innym miejscu w Twojej witrynie. Możesz wybrać recenzje, które są prezentowane w tym widżecie. Jeśli jest to możliwe, do każdej recenzji dołączane są zdjęcia przesłane przez klientów; jeśli do recenzji nie dołączono żadnego zdjęcia, wykorzystywane są zdjęcia Twojego produktu. 
• Widżet SEO / Wszystkie recenzje wyświetla wszystkie Twoje recenzje wszystkich produktów na jednej stronie. Skorzystaj z tego widżetu, aby poprawić swoje SEO i zapewnić potencjalnemu klientowi jedno miejsce, w którym może zobaczyć, co lubią Twoi obecni klienci. Ten widżet jest najczęściej dodawany do samodzielnej strony z recenzjami w Twojej witrynie.

Widżet gwiazdkowy

Użyj widżetu z gwiazdkami, aby wyróżnić średnią ocenę produktu i liczbę otrzymanych recenzji.

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

1. Otwórz swój Shopify sklep administratora. 
2. W sekcji Kanał sprzedaży kliknij sklep internetowy. 
3. Kliknij menu z trzema kropkami obok bieżącego motywu > Duplikuj, aby utworzyć klonowanie bieżącego motywu. 
4. W menu z trzema kropkami kliknij Edytuj kod.
   
5. Wyszukaj "produkt" na pasku wyszukiwania plików i znajdź plik używany do zawartości strony produktu. Może to być product.liquid, product-szablon.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 nową linię pod tym kodem. 
8. W nowej linii 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 przycisk Zapisz. 
10. Kliknij przycisk Podgląd sklepu. 
11. Przejdź do strony produktu w podglądzie sklepu. Pod tytułem produktu powinieneś zobaczyć widżet z gwiazdką. 

Widżet recenzji produktów

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

Aby zainstalować ten widżet: 

1. Otwórz swój Shopify sklep administratora. 
2. W sekcji Kanał sprzedaży kliknij sklep internetowy. 
3. Kliknij przycisk Dostosuj obok bieżącego szablonu, aby go edytować, lub kliknij menu z trzema kropkami > Duplikuj, jeśli chcesz edytować wersję roboczą szablonu zamiast szablonu aktywnego. 
4. W menu z trzema kropkami kliknij Edytuj kod.
   
5. Wyszukaj "produkt" na pasku wyszukiwania plików i znajdź plik używany do zawartości strony produktu. Może to być product.liquid, product-szablon.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 tam, gdzie chcesz, aby pojawiło się podsumowanie recenzji i widżet listy). 
7. Dodaj nową linię, a następnie wklej ten wycinek kodu źródłowego:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}" ></div>
   
8. Kliknij przycisk Zapisz. 
9. Kliknij przycisk Podgląd sklepu. 
10. Przejdź do strony produktu w podglądzie sklepu, aby znaleźć produkt z recenzjami. Powinieneś zobaczyć podsumowanie recenzji i widżet widoku listy u dołu strony.

Oddzielne podsumowanie recenzji i widżet listy recenzji

Jeśli wolisz zainstalować podsumowanie recenzji i widżet listy recenzji osobno (zamiast razem, jak opisano w sekcji powyżej), użyj następującego wycinka kodu źródłowego: 

Podsumowanie recenzji widżet

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

Przejrzyj listę widżetów

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

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

Karuzela z polecanymi recenzjami wyświetla ręcznie wybrane recenzje na dowolnej wybranej przez Ciebie stronie (np. na stronie głównej). 

Aby dodać karuzelę wyświetlającą wszystkie polecane recenzje, musisz najpierw wybrać recenzje do funkcji. 

1. W głównej nawigacji Klaviyo wybierz opcję Recenzje. 
2. Kliknij Wszystkie recenzje.
3. Kliknij przycisk Funkcje obok recenzji, którą chcesz opublikować.
   

Po wybraniu kilku recenzji, które mają funkcjonować w Twojej witrynie, możesz zainstalować widżet karuzeli recenzji na dowolnej stronie. Przejdź do strony, na której chcesz wyświetlić karuzelę, a następnie wklej poniższy fragment w kodzie tej strony: 

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

SEO / Wszystkie recenzje widżet (opcjonalnie)

Widżet SEO / Wszystkie recenzje wyświetla wszystkie opublikowane recenzje każdego produktu. Dodaj to do samodzielnej strony z recenzjami lub do strony z informacjami.

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

Rezultat

Po zainstalowaniu widżetów opisanych w tym artykule i uruchomieniu nowego motywu, Twoje recenzje pojawią się na stronach produktów (a także na wszystkich innych stronach w Twojej witrynie, na których je zainstalowałeś). 

Dodatkowe źródła

• Jak tworzyć niestandardowe pytania przeglądowe
• Klaviyo Reviews dane referencyjne