Zaawansowane dostosowania wyświetlania produktów i kolekcji dla wtyczki Shopify

Te zaawansowane ustawienia pomagają dostosować witrynę sklepu w systemie WordPress, spersonalizować markę firmy i ulepszyć proces zakupowy klientów.

Wtyczka Shopify i komponenty witryny sklepu Shopify

Wtyczka Shopify jest zbudowana z komponentów Shopify Storefront Web Components. Następujące komponenty są używane jako elementy składowe witryny sklepu Shopify:

• Komponent karty produktu: Ten komponent wyświetla informacje o poszczególnych produktach, zazwyczaj na stronach z ofertami produktów lub na stronach kolekcji. Często zawiera takie elementy, jak obraz produktu, tytuł, cena i przycisk Dodaj do koszyka.
• Komponent modalny szybkiego podglądu produktu: Ten komponent wyświetla okno modalne nad istniejącą treścią ze szczegółami produktu, przyciskiem Dodaj do koszyka i linkiem do wyświetlenia pełnych szczegółów produktu.
• Komponent strony szczegółów produktu: Ten komponent wyświetla pojedynczy produkt z pełnymi szczegółami produktu. Każdy komponent strony szczegółów produktu ma unikalny adres URL.
• Komponent kolekcji: Ten komponent wyświetla kolekcje produktów, które utworzyłeś(-aś).

Dostosowanie wyświetlania produktów i kolekcji Shopify

Domyślne komponenty witryny sklepu Shopify we wtyczce zawierają narzędzia ułatwiające stworzenie bezproblemowego procesu zakupowego. Masz również możliwość dostosowania wyświetlania tych komponentów, aby dopasować je do określonej tożsamości marki i wymagań projektowych.

Aby przeprowadzić takie dostosowania, musisz mieć dostęp do modyfikacji plików i katalogów szablonu WordPress. Proces ten polega na utworzeniu dedykowanego folderu w katalogu aktywnego szablonu WordPress.

Kroki:

1. Utwórz folder Shopify: Zacznij od utworzenia nowego folderu o nazwie Shopify bezpośrednio w katalogu aktywnego szablonu. Folder ten służy jako centralna lokalizacja dla niestandardowych nadpisań komponentów.
2. Nadpisywanie poszczególnych komponentów: Aby zmodyfikować określony komponent, dodaj plik PHP o wyznaczonej nazwie w nowo utworzonym Shopify folderze. Konwencja nazewnictwa tych plików nadpisań ma kluczowe znaczenie dla wtyczki, aby mogła ona rozpoznać i zastosować Twoje niestandardowe wersje:
   • Aby nadpisać Komponent karty produktu, utwórz plik PHP o nazwie product-card.php w folderze Shopify.
   • Aby nadpisać Komponent modalny szybkiego podglądu produktu, utwórz plik PHP o nazwie modal.php w folderze Shopify.
   • Aby nadpisać Komponent strony ze szczegółami produktu, utwórz plik PHP o nazwie pdp.php w folderze Shopify.
   • Aby nadpisać Komponent kolekcji, utwórz plik PHP o nazwie component.php w folderze Shopify.

Po utworzeniu niestandardowego pliku PHP wtyczka ignoruje domyślny plik komponentu dla tego konkretnego elementu. W tych plikach zastępujących możesz zaimplementować dowolny kod, od statycznych bloków HTML po złożoną logikę PHP.

Mimo że zdecydowanie zaleca się wykorzystanie internetowych komponentów witryny sklepu Shopify (używanych w domyślnej strukturze wtyczki) w celu zapewnienia spójności i dostępu do wbudowanych funkcji Shopify, nie musisz się do nich ograniczać. Możesz zintegrować inne metody pobierania i wyświetlania danych o produktach i kolekcjach, co pozwala na zaawansowane dostosowania.

Więcej informacji i najlepszych praktyk znajdziesz w dokumentacji dla deweloperów wtyczek WordPress.

Reguły przepisywania dla produktów i kolekcji Shopify

Po opublikowaniu produktu lub kolekcji na platformie Shopify nadawany jest im unikalny adres URL. Domyślnie te adresy URL są tworzone przy użyciu Twojej domeny Shopify. Dzięki funkcji przepisywania możesz uzyskać dostęp do tych unikalnych adresów URL za pomocą Twojej publicznej domeny WordPress.

Kroki:

1. W menu wtyczki Shopify przejdź do opcji Ustawienia.
2. Na karcie Zaawansowane upewnij się, że oba pola wyboru w sekcji Reguły przepisywania linków Shopify są aktywowane.
3. Przejdź do opcji Bezpośrednie odnośniki.
4. Kliknij przycisk Zapisz, aby zastosować tę nową regułę.
5. Przejdź do panelu administracyjnego Shopify, a następnie na stronę szczegółów produktu lub kolekcji, dla których chcesz utworzyć link WordPress.
6. Na karcie oferty w wyszukiwarce wyświetlany jest adres URL, który prowadzi klientów bezpośrednio do produktu lub kolekcji. Na przykład: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
7. Dodaj products/huskee-reusable-cup na końcu adresu URL witryny WordPress. Na przykład: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Dostosuj działanie karty produktu

W przypadku komponentów witryny sklepu Shopify istnieją dwa typy kart szczegółów produktu:

1. Szybki podgląd: po najechaniu kursorem na kartę produktu klient ma możliwość wybrania opcji Szybki zakup. Po jej kliknięciu szczegóły produktu są wyświetlane w wyskakującym okienku lub oknie modalnym nad istniejącą treścią w tle.
2. Szczegółowa strona produktu: gdy klient kliknie kartę produktu, np. obraz lub nazwę produktu, szczegóły produktu wyświetlają się w widoku pełnej strony z unikalnym adresem URL.

Możesz zmienić to ustawienie tak, aby wyświetlał się tylko szybki podgląd, tylko szczegółowa strona produktu lub obie opcje.

Kroki:

1. W menu wtyczki Shopify na platformie WordPress przejdź do opcji Ustawienia.
2. Na karcie Zaawansowane przejdź do sekcji Widok produktu.
3. Wybierz opcję, która najlepiej pasuje do sklepu.
4. Kliknij przycisk Zapisz.