Dodawanie wyskakującego okienka do stron produktów z metapolami
Metapola ułatwiają dostosowanie funkcjonalności i wyglądu sklepu Shopify poprzez umożliwienie zapisania wyspecjalizowanych informacji, które zwykle nie są zarejestrowane w panelu administracyjnym Shopify. Metapola mogą być wykorzystywane wewnętrznie w panelu administracyjnym Shopify i można je także wyświetlać w sklepie online.
Dzięki metapolom można dodać odniesienie do strony do wyskakującego bloku, w którym wyświetlany jest link na stronach produktów. Po kliknięciu link otwiera wyskakujące okienko wyświetlające zawartość strony. Możesz dodawać obrazy i inne multimedia za pomocą edytora tekstu sformatowanego do swoich stron.
Poniżej przedstawiono kilka przykładów wyskakujących informacji, które można dodać do stron produktów:
- Tabele rozmiarów
- Instrukcje dotyczące pielęgnacji
- Instrukcje montażu
- Specyfikacje produktu
- Często zadawane pytania
Jest to 4-etapowy tutorial, który opisuje metapola odniesienia do strony, tworzenie metapola produktu dla odniesienia do strony, tworzenie wzorca strony produktu dla sklepu online, dodawanie nowej strony, odwoływanie się do strony w określonych produktach i stosowanie wzorca strony produktu do określonych produktów.
Jeśli masz szablon Online Store 2.0, możesz połączyć większość metapól ze swoim szablonem, używając edytora szablonów. Jeśli używasz klasycznych szablonów lub chcesz dodać typy metapól, których nie obsługuje Twój szablon, możesz edytować kod swojego szablonu lub zatrudnić partnera Shopify.
Na tej stronie
Krok 1: Utwórz metapole produktu dla strony
Na początek musisz utworzyć definicję metapola odniesienia do strony dla stron produktów. Metapole produktu odsyła do określonej strony i można je dostosować dla każdego produktu. Jeśli nie dodasz odniesienia do strony do produktu, który używa tego samego wzorca, tekst wyskakującego linku nadal będzie wyświetlany tak, jakby zawierał treść. Aby wyświetlić wyskakujący link tylko dla określonych produktów, możesz utworzyć wzorzec produktu i zastosować go tylko do odpowiednich produktów.
Dzięki metapolom odniesienia do strony można wyświetlać różne informacje o produkcie, tworząc różne strony dla różnych typów produktów. Na przykład, możesz utworzyć dwie różne strony tabel rozmiarów dla dwóch różnych grup wiekowych, np. tabelę rozmiarów dla małych dzieci i tabelę rozmiarów dla niemowląt, a następnie możesz dodać odniesienie do strony dla rozmiarów dla małych dzieci tylko do produktów przeznaczonych dla takich dzieci.
Musisz utworzyć definicję metapola dla odniesienia do strony, aby połączyć ją z wyskakującym blokiem w edytorze szablonów. Dostęp do sklepu jest domyślnie wybierany podczas tworzenia definicji metapola.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji: Ustawienia > Dane niestandardowe.
- W sekcji Definicje metapól kliknij opcję Produkty.
- Kliknij opcję Dodaj definicję.
- W polu Nazwa nadaj nazwę definicji metapola. Na przykład, jeśli tworzysz tabelę rozmiarów, możesz nazwać definicję Tabela rozmiarów.
- Kliknij opcję ⊕ Wybierz typ.
- Wybierz opcję Strona z menu rozwijanego. Domyślnie wybrana jest jedna strona.
- Kliknij opcję Zapisz.
- W aplikacji Shopify naciśnij opcje: … > Ustawienia.
- Naciśnij Dane niestandardowe.
- W sekcji Definicje metapól naciśnij opcję Produkty.
- Naciśnij +.
- Nadaj nazwę definicji. Na przykład, jeśli tworzysz tabelę rozmiarów, możesz nazwać definicję Tabela rozmiarów.
- Naciśnij opcję + Wybierz typ.
- Naciśnij, aby wybrać opcję Strona z menu rozwijanego. Domyślnie wybrana jest jedna strona.
- Naciśnij opcję Zapisz.
- W aplikacji Shopify naciśnij opcje: ☰ > Ustawienia.
- Naciśnij Dane niestandardowe.
- W sekcji Definicje metapól naciśnij opcję Produkty.
- Naciśnij +.
- Nadaj nazwę definicji. Na przykład, jeśli tworzysz tabelę rozmiarów, możesz nazwać definicję Tabela rozmiarów.
- Naciśnij opcję + Wybierz typ.
- Naciśnij, aby wybrać opcję Strona z menu rozwijanego. Domyślnie wybrana jest jedna strona.
- Naciśnij ✓, aby zapisać.
Krok 2: Utwórz wzorzec strony produktu
Jeśli masz szablon Online Store 2.0, możesz połączyć odniesienie do strony z szablonem za pomocą edytora szablonów. Jeśli używasz klasycznych szablonów lub chcesz dodać typy metapól, których nie obsługuje Twój szablon, możesz edytować kod swojego szablonu lub zatrudnić partnera Shopify.
Po dodaniu sekcji lub bloku możesz wybrać metapole, klikając ikonę dynamicznego źródła:
Jeśli nie chcesz dodawać wyskakującego bloku do wszystkich produktów, musisz utworzyć nowy wzorzec strony produktu. Wykonując poniższe kroki, tworzysz nowy wzorzec strony produktu, ale możesz także wybrać już istniejący wzorzec strony produktu do dostosowania.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
- Kliknij opcję Dostosuj obok szablonu, który chcesz dostosować.
- W menu rozwijanym Strona główna u góry edytora kliknij Produkty, a następnie kliknij opcję ⊕ Utwórz szablon, aby utworzyć i dostosować nowy szablon.
- Na pasku bocznym nawigacji sekcji przejdź do bloków Szablon > Informacje o produkcie, a następnie kliknij opcję ⊕ Dodaj blok.
- Kliknij Wyskakujące okienko.
- Wprowadź Etykietę linku. Jest to tekst, który wyświetla się po kliknięciu przez klienta zawartości wyskakującej strony. Na przykład, jeśli wyskakująca strona jest tabelą rozmiarów, możesz ustawić Etykietę linku jako Tabelę rozmiarów.
- Obok opcji Strona kliknij ikonę źródła dynamicznego, a następnie kliknij, aby wybrać utworzone metapole odniesienia do strony.
- Kliknij opcję Zapisz.
- W aplikacji Shopify naciśnij … > Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Naciśnij opcję Dostosuj obok szablonu, który chcesz dostosować.
- W menu rozwijanym Strona główna u góry edytora naciśnij Produkty, a następnie naciśnij opcję ⊕ Utwórz wzorzec, aby utworzyć i dostosować nowy wzorzec.
- Na pasku bocznym nawigacji sekcji przejdź do bloków Wzorzec > Informacje o produkcie, a następnie naciśnij opcję ⊕ Dodaj blok.
- Naciśnij Wyskakujące okienko.
- Wprowadź Etykietę linku. Jest to tekst, który wyświetla się po kliknięciu przez klienta zawartości wyskakującej strony. Na przykład, jeśli wyskakująca strona jest tabelą rozmiarów, możesz ustawić Etykietę linku jako Tabelę rozmiarów.
- Obok opcji Strona kliknij ikonę źródła dynamicznego, a następnie naciśnij, aby wybrać utworzone metapole odniesienia do strony.
- Naciśnij opcję Zapisz.
- W aplikacji Shopify naciśnij ☰ > Sklep online.
- Naciśnij opcję Zarządzaj wszystkimi szablonami.
- Naciśnij opcję Dostosuj obok szablonu, który chcesz dostosować.
- W menu rozwijanym Strona główna u góry edytora naciśnij Produkty, a następnie naciśnij opcję ⊕ Utwórz wzorzec, aby utworzyć i dostosować nowy wzorzec.
- Na pasku bocznym nawigacji sekcji przejdź do bloków Wzorzec > Informacje o produkcie, a następnie naciśnij opcję ⊕ Dodaj blok.
- Naciśnij Wyskakujące okienko.
- Wprowadź Etykietę linku. Jest to tekst, który wyświetla się po kliknięciu przez klienta zawartości wyskakującej strony. Na przykład, jeśli wyskakująca strona jest tabelą rozmiarów, możesz ustawić Etykietę linku jako Tabelę rozmiarów.
- Obok opcji Strona kliknij ikonę źródła dynamicznego, a następnie naciśnij, aby wybrać utworzone metapole odniesienia do strony.
- Naciśnij ✓, aby zapisać szablon.
Krok 3: Dodaj stronę z informacjami o produkcie
Musisz utworzyć stronę z treścią, do której odwołuje się metapole. Jeśli masz już utworzoną stronę, możesz przejść do kroku 4.
Kroki:
- W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Strony.
- Kliknij Dodaj stronę.
- Nadaj nazwę swojej stronie i utwórz zawartość, którą chcesz wyświetlić w wyskakującym okienku na stronie produktu.
- W sekcji Widoczność ustaw stronę jako Widoczną.
- Kliknij opcję Zapisz.
- W aplikacji Shopify naciśnij … > Sklep online.
- Naciśnij Strony.
- Naciśnij opcję Dodaj stronę.
- Nadaj nazwę swojej stronie i utwórz zawartość, którą chcesz wyświetlić w wyskakującym okienku na stronie produktu.
- W sekcji Widoczność ustaw stronę jako Widoczną.
- Naciśnij opcję Zapisz.
- W aplikacji Shopify naciśnij ☰ > Sklep online.
- Naciśnij Strony.
- Naciśnij opcję Dodaj stronę.
- Nadaj nazwę swojej stronie i utwórz zawartość, którą chcesz wyświetlić w wyskakującym okienku na stronie produktu.
- W sekcji Widoczność ustaw stronę jako Widoczną.
- Naciśnij ✓, aby zapisać.
Możesz utworzyć dowolną liczbę stron, do których będzie można odwoływać się w metapolu. Możesz jednak utworzyć link tylko do jednej strony w metapolu produktu.
Krok 4: Odwołaj się do strony i zastosuj szablon produktu do konkretnych produktów
Po dodaniu odniesienia do strony do określonego produktu informacje z tej strony są wyświetlane tylko z tym produktem. Jeśli pozostawisz odniesienie do strony puste dla produktu, który używa tego wzorca produktu, tekst linku nadal będzie wyświetlany jako link. Wyskakujące okienko jest jednak puste i nie zawiera odniesienia do strony, co może wprowadzać klientów w błąd. W takim przypadku możesz użyć innego wzorca strony produktu dla określonych typów produktów. Na przykład możesz utworzyć wzorzec produktu dla odzieży ze stroną tabeli rozmiarów w wyskakującym bloku, a następnie wzorzec produktu dla toreb, w którym nie trzeba dodawać wyskakującego bloku.
Dowiedz się więcej o wzorcach.
Kroki:
- Z panelu administracyjnego Shopify przejdź do opcji Produkty.
- Kliknij produkt, do którego chcesz dodać odniesienie do strony.
- W sekcji Metapola produktu kliknij utworzone metapole odniesienia do strony, a następnie opcję Wybierz strony.
- Wybierz utworzoną stronę z menu rozwijanego.
- W sekcji Wzorzec szablonu wybierz wzorzec strony produktu utworzony w kroku 2.
- Kliknij opcję Zapisz.
- Z aplikacji Shopify przejdź do Produkty > Wszystkie produkty.
- Naciśnij produkt, do którego chcesz dodać odniesienie do strony.
- W sekcji Metapola naciśnij opcję Wyświetl wszystkie.
- Naciśnij utworzone metapole odniesienia do strony, a następnie naciśnij, aby wybrać utworzoną stronę.
- W sekcji Wzorzec szablonu wybierz wzorzec strony produktu utworzony w kroku 2.
- Naciśnij opcję Zapisz.
- Z aplikacji Shopify przejdź do Produkty > Wszystkie produkty.
- Naciśnij produkt, do którego chcesz dodać odniesienie do strony.
- W sekcji Metapola naciśnij opcję Wyświetl wszystkie.
- Naciśnij utworzone metapole odniesienia do strony, a następnie naciśnij, aby wybrać utworzoną stronę.
- W sekcji Wzorzec szablonu wybierz wzorzec strony produktu utworzony w kroku 2.
- Naciśnij ✓, aby zapisać.
Możesz powtórzyć te kroki dla dowolnej liczby produktów.