Panoramica dei Blocchi
Guida completa a tutti i blocchi tema disponibili e alle loro opzioni di personalizzazione.
Blocchi Disponibili
L'app fornisce 3 blocchi app e 1 embed app per il tuo tema Shopify. Usa l'embed app una volta (consigliato), quindi aggiungi i blocchi ai template dove vuoi che appaiano.
Breadcrumbs block (App block) — navigazione breadcrumbs per pagine di collezioni e prodotti
Subcategories block (Text below) (App block) — griglia/carousel di sottocollezioni con titolo sotto l'immagine
Subcategories block (Text overlay) (App block) — griglia/carousel di sottocollezioni con titolo sovrapposto all'immagine
Breadcrumbs & Categories (App embed) — carica stili/script globali (consigliato)
Breadcrumbs block
Aggiungi questo blocco ai template prodotto e/o collezione per mostrare un percorso breadcrumb cliccabile. Supporta la visualizzazione responsive e diversi stili di divisori.
Layout e Tipografia
Block max width (
page_width) — larghezza massima del contenitore in pxFont size (
font_size) — dimensione del testo breadcrumbSeparated icon size (
separated_icon_size) — dimensione dell'icona divisoreSeparator spacing (
separated_size) — spaziatura attorno al divisoreText alignment (
text_align) — sinistra/centro/destra
Padding
Top and bottom (
padding_block) — padding verticaleLeft and right (
padding_inline) — padding orizzontale
Opzioni di visualizzazione
Bold the current item (
bold_current_item_on_breadcrumb) — evidenzia l'ultimo elemento breadcrumbHover effect (
hover_effect) — Nessuno / Sottolineato / Scala / Bagliore / Rimbalzo / OscillazioneEnable horizontal scroll on mobile (
scroll_on_mobile) — scorrimento invece di andare a capo su schermi piccoliHide product name in breadcrumbs (
hidden_product_name_on_breadcrumb) — nasconde il titolo del prodotto nelle pagine prodotto
Colori
Background (
background_color) — colore di sfondo del bloccoText (
text_color) — colore del testo
Personalizzazione avanzata
Breadcrumb divider symbol (
trail_divider_style) — scegli un divisore: Chevron Right, Double Arrow, Forward Slash, Pipe, Bullet Point, Angle Bracket, Dash
Etichetta elemento
Configura le etichette mostrate nel percorso breadcrumb (usa la lingua del tuo storefront).
Home display type (
home_display_type) — Testo / Icona Home (Classica) / Icona Home (Outline)Home page (
label_home) — etichetta per l'elemento homeList collection page (
label_list_collections) — etichetta per la pagina lista collezioniCatalog page (
label_catalog) — etichetta per l'elemento catalogo (usa---per nascondere; vedi la nota nell'impostazione)Custom Catalog link (
custom_catalog_link) — URL personalizzato opzionale (default/collections/all)
Subcategories block (Text below)
Mostra le sottocollezioni come griglia o carousel. Questo layout mostra il titolo della collezione (e opzionalmente il conteggio prodotti) sotto l'immagine.
Generale
Block max width (
page_width) — larghezza massima del contenitore in pxEnable carousel on desktop (
enable_desktop_slider) — abilita il comportamento slider su desktopAutoplay (
autoplay_mode) — modalità auto-scroll / auto-slide (vedi sotto)Enable the navigation (
slider_enable_navigation) — mostra frecce/punti di navigazioneVertical spacing (
vertical_spacing) — spaziatura tra titolo e slider/grigliaHeading (
title) — testo del titolo della sezioneImage ratio (
image_ratio) — Adatta all'immagine / Quadrato / Ritratto / Paesaggio / CerchioImage fit type (
image_fit_type) — Copri / ContieniImage border radius (
image_border_radius) — non applicabile se il rapporto immagine è CerchioNumber of columns on desktop (
columns_desktop)Card spacing (
card_spacing_desktop) — spazio tra le schede categoriaContent layout (
content_layout) — Normale / Sovrapposizione / Testo sotto / Testo sotto con bordoText alignment (
text_alignment) — sinistra/centro/destraShow the product count (
show_product_count)Enable uppercase text (
enable_uppercase_text)Truncate long titles (
truncate_title) — limita i titoli a 5 paroleReverse layout (Text on top, Image below) (
reverse_image_position)
Autoplay (auto-scroll / auto-slide)
Si applica solo quando Enable carousel on desktop è abilitato.
Off (
none)Slow – 50px/s (
slow_scroll_50) — auto-scroll continuoFast – 100px/s (
slow_scroll_100) — auto-scroll continuoEvery 3 seconds (1 item) (
slide_3s) — scorre di un elementoEvery 3 seconds (All visible items) (
slide_3s_page) — scorre di una pagina
Colori
Testo (
colors_text)Sfondo (
colors_background) — usato solo quando il layout del contenuto è Sovrapposizione
Layout mobile
Numero di colonne su tablet (
columns_tablet) — 2/3/4Numero di colonne su mobile (
columns_mobile) — 1/2Abilita swipe su tablet e mobile (
swipe_on_mobile)
Dimensione del font del titolo della collezione
La dimensione del font del conteggio prodotti viene regolata automaticamente in base alla dimensione del font del titolo della collezione.
Desktop (
font_size_desktop)Tablet (
font_size_tablet)Mobile (
font_size_mobile)
Blocco sottocategorie (Sovrapposizione testo)
Visualizza le sottocollezioni come griglia o carosello con il titolo (e opzionalmente il conteggio prodotti) sopra l'immagine.
Generale
Larghezza massima del blocco (
page_width) — larghezza massima del contenitore in pxAbilita carosello su desktop (
enable_desktop_slider) — abilita il comportamento slider su desktopAutoplay (
autoplay_mode) — modalità di scorrimento/slide automatico (vedi sotto)Abilita la navigazione (
slider_enable_navigation) — mostra frecce/punti di navigazioneSpaziatura verticale (
vertical_spacing) — spaziatura tra intestazione e slider/grigliaIntestazione (
title) — testo dell'intestazione della sezioneRapporto immagine (
image_ratio) — Adatta all'immagine / Quadrato / Ritratto / Paesaggio / CerchioTipo di adattamento immagine (
image_fit_type) — Copri / ContieniRaggio del bordo immagine (
image_border_radius) — non applicabile quando il rapporto immagine è CerchioNumero di colonne su desktop (
columns_desktop)Posizione del contenuto (
content_position) — Alto / Centro / BassoAllineamento del testo (
text_alignment) — Sinistra / Centro / DestraMostra il conteggio prodotti (
show_product_count)Abilita testo maiuscolo (
enable_uppercase_text)Direzione del layout del contenuto (
content_layout_direction) — Riga singola / Impilato (colonna)
Autoplay (scorrimento/slide automatico)
Si applica solo quando Abilita carosello su desktop è attivato.
Disattivato (
none)Lento – 50px/s (
slow_scroll_50) — scorrimento automatico continuoVeloce – 100px/s (
slow_scroll_100) — scorrimento automatico continuoOgni 3 secondi (1 elemento) (
slide_3s) — scorre di un elementoOgni 3 secondi (Tutti gli elementi) (
slide_3s_page) — scorre di una pagina
Layout mobile
Numero di colonne su tablet (
columns_tablet) — 2/3/4Numero di colonne su mobile (
columns_mobile) — 1/2Abilita swipe su tablet e mobile (
swipe_on_mobile)
Dimensione del font del titolo della collezione
La dimensione del font del conteggio prodotti viene regolata automaticamente in base alla dimensione del font del titolo della collezione.
Desktop (
font_size_desktop)Tablet (
font_size_tablet)Mobile (
font_size_mobile)
Colore del testo dell'intestazione
Colore testo (
colors_text)Colore sovrapposizione testo (
colors_overlay) — colore della sovrapposizione per la leggibilità
Incorporamento app
L'incorporamento dell'app è consigliato perché carica CSS/JS globali usati dai blocchi (per esempio: script autoplay per Sottocategorie, helper opzionali i18n e CSS personalizzato configurato nell'app).
Abilitalo in Theme editor → App embeds
Mantienilo abilitato per assicurare il corretto funzionamento di tutti i blocchi
Aggiungere blocchi al tuo tema
Vai al tuo admin Shopify
Naviga su Negozio online › Temi
Clicca su "Personalizza" sul tema attivo
Aggiungi i blocchi dell'app dove vuoi che appaiano
Personalizza le impostazioni e salva
Impostazioni blocco
Tutte le impostazioni elencate sopra sono configurate nell'Editor del Tema Shopify quando selezioni il blocco. La maggior parte delle impostazioni è responsive (desktop/tablet/mobile).
Best Practices
Aggiungi Breadcrumbs ai template di prodotto e collezione
Usa blocchi di sottocategorie nelle pagine delle collezioni
Abbina lo stile del blocco al tuo tema
Testa su dispositivi mobili
Anteprima prima della pubblicazione