Przegląd bloków
Kompletny przewodnik po wszystkich dostępnych blokach motywu i ich opcjach dostosowywania.
Dostępne bloki
Aplikacja zapewnia 3 bloki aplikacji i 1 osadzenie aplikacji dla Twojego motywu Shopify. Użyj osadzenia aplikacji raz (zalecane), a następnie dodaj bloki do szablonów, w których chcesz, aby się pojawiły.
Breadcrumbs block (App block) — nawigacja okruszkowa dla stron kolekcji i produktów
Subcategories block (Text below) (App block) — siatka / karuzela podkolekcji z tytułem pod obrazem
Subcategories block (Text overlay) (App block) — siatka / karuzela podkolekcji z tytułem nałożonym na obraz
Breadcrumbs & Categories (App embed) — ładuje globalne style/skrypty (zalecane)
Breadcrumbs block
Dodaj ten blok do szablonów produktu i/lub kolekcji, aby wyświetlić klikalny szlak okruszków. Obsługuje wyświetlanie responsywne i różne style separatorów.
Układ i typografia
Block max width (
page_width) — maksymalna szerokość kontenera w pxFont size (
font_size) — rozmiar tekstu okruszkówSeparated icon size (
separated_icon_size) — rozmiar ikony separatoraSeparator spacing (
separated_size) — odstęp wokół separatoraText alignment (
text_align) — lewo/środek/prawo
Wypełnienie
Top and bottom (
padding_block) — wypełnienie pionoweLeft and right (
padding_inline) — wypełnienie poziome
Opcje wyświetlania
Bold the current item (
bold_current_item_on_breadcrumb) — wyróżnij ostatni element okruszkaHover effect (
hover_effect) — Brak / Podkreślenie / Skalowanie / Poświata / Odbicie / HuśtawkaEnable horizontal scroll on mobile (
scroll_on_mobile) — przewijanie zamiast zawijania na małych ekranachHide product name in breadcrumbs (
hidden_product_name_on_breadcrumb) — ukrywa tytuł produktu na stronach produktów
Kolory
Background (
background_color) — kolor tła blokuText (
text_color) — kolor tekstu
Zaawansowana personalizacja
Breadcrumb divider symbol (
trail_divider_style) — wybierz separator: Chevron Right, Double Arrow, Forward Slash, Pipe, Bullet Point, Angle Bracket, Dash
Etykieta elementu
Skonfiguruj etykiety wyświetlane w ścieżce okruszków (użyj języka swojego sklepu).
Home display type (
home_display_type) — Tekst / Ikona domu (Klasyczna) / Ikona domu (Kontur)Home page (
label_home) — etykieta dla elementu domuList collection page (
label_list_collections) — etykieta dla strony listy kolekcjiCatalog page (
label_catalog) — etykieta dla elementu katalogu (użyj---aby ukryć; zobacz notatkę w ustawieniu)Custom Catalog link (
custom_catalog_link) — opcjonalny niestandardowy URL (domyślnie/collections/all)
Subcategories block (Text below)
Wyświetl podkolekcje jako siatkę lub karuzelę. Ten układ pokazuje tytuł kolekcji (i opcjonalnie liczbę produktów) pod obrazem.
Ogólne
Block max width (
page_width) — maksymalna szerokość kontenera w pxEnable carousel on desktop (
enable_desktop_slider) — włącza zachowanie suwaka na komputerach stacjonarnychAutoplay (
autoplay_mode) — tryby automatycznego przewijania / automatycznego przesuwania (patrz poniżej)Enable the navigation (
slider_enable_navigation) — pokazuje strzałki/kropki nawigacjiVertical spacing (
vertical_spacing) — odstęp między nagłówkiem a suwakiem/siatkąHeading (
title) — tekst nagłówka sekcjiImage ratio (
image_ratio) — Dopasuj do obrazu / Kwadrat / Portret / Krajobraz / KołoImage fit type (
image_fit_type) — Dopasuj / ZawartośćImage border radius (
image_border_radius) — nie dotyczy, gdy proporcje obrazu to KołoNumber of columns on desktop (
columns_desktop)Card spacing (
card_spacing_desktop) — odstęp między kartami kategoriiContent layout (
content_layout) — Normalny / Nakładka / Tekst poniżej / Tekst poniżej z obramowaniemText alignment (
text_alignment) — lewo/środek/prawoShow the product count (
show_product_count)Enable uppercase text (
enable_uppercase_text)Truncate long titles (
truncate_title) — ogranicz tytuły do 5 słówReverse layout (Text on top, Image below) (
reverse_image_position)
Autoodtwarzanie (auto-scroll / auto-slide)
Dotyczy tylko, gdy Enable carousel on desktop jest włączone.
Off (
none)Slow – 50px/s (
slow_scroll_50) — ciągłe automatyczne przewijanieFast – 100px/s (
slow_scroll_100) — ciągłe automatyczne przewijanieEvery 3 seconds (1 item) (
slide_3s) — przesuwa o jeden elementEvery 3 seconds (All visible items) (
slide_3s_page) — przesuwa o jedną stronę
Kolory
Text (
colors_text)Background (
colors_background) — używane tylko, gdy układ treści to Overlap
Układ mobilny
Liczba kolumn na tablecie (
columns_tablet) — 2/3/4Liczba kolumn na urządzeniu mobilnym (
columns_mobile) — 1/2Włącz przesuwanie na tablecie i urządzeniach mobilnych (
swipe_on_mobile)
Rozmiar czcionki tytułu kolekcji
Rozmiar czcionki liczby produktów jest automatycznie dostosowywany na podstawie rozmiaru czcionki tytułu kolekcji.
Desktop (
font_size_desktop)Tablet (
font_size_tablet)Mobile (
font_size_mobile)
Blok podkategorii (Nakładka tekstu)
Wyświetl podkolekcje jako siatkę lub karuzelę z tytułem (i opcjonalnie liczbą produktów) na obrazie.
Ogólne
Maksymalna szerokość bloku (
page_width) — maksymalna szerokość kontenera w pxWłącz karuzelę na komputerze (
enable_desktop_slider) — włącza zachowanie suwaka na komputerzeAutoodtwarzanie (
autoplay_mode) — tryby automatycznego przewijania / przesuwania (patrz poniżej)Włącz nawigację (
slider_enable_navigation) — pokazuje strzałki/kropki nawigacyjnePionowy odstęp (
vertical_spacing) — odstęp między nagłówkiem a suwakiem/siatkąNagłówek (
title) — tekst nagłówka sekcjiProporcje obrazu (
image_ratio) — Dopasuj do obrazu / Kwadrat / Portret / Krajobraz / KołoTyp dopasowania obrazu (
image_fit_type) — Cover / ContainPromień zaokrąglenia krawędzi obrazu (
image_border_radius) — nie dotyczy, gdy proporcje obrazu to KołoLiczba kolumn na komputerze (
columns_desktop)Pozycja treści (
content_position) — Góra / Środek / DółWyrównanie tekstu (
text_alignment) — Lewo / Środek / PrawoPokaż liczbę produktów (
show_product_count)Włącz tekst wielkimi literami (
enable_uppercase_text)Kierunek układu treści (
content_layout_direction) — Pojedynczy wiersz (wiersz) / Ułożony (kolumna)
Autoodtwarzanie (automatyczne przewijanie / przesuwanie)
Dotyczy tylko, gdy Włącz karuzelę na komputerze jest włączone.
Wyłączone (
none)Wolne – 50px/s (
slow_scroll_50) — ciągłe automatyczne przewijanieSzybkie – 100px/s (
slow_scroll_100) — ciągłe automatyczne przewijanieCo 3 sekundy (1 element) (
slide_3s) — przesuwa o jeden elementCo 3 sekundy (wszystkie elementy) (
slide_3s_page) — przesuwa o jedną stronę
Układ mobilny
Liczba kolumn na tablecie (
columns_tablet) — 2/3/4Liczba kolumn na urządzeniu mobilnym (
columns_mobile) — 1/2Włącz przesuwanie na tablecie i urządzeniach mobilnych (
swipe_on_mobile)
Rozmiar czcionki tytułu kolekcji
Rozmiar czcionki liczby produktów jest automatycznie dostosowywany na podstawie rozmiaru czcionki tytułu kolekcji.
Desktop (
font_size_desktop)Tablet (
font_size_tablet)Mobile (
font_size_mobile)
Kolor tekstu nagłówka
Kolor tekstu (
colors_text)Kolor nakładki tekstu (
colors_overlay) — kolor nakładki dla czytelności
Osadzenie aplikacji
Osadzenie aplikacji jest zalecane, ponieważ ładuje globalne CSS/JS używane przez bloki (na przykład: skrypt autoodtwarzania dla Podkategorii, opcjonalne pomocniki i18n oraz niestandardowy CSS skonfigurowany w aplikacji).
Włącz to w Theme editor → App embeds
Pozostaw włączone, aby zapewnić prawidłowe działanie wszystkich bloków
Dodawanie bloków do Twojego motywu
Przejdź do panelu administracyjnego Shopify
Przejdź do Sklep online › Motywy
Kliknij „Dostosuj” na aktywnym motywie
Dodaj bloki aplikacji tam, gdzie chcesz, aby się pojawiły
Dostosuj ustawienia i zapisz
Ustawienia bloku
Wszystkie powyższe ustawienia są konfigurowane w Shopify Theme Editor po wybraniu bloku. Większość ustawień jest responsywna (desktop/tablet/mobile).
Najlepsze praktyki
Dodaj Breadcrumbs do szablonów produktów i kolekcji
Używaj bloków podkategorii na stronach kolekcji
Dopasuj styl bloku do swojego motywu
Testuj na urządzeniach mobilnych
Podglądaj przed opublikowaniem