Sekcje i bloki

Możesz używać sekcji w szablonie, aby tworzyć pożądany układ sklepu online. Sekcje składają się z różnych typów bloków, z których każdy pełni określoną funkcję, np. zawiera tekst, przyciski, pojedyncze obrazy, kolaż obrazów lub linki.

Sekcje i bloki zapewniają elastyczność w rozmieszczaniu treści i pozwalają kontrolować styl i wygląd sklepu online bez konieczności edytowania kodu, w tym następujące opcje dostosowywania:

• Możesz zmieniać kolejność sekcji w szablonach i zmieniać kolejność bloków w obrębie sekcji.
• Sekcje i bloki mogą mieć określone ustawienia dostosowania.
• Możesz połączyć kompatybilne sekcje i bloki, aby wyświetlać w sklepie online dynamiczne informacje na podstawie danych niestandardowych, na przykład dodając instrukcje pielęgnacji produktów. Dowiedz się więcej o łączeniu źródeł dynamicznych.

Dostępne w edytorze szablonów sekcje i bloki zależą od szablonu i jego wersji. Na przykład szablon może mieć blok Slajd, który można dodać tylko do sekcji Pokaz slajdów, oraz blok tekstowy Nagłówek, który można dodać do wszystkich sekcji szablonu. Aby uzyskać więcej informacji o dostępnych opcjach, zapoznaj się z dokumentacją szablonu.

Maksymalne limity sekcji i bloków

Sekcje i bloki mają następujące maksymalne ograniczenia:

• Każdy szablon może mieć maksymalnie 25 sekcji.
• Każdy szablon może mieć maksymalnie 1250 bloków we wszystkich sekcjach. Dokładna liczba bloków i liczba bloków każdego typu, które można dodać do danej sekcji, zależą od źródeł sekcji i bloków i są określane przez projektanta szablonu. Na przykład, jeśli szablon zawiera sekcję Rejestracja do newslettera, możliwe może być dodanie tylko jednego bloku Formularz e-mail.
• Bloki, które obsługują zagnieżdżanie, mogą mieć do ośmiu poziomów zagnieżdżonych bloków.

Źródła bloków

W zależności od struktury szablonu i zainstalowanych aplikacji szablon może zawierać różne sekcje, które akceptują bloki z różnych źródeł. Po dodaniu bloku do sekcji wszystkie dostępne bloki dla tej sekcji są wyświetlane w selektorze bloków. W zależności od szablonu i jego wersji możesz dodawać do sekcji w szablonie następujące typy bloków:

• Bloki aplikacji to bloki, które dodają funkcjonalność do szablonu. Za pomocą bloku aplikacji możesz zmienić pozycję obszarów dodanych do szablonu przez zainstalowane aplikacje i umieścić je w określonym miejscu na stronie.
• Bloki sekcji to bloki zdefiniowane w obrębie określonej sekcji.
• Bloki szablonu to bloki zdefiniowane w szablonie, które mogą mieć dynamiczne funkcje, takie jak zagnieżdżanie.

Szablon może zawierać sekcje, które używają bloków sekcji, oraz inne sekcje, które używają bloków szablonu. Pojedyncza sekcja może akceptować bloki szablonu lub bloki sekcji, ale nie oba ich rodzaje jednocześnie.

Dostępność bloków aplikacji w sekcjach zależy od funkcjonalności aplikacji oraz od tego, czy dana sekcja może akceptować bloki aplikacji.

Bloki sekcji

Bloki sekcji to bloki zaprojektowane dla określonej sekcji. Sekcja może mieć limity dotyczące typów bloków sekcji i ograniczać liczbę bloków określonego typu, które można dodać.

Przykład sekcji z blokami sekcji

Na przykład szablon ma sekcję Rejestracja do newslettera. Możesz użyć tej sekcji, aby dodać formularz rejestracji do newslettera, dzięki czemu klienci będą mogli subskrybować Twój newsletter. Po dodaniu sekcji Rejestracja do newslettera możesz dodać po jednym z następujących bloków:

• blok Formularz e-mail
• blok Nagłówek
• blok Podtytuł

Jeśli dodasz blok Formularz e-mail i klikniesz przycisk Dodaj blok, aby dodać kolejny blok, blok Formularz e-mail nie będzie już wyświetlany jako opcja w selektorze bloków. To ograniczenie pomaga zapobiegać problemom z pozyskiwaniem adresu e-mail klienta i zapewnia, że klient może łatwo wprowadzić swój adres e-mail.

Po dodaniu wszystkich trzech dostępnych bloków dla sekcji Rejestracja do newslettera selektor bloków wyświetli komunikat, że wszystkie dostępne bloki zostały użyte.

Bloki szablonu

Bloki szablonu to bloki zdefiniowane w szablonie, które mogą mieć dynamiczne funkcje, takie jak zagnieżdżanie. Sekcje akceptujące bloki szablonu mogą przyjmować różne bloki, w zależności od struktury sekcji. Sekcja akceptująca bloki szablonu może przyjmować wszystkie dostępne bloki szablonu, określony podzbiór bloków lub bloki unikalne dla tej sekcji. Bloki szablonu mogą również wykazywać następujące zachowania:

• Niektóre bloki obsługują zagnieżdżanie, dzięki czemu można zagnieżdżać bloki w innych blokach do ośmiu poziomów.
• Niektóre sekcje mają wymagane bloki. Możesz dostosować lub ukryć te bloki, ale nie możesz zmienić ich kolejności ani ich usunąć.
• Niektóre bloki są wyświetlane automatycznie w sekcji po spełnieniu określonych warunków.

Przykład sekcji z blokami szablonu

Na przykład szablon ma sekcję Pokaz slajdów z blokami szablonu.

W sekcji pokazu slajdów szablonu po kliknięciu przycisku Dodaj blok można wybrać blok Slajd z selektora bloków. Żadne inne typy bloków nie są dostępne. Jeśli spróbujesz dodać blok Slajd do innej sekcji w szablonie, na przykład do sekcji Baner obrazowy, opcja Slajd nie będzie dostępna. Jest to przykład bloku o ograniczonym zastosowaniu.

Po dodaniu bloku Slajd do sekcji Pokaz slajdów możesz kliknąć opcję Dodaj blok, aby dodać kolejne bloki do dowolnych bloków Slajd w sekcji Pokaz slajdów, takie jak Nagłówek, Obraz lub Przycisk. Bloki te są zagnieżdżone w bloku Slajd. Jest to przykład bloku zagnieżdżonego.

Jeśli dodasz drugi blok Slajd do sekcji Pokaz slajdów, szablon automatycznie doda blok Elementy sterujące pokazu slajdów. Ten blok wyświetla przyciski, które odwiedzający Twoją witrynę mogą klikać, aby przechodzić z jednego slajdu na drugi. Możesz dostosować styl przycisków lub ukryć elementy sterujące, ale nie możesz usunąć tego bloku. Jest to przykład wymaganego bloku, który jest wyświetlany warunkowo.

Zgodność bloków szablonu

Aby uzyskać dostęp do bloków szablonu, szablon musi mieć sekcje, które je obsługują. Możesz sprawdzić, czy szablon obsługuje bloki szablonu w jego kodzie. Jeśli na pasku bocznym edytora Liquid znajduje się katalog blocks, oznacza to, że używasz szablonu obsługującego bloki szablonu. Możesz to również sprawdzić w dokumentacji szablonu.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Obok szablonu, który chcesz sprawdzić, kliknij przycisk , a następnie kliknij opcję Edytuj kod.

3. Na pasku bocznym wyszukaj folder blocks.

   

Dostosowywanie wzorców szablonu za pomocą sekcji i bloków

Po otwarciu edytora szablonów domyślnie ładowana jest strona główna sklepu. Możesz użyć menu rozwijanego, aby wybrać inny wzorzec, np. dla produktów, kolekcji, stron lub blogów, albo użyć paska wyszukiwania w menu rozwijanym wzorców, aby wyszukać określony wzorzec. Po wybraniu wzorca ładuje się on w edytorze szablonów, a wszelkie wprowadzone zmiany są widoczne w podglądzie w edytorze.

Dodaj sekcję

Dodaj nową sekcję do dowolnej strony w sklepie online.

Kroki:

Edytuj sekcję

Zmień kolejność sekcji lub bloku

Możesz zmieniać kolejność sekcji we wzorcach stron i rozmieszczenie bloków w tych sekcjach. Ponadto możesz przenosić zgodne bloki między różnymi sekcjami. Na przykład, jeśli na stronie głównej znajdują się dwie sekcje Pokaz slajdów, możesz przeciągnąć blok Slajd z jednego pokazu slajdów do drugiego.

Nie możesz przenieść bloku do innej sekcji, jeśli typ bloku jest niezgodny lub jeśli sekcja osiągnęła już maksymalny limit bloków. Jeśli spróbujesz przenieść sekcję lub blok w nieprawidłowe miejsce, element ten wróci na swoją pierwotną pozycję.

Możesz również użyć inspektora podglądu, aby zmienić kolejność sekcji. Dowiedz się więcej o używaniu inspektora podglądu w edytorze szablonów.

Kroki:

Powielanie sekcji lub bloku

Możesz powielić sekcję lub blok, aby utworzyć ich identyczną kopię.

Po powieleniu bloku nowy blok jest dodawany do tej samej sekcji. Jeśli chcesz przenieść blok do nowej sekcji lub zmienić kolejność bloków, możesz zmienić kolejność bloku. Możesz również skopiować blok i wkleić go bezpośrednio do innej sekcji.

Kopiowanie i wklejanie bloków

Jeśli chcesz użyć tego samego bloku w wielu sekcjach, możesz go łatwo skopiować i wkleić w innej sekcji. Możesz również skopiować i wkleić blok w tej samej sekcji lub zamiast tego powielić blok. Powielony blok zachowa wszystkie ustawienia i zawartość oryginalnego bloku.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Sklep online > Szablony.

2. Obok szablonu, który chcesz edytować, kliknij Edytuj szablon.

3. Aby skopiować i wkleić blok na stronie głównej, wybierz go bezpośrednio lub użyj menu rozwijanego Strona główna, aby wybrać szablon zawierający sekcję lub blok, które chcesz edytować.

4. Kliknij prawym przyciskiem myszy blok, który chcesz powielić, a następnie kliknij opcję Kopiuj.

5. W tej samej lub innej sekcji kliknij prawym przyciskiem myszy w jej obszarze, a następnie kliknij opcję Wklej.

6. Kliknij opcję Zapisz.

Ukrywanie lub usuwanie sekcji lub bloku

Zmienianie nazwy sekcji lub bloku

Domyślnie tytuł sekcji lub bloku w menu paska bocznego edytora szablonów oraz w szczegółach ustawień jest ustawiany jako typ bloku lub sekcji, np. „Kolekcja” lub „Tekst”.

W przypadku bloków, jeśli ich ustawienia zawierają pole tekstowe, takie jak nagłówek lub opis, tekst z tego pola jest również dołączany do tytułu w menu paska bocznego. Jeśli pól tekstowych jest więcej niż jedno, dołączany jest tekst z pierwszego pola zawierającego treść. Gdy zmienisz tekst w polu tekstowym, tytuł bloku zmieni się, uwzględniając zaktualizowany tekst. Nazwa sekcji lub bloku nie może być pusta.

Na przykład dodajesz sekcję Wiele kolumn do szablonu strony z blokami Kolumna. Blok kolumny zawiera zarówno ustawienie Nagłówek z domyślnym tekstem Kolumna, jak i ustawienie Opis z domyślnym tekstem Połącz tekst z obrazem, aby wyróżnić wybrany produkt, kolekcję lub wpis na blogu. Domyślny tytuł sekcji to Wiele kolumn. Domyślny tytuł bloku Kolumna to Kolumna - Kolumna. Jeśli usuniesz tekst z sekcji Nagłówek, tytuł bloku zaktualizuje się do Kolumna - Połącz tekst z obra....

Możesz zmienić nazwę dowolnej sekcji lub bloku na niestandardową w ustawieniach sekcji lub bloku w menu na pasku bocznym edytora szablonów.

Kroki:

Praca z blokami

Bloki to moduły, które możesz dostosowywać, aby dodawać treść do sekcji w szablonach. Za pomocą bloków możesz dodawać tekst, obrazy, linki, przyciski i inne elementy.

Szablony Shopify mają sekcje i bloki, które możesz dostosowywać. Niektóre sekcje mają stałe typy bloków, co oznacza, że możesz wybierać tylko spośród bloków udostępnionych dla danej sekcji przez projektanta szablonu.

Inne sekcje pozwalają na wybranie dowolnego bloku, ale istnieje limit łącznej liczby bloków, które możesz dodać do sekcji. Jeśli sekcja osiągnie maksymalną liczbę dostępnych bloków, opcja Dodaj blok jest wyszarzona i nie możesz jej kliknąć ani nacisnąć.

Możesz użyć wyszukiwania, aby znaleźć konkretny blok według nazwy, lub wybrać blok z menu rozwijanego selektora bloków. Bloki szablonu mogą być posortowane w selektorze bloków na kategorie, takie jak Kolekcja dla bloków z selektorem kolekcji lub Multimedia dla bloków obrazów i wideo.

W selektorze bloków wyświetlany jest podgląd bloku, dzięki czemu można sprawdzić jego wygląd przed dodaniem.

Dodaj blok

Używanie metapól i metaobiektów z dynamicznymi źródłami

Możesz używać metapól i metaobiektów do wyświetlania dynamicznych informacji w sklepie online. Jeśli Twój szablon obsługuje metapola, możesz połączyć metapole z ustawieniami zgodnej sekcji lub bloku w edytorze szablonów.

Na przykład, jeśli sprzedajesz świece, możesz chcieć wyświetlać czas spalania dla każdej świecy dostępnej w Twoim sklepie. Po skonfigurowaniu metapola produktu dla opcji Czas spalania w sekcji Dane niestandardowe w ustawieniach panelu administracyjnego Shopify, możesz dodać blok tekstowy do głównej sekcji szablonu produktu. W bloku tekstowym możesz kliknąć przycisk w ustawieniu tekstu i wybrać metapole Czas spalania. Informacje o czasie spalania będą teraz wyświetlane przy Twoich produktach.

Jeśli masz szablon Shopify, możesz połączyć większość metapól i metaobiektów z szablonem za pomocą edytora szablonów. Jeśli używasz innych szablonów lub chcesz dodać niestandardowe typy danych, których Twój szablon nie obsługuje, możesz edytować kod szablonu lub zatrudnić partnera Shopify, aby Ci pomógł. Dowiedz się więcej o zatrudnianiu partnera Shopify.

Nie wszystkie sekcje lub bloki obsługują dynamiczne źródła. Sprawdź wersję architektury szablonu i dostępne opcje dostosowywania w edytorze szablonów, aby ustalić, czy Twój szablon obsługuje dynamiczne źródła.

Możesz wyświetlać dynamiczne informacje w sklepie online, dodając sekcje lub bloki, które mogą używać dynamicznych źródeł. Dynamiczne źródła mogą być używane w dowolnym szablonie, sekcji lub bloku, który wyświetla kompatybilne zasoby (produkt, kolekcja, strona, blog i post na blogu). Musisz dodać metapole, zanim będzie można je połączyć w szablonach. Zapoznaj się z sekcją Dynamiczne źródła, aby uzyskać więcej informacji na temat używania metapól i metaobiektów z dynamicznymi źródłami w szablonie.

Po zakończeniu procesu konfiguracji wykonaj poniższe kroki, aby połączyć dynamiczne źródła z sekcjami lub blokami w szablonie za pomocą przycisku .

Kroki:

Dowiedz się więcej o wyświetlaniu metapól w sklepie online i wyświetlaniu metaobiektów w sklepie online.

Selektor dynamicznego źródła

Za pomocą selektora dynamicznego źródła można połączyć właściwe dynamiczne źródło bezpośrednio w edytorze szablonów. Zapoznaj się z następującymi kluczowymi funkcjami selektora dynamicznego źródła:

• W stosownych przypadkach można odwoływać się do dynamicznych źródeł z różnych zasobów. Na przykład, jeśli połączysz ustawienie z blokiem, który jest połączony zarówno z zasobem produktu, jak i z zasobem strony, możesz użyć menu rozwijanego w selektorze dynamicznego źródła, aby określić, czy chcesz wyszukać metapola powiązane z zasobem produktu, czy z zasobem strony.
• Selektor dynamicznego źródła ma funkcję wyszukiwania i filtrowania, która ułatwia znalezienie potrzebnego metapola.
• Selektor dynamicznego źródła pozwala wybrać metapola kategorii. Są to dodatkowe atrybuty, które stają się dostępne po przypisaniu kategorii produktu do produktu. Dostęp do tych metapól pozwala na łączenie dynamicznych źródeł z dowolnymi odpowiednimi polami bazowego metaobiektu atrybutu.