Jak stworzyć swoją pierwszą sekcję szablonów Shopify

Zapewnienie klientom kreatywnej kontroli jest kluczowe, zwłaszcza gdy chcą mieć możliwość dostosowania swojej witryny sklepowej. Funkcja sekcji Shopify to potężne narzędzie do personalizowania motywów Shopify, więc wydajne korzystanie z nich i przestrzeganie najlepszych praktyk odblokuje szereg opcji dla Twoich klientów.

Jeśli tworzysz motyw Shopify od podstaw lub modyfikujesz szablon dla klienta, musisz utworzyć kilka różnych typów sekcji, które będą się różnić w zależności od kontekstu. Ponadto klienci oczekują przyjaznej i intuicyjnej obsługi, co oznacza, że ​​właściwa sekcja we właściwym miejscu może mieć ogromny wpływ na konwersję.

W tym artykule omówimy, jak rozpocząć tworzenie różnych typów sekcji tematycznych oraz zasady ich używania, abyś mógł pomóc swoim klientom w dostosowywaniu ich sklepu. Przyjrzymy się również niektórym przykładom określonych sekcji z naszego dostępnego źródłowo motywu Dawn, aby dokładnie zademonstrować, w jaki sposób można ich używać w rzeczywistych scenariuszach.

Czym są sekcje tematyczne?

Na wysokim poziomie sekcje to modułowe komponenty motywu Shopify, które sprzedawcy mogą dostosowywać. Sekcje zawierają treści i ustawienia dla określonych obszarów sklepu Shopify, takich jak podstawowe elementy strony produktu lub składnik pokazu slajdów.

W tych sekcjach programiści mają dostęp do szeregu różnych typów ustawień, od wprowadzania tekstu i selektorów obrazów, po niestandardowy kod HTML i menu, które sprzedawcy mogą dostosowywać za pomocą edytora motywów i wypełniać ich treścią.

Sekcje znajdują się w katalogu /sections motywu i mogą być dołączane statycznie do plików układu motywu (takich jak nagłówek i stopka) lub mogą być dynamicznie dodawane do dowolnego szablonu z Edytora motywów. Aby zapoznać się z różnymi komponentami, które można przedstawić jako sekcje, możesz przeszukać katalog /sections motywu Dawn.

Wraz z uruchomieniem Sklepu internetowego 2.0 sekcje mogą być teraz używane jako podstawowy sposób organizowania wszystkich różnych aspektów szablonu, od całych stron po poszczególne elementy. Jak omówimy w tym artykule, możliwość dodawania sekcji do dowolnych szablonów JSON pozwoli ci łatwo rozmieścić różne strony, które można dodatkowo ulepszyć, gdy sprzedawcy dostosują swój motyw.

Szablony i sekcje

Jednym z warunków wstępnych nauczenia się, jak działają sekcje szablonów Shopify, jest zrozumienie systemu szablonów motywów Shopify. W sklepie internetowym 2.0 każdy typ strony może być reprezentowany jako plik .json w katalogu /templates motywu. Deweloperzy mogą uporządkować każdy typ strony, definiując, które sekcje będą domyślnie wyświetlane w tych plikach szablonów JSON.

Te szablony JSON nie zawierają żadnych znaczników ani obiektów Liquid do wyświetlania zawartości sklepu, są to po prostu pliki danych wskazujące, które sekcje będą domyślnie wyświetlane na stronie iw jakiej kolejności.

Podstawowym przykładem tego, jak mógłby wyglądać plik szablonu product.json , byłoby:

W takim przypadku strona produktu wyświetliłaby się z sekcją o nazwie main-product.liquid i byłaby to jedyna sekcja wyświetlana domyślnie. Gdy sprzedawca dostosuje tę stronę i doda do niej więcej sekcji, plik szablonu product.json zostanie zaktualizowany o te informacje. Przyjrzymy się temu procesowi dokładniej w tym artykule, gdy przyjrzymy się, jak sekcje są uwzględniane w szablonach.

Podstawy sekcji

Tworząc motyw przy użyciu sekcji i szablonów JSON, możesz rozważyć tworzenie plików sekcji w dwóch odrębnych kategoriach: „główne” sekcje strony i poszczególne komponenty modułowe.

Sekcje strony głównej

W sekcji strony głównej należy umieścić całą domyślną zawartość tej strony. Na przykład w sekcji głównej strony produktu należy zawrzeć ważne elementy służące do wyświetlania produktu i powiązanych z nim właściwości, takie jak tytuł produktu, opis, media, cena i formularz dodawania do koszyka.

Możesz uzyskać dostęp do zmiennych Liquid lub obiektów w sekcji, na podstawie szablonu strony, w którym sekcja jest zawarta. Oznacza to, że sekcja, która zostanie wyrenderowana w szablonie product.json , będzie miała dostęp do dowolnych atrybutów product Liquid obiekt reprezentujący produkt, którego strona jest renderowana.

Podobnie sekcja zawarta w pliku collection.json będzie miała dostęp do wszystkich atrybutów obiektu Liquid collection . Wszystkie sekcje, niezależnie od tego, gdzie się pojawiają, mają dostęp do dowolnego globalnego obiektu Liquid.

Oprócz znaczników i specyficznych dla strony obiektów Liquid, które dodasz do sekcji strony głównej, możesz także tworzyć ustawienia w tagach {% schema %} . Te ustawienia mogą odwoływać się do elementów w sekcji i mogą być konfigurowane przez sprzedawców w edytorze szablonów.

Ponieważ sekcja strony głównej zawiera znaczniki specyficzne dla jednego typu strony, będziesz chciał umieścić je tylko w powiązanym szablonie. Aby zapobiec dodaniu sekcji strony głównej do innych typów stron z edytora szablonów, nie powinna ona zawierać ustawień wstępnych w swoim schemacie sekcji.

Aby zobaczyć przykładową sekcję strony głównej, możesz przejrzeć plik main-product.liquid w katalogu /sections Dawn lub dowolną sekcję, której tytuł poprzedzony jest słowem main . Zasadniczo powinieneś także nazywać sekcje strony głównej słowem main w tytule, aby ułatwić rozróżnienie różnych typów sekcji.

Sekcje modułowe

Sekcje modułowe to sekcje, które można ponownie wykorzystać w różnych obszarach sklepu internetowego, uzupełniając główne elementy strony. Przykładami tego typu sekcji są polecane kolekcje, pokazy slajdów i formularze zapisu do newslettera.

Te sekcje byłyby zwykle dodawane do stron przez sprzedawców za pomocą edytora szablonów, a nie domyślnie dodawane do szablonu strony. Aby sekcja mogła zostać dodana do strony za pośrednictwem edytora, sekcja musi zawierać ustawienia wstępne w swoim schemacie. Po dodaniu tych ustawień sekcja będzie dostępna, gdy sprzedawca kliknie Dodaj sekcję w edytorze szablonów.

W przeciwieństwie do sekcji „głównej” strony, sekcje modułowe zazwyczaj zawierają treść i znaczniki, które można ponownie wykorzystać na różnych typach stron i w różnych kontekstach w sklepie Shopify. Programiści powinni zatem unikać polegania na obiektach Liquid specyficznych dla strony w tych sekcjach.

Można jednak ograniczyć sekcję, aby była dostępna tylko na określonych typach stron, używając atrybutu templates w schemacie sekcji. Na przykład, jeśli chcesz ograniczyć sekcję tylko do stron produktów i kolekcji, możesz umieścić ten wiersz w tagach schema sekcji:

 "templates": ["product", "collection"]

Atrybut templates akceptuje listę ciągów reprezentujących typ strony.

W zależności od tego, jaką funkcjonalność chcesz uwzględnić w swoim motywie lub jakie konkretne wymagania ma Twój klient, prawdopodobnie utworzysz szereg różnych sekcji, które udostępniają unikalne funkcje. Aby zobaczyć przykłady sekcji modułowych, możesz zapoznać się z sekcją biuletynu lub sekcją tekstu sformatowanego używaną w Dawn.

Ustawienia sekcji

Przyjrzeliśmy się pokrótce, jak można wykorzystać ustawienia pliku sekcji do tworzenia opcji dostosowywania, do których mają dostęp handlowcy, ale przyjrzyjmy się im nieco głębiej, aby zobaczyć, jak są zbudowane.

Jak widzieliśmy, ustawienia są zawarte w plikach sekcji, wewnątrz tagów {% schema %} , które oznaczają, że są to ustawienia, które powinny być renderowane w interfejsie użytkownika edytora motywów. Bardzo prosty przykład można zobaczyć w niestandardowej sekcji tekstowej, która mogłaby wyglądać mniej więcej tak:

W tym przykładzie mamy dwa elementy HTML: element nagłówka i element akapitu. Każdy z tych elementów zawiera dynamiczną zawartość, którą utworzyliśmy za pomocą obiektu Liquid w section.settings . Ten obiekt sekcji umożliwia nam pobieranie wartości ustawień przez odwołanie się do unikalnego identyfikatora ustawienia.

Poniżej znaczników HTML i Liquid mamy nasze ustawienia sekcji, zawarte w naszych tagach {% schema %} . Każde ustawienie jest reprezentowane przez obiekt, w którym możemy zdefiniować id ustawienia, jego type oraz sposób, w jaki będzie się prezentował w edytorze. Aby uzyskać dostęp do ustawień sekcji w Liquid, dołącz jej id do obiektu liquid w section.settings . Definiujemy również typ ustawienia i sposób, w jaki będzie się prezentował w edytorze motywów.

W ramach ustawień naszych tagów schematu:

• id odnosi się do definiowanej zmiennej Liquid
• type określa rodzaj danych wyjściowych, które tworzymy
• label zapewnia kontekst wyświetlany w edytorze motywu
• default przypisuje wartość domyślną

W tym przykładzie utworzyłem pole text dla naszego nagłówka i pole richtext sformatowanego dla naszej treści, ale możesz dodać szeroką gamę typów danych wyjściowych, w zależności od wymagań klienta. Inne prawidłowe typy danych wejściowych to image_picker , radio , video_url i font_picker .

Ten przykład jest teraz prawidłową sekcją, ale brakuje nam jednego kluczowego aspektu: określenia, gdzie dokładnie sekcja pojawi się w motywie. Później przeanalizujemy kilka różnych podejść do włączania sekcji, ale na razie pozwolimy na dodanie sekcji za pomocą edytora motywów do dowolnej strony poprzez utworzenie ustawień wstępnych w sekcji.

Ustawienia wstępne to domyślne konfiguracje sekcji, które są dodawane w tagach sekcji {% schema %} . W naszym prostym przykładzie ustawienia wstępne mogą wyglądać następująco:

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Po dodaniu do naszego przykładu niestandardowa sekcja pola tekstowego wyglądałaby następująco:

Teraz, jeśli przejdziemy do edytora motywów i wybierzemy Dodaj sekcję na dowolnej stronie, ta sekcja pojawi się jako dostępna opcja. Utworzone przez nas ustawienia sekcji pojawią się na prawym pasku bocznym wraz z dodanymi przez nas etykietami i domyślnym tekstem, a my możemy wprowadzić ustawienia tekstu wejściowego, które będą wyświetlane w naszej sekcji.

Jest to prosty przykład pokazujący związek między ustawieniami sekcji a zmiennymi, które można utworzyć w sekcjach, a także sposób ich renderowania w edytorze motywów. Aby uzyskać bardziej zaawansowany model, możesz zapoznać się z sekcją tekstu sformatowanego motywu Dawn.

W tym sekcje na stronach

Jak już wspomnieliśmy, istnieje wiele metod dołączania sekcji na stronach motywu. Przyjrzyjmy się każdemu z tych podejść z osobna i rozpakujmy niektóre zasady, które mają do nich zastosowanie.

1. Dołączanie sekcji do szablonów JSON

Kiedy spojrzeliśmy na sekcje strony głównej, zobaczyliśmy, że pliki szablonów JSON akceptują właściwość "main" , która staje się domyślną sekcją dla tego typu strony i powinna zawierać wszystkie ważne elementy treści dla tej strony.

Oprócz sekcji "main" w szablonie JSON można również uwzględnić inne sekcje, które będą domyślnie wyświetlane na stronie tego typu. Jeśli jako przykład użyjemy szablonu JSON produktu, możemy umieścić na stronie sekcję rekomendacji produktów, dodając nowy obiekt poniżej sekcji "main" :

W tym przypadku przypisujemy nazwę do sekcji, recommendations , a właściwość type służy do identyfikowania pliku w katalogu /sections , który chcemy uwzględnić.

Ponieważ ten szablon JSON odwołuje się do więcej niż jednej sekcji, musimy zdefiniować sposób sekwencyjnego wyświetlania sekcji w obiekcie order . Każdej sekcji zawartej w szablonie JSON trzeba będzie przypisać domyślną kolejność, jednak sprzedawcy nadal mogą zmieniać kolejność sekcji w edytorze szablonów.

Sekcji bez ustawień wstępnych dodanych do szablonów JSON nie można usunąć w edytorze szablonów, ale można je ukryć, jeśli sprzedawca ich nie wymaga. Prawdziwy przykład rozmieszczenia sekcji w szablonie JSON można znaleźć w szablonie produktu Dawn.

2. Dołączanie sekcji jako opcji na wszystkich stronach

Jak widzieliśmy w przypadku naszego niestandardowego tekstu, możliwe jest udostępnienie sekcji na wszystkich stronach motywu, jeśli presets są obecne w ustawieniach schema .

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

W przypadku uwzględnienia przy użyciu tego podejścia sekcje te można dodawać, zmieniać położenie i usuwać z edytora motywów. Sekcje te można również ograniczyć do określonych stron za pomocą właściwości templates .

Ta funkcja „przeciągnij i upuść” oznacza, że ​​podczas tworzenia niestandardowych dynamicznych sekcji zostanie odblokowany szeroki zakres opcji personalizacji sklepów. Możesz tworzyć ruchome sekcje dla filmów, produktów lub galerii zdjęć. Dobrym przykładem sekcji korzystającej z tej metody byłaby sekcja biuletynów Dawn.

3. Używając tagów {% sekcji %} do dodawania sekcji statycznych

Znacznik section Liquid umożliwia renderowanie sekcji z katalogu /sections w układzie lub pliku szablonu Liquid. Ten tag może wyglądać tak:

 {% section 'header' %}

Sekcji dodanych za pomocą tego znacznika section nie można usuwać, zmieniać ich położenia ani ukrywać w edytorze motywów. Pozycja tej sekcji na stronie jest zablokowana na podstawie miejsca, w którym została dodana w pliku układu lub szablonie.

To podejście jest najczęściej stosowane w przypadku treści i komponentów, które powinny być zawsze widoczne, takich jak nagłówki, stopki i paski ogłoszeń. Aby zobaczyć przykład tego na Dawn, możesz sprawdzić plik theme.liquid, w którym dodano statyczny pasek ogłoszenia, sekcje nagłówka i stopki wraz ze znacznikiem section .

Wzmocnienie kreatywności

Teraz, gdy wiesz już, jak tworzyć i dodawać sekcje do szablonów, możesz tworzyć nieskończone możliwości dla sklepów swoich klientów.

Praca z szablonami JSON odblokowuje moc sekcji dla wszystkich stron motywu, co pozwoli sprzedawcom zbudować swój sklep dokładnie tak, jak chcą — z pewnymi wskazówkami od Ciebie.