Configurare TOGE

TOGE è un tema per piccoli brand artigianali: una storia per ogni prodotto, note sui tessuti, foto sul campo e drop. Un tema può portare con sé solo il layout e i testi di esempio. I tuoi prodotti, le foto, i menu e i metacampi vivono nel tuo negozio, quindi un'installazione appena fatta sembra vuota. Questa guida spiega cosa aggiungere, nell'ordine che fa più differenza.

Tutto ciò che segue si fa nel pannello di controllo di Shopify. Non serve scrivere codice. Quando un passaggio è un'operazione normale di Shopify, questa guida rimanda al Centro assistenza Shopify invece di ripeterlo.

1. Parole usate in questa guida

Parola	Significato
Editor del tema	La schermata in cui modifichi le impostazioni e i contenuti del tema: Negozio online → Temi → Personalizza.
Sezione	Una fascia di una pagina nell'editor del tema (hero, novità, footer…). Ognuna ha le sue impostazioni.
Template	Il layout usato da una pagina. TOGE include template per le pagine Chi siamo, Assistenza, Contatti e per le politiche. Il template di una pagina si sceglie nell'editor della pagina, in "Modello del tema".
Handle	L'ultima parte dell'URL di una pagina o di una collezione, come `about-us`. Shopify lo ricava dal titolo; puoi cambiarlo nel riquadro "Inserzione nei motori di ricerca" dell'editor della pagina. Il tema trova alcune pagine tramite l'handle.
Metacampo	Un campo aggiuntivo che aggiungi a prodotti, collezioni o articoli del blog, in Impostazioni → Dati personalizzati. Il tema ne legge alcuni.
Metaoggetto	Un record che definisci tu, con i suoi campi, a cui i prodotti possono fare riferimento. TOGE ne usa uno per i tessuti.
Drop	L'uscita di un prodotto in una data stabilita. Prima di quella data, la pagina del prodotto mostra la data al posto del pulsante del carrello.

2. I primi dieci minuti

Carica il tema: Negozio online → Temi → Aggiungi tema → Carica file zip. Tienilo non pubblicato finché la home page non ha l'aspetto giusto; "Personalizza" ti permette di vedere l'anteprima di un tema non pubblicato.
Logo: Editor del tema → Header. Carica l'immagine del logo, oppure lascia vuoto per mostrare il nome del negozio come testo. (Il simbolo della montagna sulla home page è il logo di TOGE. Per sostituirlo, modifica snippets/logo.liquid o disattiva "Logo sull'immagine" nella sezione Hero.)
Menu principale: Contenuti → Menu → Menu principale. L'header mostra il menu scelto nella sezione Header (predefinito: main-menu). I menu annidati si aprono come menu a discesa, fino a tre livelli.
Hero della home page: Editor del tema → Hero. Aggiungi una foto larga (2:1, 2400 px di larghezza bastano). Aggiungi una foto 4:5 separata per gli smartphone se il ritaglio non va bene. Se la foto è chiara, imposta "Colore del testo sulla foto" su Inchiostro.

Questo basta già per avere un negozio dall'aspetto finito.

3. Impostazioni del tema

Editor del tema → Impostazioni del tema. Valgono ovunque.

Impostazione	Cosa fa
Colori	Due schemi di colori: lo schema 1 è chiaro, lo schema 2 è scuro. Sezioni come la fascia della newsletter ne scelgono uno. Ogni schema ha i colori di sfondo, testo, bordi, superficie, accento, link e pulsanti.
Tipografia	Font del corpo del testo e font dei titoli. Ognuno viene caricato con i pesi normale, medio e grassetto. Funziona qualsiasi font di Shopify.
Layout	Larghezza massima della pagina e margine ai lati.
Raggio degli angoli dei campi	Arrotondamento degli angoli di campi e pulsanti.
Favicon	La piccola icona nella scheda del browser. Quadrata, 32 px o più.

4. Menu e pagine che il tema cerca

Il footer e le pagine di assistenza trovano le cose tramite l'handle. Creale con questi handle e compaiono da sole. Se le ometti, quella parte semplicemente non viene mostrata.

Cosa	Dove	Handle
Colonne di menu nel footer	Contenuti → Menu	qualsiasi menu; si scelgono in Footer → blocchi
Journal	Articoli del blog	blog `news`
Pagina Chi siamo	Pagine, template `page.about`	`about-us`
Pagina Assistenza	Pagine, template `page.support`	`support`
Pagina Contatti	Pagine, template `page.contact`	`contact`
Pagine legali mostrate nel footer	Impostazioni → Politiche	Privacy, Termini, Rimborso, Spedizione
Pagine legali aggiuntive (Giappone)	Pagine, template `page.policy`	`tokushoho`, `cancellation`

Per creare una pagina, vai in Negozio online → Pagine → Aggiungi pagina. Dalle un titolo, scegli il template in "Modello del tema" sulla destra e controlla l'handle in "Inserzione nei motori di ricerca".

Le pagine legali provengono da Impostazioni → Politiche; il footer rimanda a quelle che hai compilato.

tokushoho e cancellation sono pagine che la legge giapponese richiede ai negozi online. Se non vendi in Giappone, saltale. Il template page.policy mostra qualsiasi pagina con lo stesso stile delle politiche.

Le pagine Chi siamo, Assistenza e Contatti sono costruite con le sezioni, quindi i loro testi e le foto si modificano nell'editor del tema, non nella pagina stessa. Il modulo di contatto invia all'indirizzo email del mittente del negozio. La fascia della newsletter aggiunge gli iscritti a Clienti con il tag newsletter.

5. Home page

Sezione	Cosa le serve
Hero	Una foto (vedi sopra). Titolo, testo introduttivo e link sono impostazioni della sezione.
Collezione in evidenza (fascia)	Collezioni con il metacampo Mostra in evidenza nella home attivo (vedi §8). Con una sola collezione è una fascia fissa; con due-cinque diventa un carosello. Senza nessuna, la sezione usa le proprie impostazioni di testo e foto.
Novità	Scegli una collezione nella sezione. Tre prodotti su desktop, quattro su smartphone.
Storia	Una foto, o un breve video in loop (mp4 caricato in Contenuti → File; viene riprodotto senza audio). Il testo sta sopra l'immagine; disattiva "Testo sopra l'immagine" per metterlo sotto.
Journal	Scegli il blog. Gli ultimi tre articoli.
Visti di recente	Si riempie da solo dal browser del visitatore. Niente da impostare.

Puoi aggiungere altre sezioni alla home page con "Aggiungi sezione": Prodotto in evidenza (un prodotto con le sue foto, opzioni e pulsante del carrello), FAQ, Guida all'assistenza, Modulo di contatto, e un'altra Storia, Collezione in evidenza, Novità o Journal. La fascia della newsletter fa parte del footer, quindi compare su ogni pagina.

6. Prodotti

La pagina del prodotto funziona con un prodotto semplice: titolo, prezzo, foto, opzioni. Ogni voce qui sotto aggiunge una parte in più alla pagina. Tutto è facoltativo e la pagina nasconde ciò che è vuoto.

Cosa c'è nella pagina

Dall'alto: foto principale e frase di richiamo → nome, opzioni, prezzo, carrello e la fisarmonica dei dettagli → Da abbinare → Foto del prodotto → Storia → capitolo del tessuto → Nota → foto sul campo → Prodotti correlati → Visti di recente. Tutto da "Da abbinare" in giù è una sezione a sé nell'editor del tema, quindi puoi riordinarla o rimuoverla.

La sezione Pagina del prodotto ha le impostazioni che controllano la parte superiore:

Blocco Colore e taglia: quale opzione è il colore e quale la taglia (vedi sotto), la soglia di "Ultimi pezzi", l'etichetta della taglia e una pagina della guida alle taglie.
Blocco Quantità: quantità massima per ordine (0 significa nessun limite) e una nota sotto il campo.
Blocco Carrello: pulsanti di checkout dinamico (Shop Pay e simili) e il modulo destinatario per le carte regalo.
Blocchi Fisarmonica: ognuno è una riga nei dettagli. Una riga può mostrare una politica del negozio, la descrizione del prodotto, la guida alla cura, la tabella delle taglie o il materiale e l'origine.

Opzioni e foto

Colore e taglia vengono individuati per posizione, non per nome, quindi l'opzione può chiamarsi Colore, Color o カラー. Imposta "Posizione dell'opzione colore" e "Posizione dell'opzione taglia" (da 1 a 3) nella sezione Pagina del prodotto se le tue sono diverse da 1 e 2.
Una terza opzione (lunghezza, vestibilità…) viene mostrata anch'essa come pulsanti. Niente da impostare.
Le tessere dei colori usano la foto della prima variante di ogni colore (verticale 4:5, 1080 × 1350 va bene). Assegna la stessa foto a tutte le varianti di un colore.
Foto principale: l'immagine grande in alto è il metacampo custom.hero_image, altrimenti la prima foto del prodotto. È pensata come l'immagine del "mondo" del prodotto, non come uno scatto di prodotto.
Galleria: le foto del prodotto non usate come tessere dei colori vengono disposte sotto la storia. Anche i video, i link di YouTube e Vimeo e i modelli 3D aggiunti al prodotto compaiono lì.

Metacampi letti dalla pagina del prodotto

Creali in Impostazioni → Dati personalizzati → Prodotti → Aggiungi definizione. Dai alla definizione il nome che vuoi; quello che deve corrispondere sono namespace e chiave (scrivili come namespace.chiave nel modulo della definizione) e il tipo. Una volta creata la definizione, ogni prodotto ha un campo per essa in fondo alla sua pagina di modifica.

Namespace.chiave	Tipo	Mostrato come
`descriptors.subtitle`	Testo a riga singola (standard)	La frase di richiamo in una riga sotto la foto principale
`descriptors.care_guide`	Testo multiriga (standard)	"Cura" nella fisarmonica dei dettagli
`custom.hero_image`	File (immagine)	Foto principale in alto; anche la foto al passaggio del mouse sulle schede prodotto
`custom.hero_video`	File (video)	Riprodotto al posto della foto principale, senza audio, in loop
`custom.gender`	Testo a riga singola	Piccola etichetta accanto al nome del prodotto. Rimanda alla collezione con lo stesso handle, se quella collezione contiene prodotti
`custom.gender_collection`	Riferimento a collezione	Dove rimanda invece l'etichetta, se gli handle sono diversi
`spec.material`	Testo a riga singola	"Materiale" nei dettagli
`spec.origin`	Testo a riga singola	"Prodotto in" nei dettagli
`spec.size_table`	Testo multiriga	Tabella delle taglie. Una riga per linea, celle separate da `\|`. La prima linea è l'intestazione: `Taglia \| Lunghezza \| Torace \| Manica`, poi `S \| 66 \| 50 \| 20`. Viene stampata così com'è, non trasposta
`color.names`	Testo a riga singola	Nomi visualizzati dei colori, come coppie `CODICE:Nome` separate da `\|`: `SUMI:Inchiostro\|SAND:Sabbia`. Il codice è il valore dell'opzione
`drop.mode`	Testo a riga singola	`pre` per un drop non ancora aperto: il carrello è nascosto e al suo posto compare il pannello "avvisami"
`drop.next_at`	Data	Data del prossimo drop, mostrata nel pannello "avvisami"
`drop.label`, `drop.qty`, `drop.note`	Testo a riga singola	Etichetta del pulsante e breve riga sotto di esso prima di un drop
`drop.end_variants`	Testo a riga singola	Combinazioni fuori produzione come `Colore / Taglia`, separate da `\|`: `SAND / XS\|SAND / XL`
`nav.parent`	Testo a riga singola	Handle della collezione da mostrare nel percorso di navigazione (vedi sotto)
`story.gallery`	Elenco di file (immagini)	Foto "sul campo": la striscia orizzontale di scatti lifestyle
`story.fabric`	Riferimento a metaoggetto → Tessuto	Il capitolo del tessuto (vedi §7)

La maggior parte di questi esiste anche come impostazione della sezione Pagina del prodotto (Immagine principale, Frase di richiamo, A destra del titolo (genere), Materiale, Prodotto in, Nomi dei colori, Combinazioni fuori produzione, Stato della vendita). L'impostazione della sezione vale per tutti i prodotti e il metacampo la sostituisce, quindi un negozio con uno o due prodotti può fare del tutto a meno dei metacampi.

Il percorso di navigazione sopra il nome del prodotto viene deciso in quest'ordine: tag bread1-apparel, bread2-tops (il tema cerca collezioni con gli handle apparel e tops; senza di esse le parole sono mostrate senza link) → il metacampo nav.parent → la prima collezione a cui appartiene il prodotto. Il tag bread1- decide anche quali prodotti compaiono in "Prodotti correlati".

La storia vera e propria è la descrizione del prodotto. Titoli (h3), paragrafi e immagini sono tutto ciò che le serve; il tema aggiunge a destra l'indice ricavato dai titoli.

7. Capitolo del tessuto (metaoggetti)

Il capitolo del tessuto è una parte della pagina del prodotto che racconta la storia di un tessuto: nome e testo introduttivo, una riga di numeri grandi (peso, spessore…), foto del dritto e del rovescio, tre passaggi "come funziona" e grafici di confronto. È un metaoggetto per ogni tessuto, condiviso tra i prodotti. Solo il nome è obbligatorio; ogni altra parte compare quando il suo campo è compilato.

Crea le definizioni in Impostazioni → Dati personalizzati → Metaoggetti con queste chiavi dei campi. I nomi e il nome della definizione stessa possono essere qualsiasi; il tema segue il riferimento story.fabric del prodotto e legge i campi tramite la chiave. Crea prima le definizioni piccole, perché quelle più grandi vi fanno riferimento: Riga tessuto → Grafico tessuto, Passaggio tessuto, Statistica tessuto → Tessuto.

Tessuto (quello che colleghi ai prodotti)

Chiave	Tipo
`name`, `eyebrow`, `headline`	Testo a riga singola
`lead`	Testo RTF
`stats`	Elenco di Statistica tessuto
`views_heading`, `views_note`, `face_title`, `face_tag`, `back_title`, `back_tag`	Testo a riga singola
`views_body`, `face_body`, `back_body`	Testo RTF
`face_image`, `back_image`	File (immagine)
`how_heading`	Testo a riga singola
`how_body`	Testo RTF
`steps`	Elenco di Passaggio tessuto
`charts`	Elenco di Grafico tessuto
`note`	Testo multiriga

Statistica tessuto: value, unit, label, prefix (tutti a riga singola). Mostrata come la riga dei numeri grandi, es. value 90, unit g/㎡, label Peso.

Passaggio tessuto: image (file), title (riga singola), body (testo RTF). Tre passaggi formano la striscia "come funziona".

Grafico tessuto: title (riga singola), body (testo RTF), axes (elenco di riga singola), rows (elenco di Riga tessuto), note (riga singola). Con axes compilato, il grafico è una tabella di valutazione a cinque punti; senza, sono barre orizzontali.

Riga tessuto: label (riga singola), value (decimale), display (riga singola, cosa stampare al posto del valore grezzo, es. circa 30 min), scores (elenco di interi, uno per asse, da 1 a 5), highlight (booleano, contrassegna il tuo tessuto).

I grafici si animano quando entrano nella visuale. I numeri contano da zero.

8. Collezioni

In Impostazioni → Dati personalizzati → Collezioni:

Namespace.chiave	Tipo	Mostrato come
`toge.home_feature`	Vero/falso	Mette questa collezione nella fascia in evidenza della home
`toge.feature_heading`	Testo a riga singola	La riga grande sulla fascia e in cima alla pagina della collezione
`toge.feature_image`	File (immagine)	Foto della fascia, se diversa dall'immagine della collezione
`toge.feature_video`	File (video)	Riprodotto sulla fascia al posto della foto
`nav.parent`	Testo a riga singola	Handle della collezione principale, per il percorso di navigazione (`all` per "tutti i prodotti")

La descrizione della collezione è il breve testo sotto il titolo. Filtri, ordinamento e numero di prodotti per pagina sono impostazioni della sezione Collezione.

9. Barra degli annunci

La barra in cima alla pagina è guidata dagli articoli del blog, così puoi scrivere, programmare e ritirare gli annunci come qualsiasi articolo.

In Impostazioni → Dati personalizzati → Articoli del blog, crea toge.announce (vero/falso) e toge.announce_text (testo a riga singola).
Nell'articolo, attiva announce. La barra mostra announce_text, oppure il titolo dell'articolo, e rimanda all'articolo.
Vince l'articolo più recente con il flag attivo. Senza nessuno, non c'è barra.

I visitatori possono chiudere la barra. Resta chiusa per sette giorni, o finché il testo non cambia.

10. Cose che compaiono da sole

Queste parti del tema seguono le impostazioni del tuo negozio. Nel tema non c'è niente da impostare.

Parte	Compare quando
Selettore di paese e lingua (footer)	Il negozio ha più di un mercato o di una lingua
"Tasse incluse" accanto ai prezzi	I prezzi includono le tasse (Impostazioni → Imposte e dazi).
Nota sulla spedizione sotto il prezzo	Il mercato ha un metacampo `custom.shipping_note` (testo o importo)
Disponibilità del ritiro nella pagina del prodotto	Una sede offre il ritiro locale e il prodotto è disponibile lì.
Pagamento a rate con Shop Pay	Il negozio è idoneo per Shop Pay Installments
Modulo destinatario della carta regalo	Il prodotto è una carta regalo.
Follow on Shop (footer)	Shop Pay è attivo e l'impostazione "Mostra Follow on Shop" nella sezione Footer è attiva
Icona dell'account nell'header	Gli account cliente sono attivi (Impostazioni → Account cliente)
Suggerimenti di ricerca durante la digitazione	La lingua del negozio è tra quelle supportate dalla ricerca predittiva di Shopify (il giapponese non ancora)

11. Dimensioni delle immagini

Dove	Dimensioni
Hero della home	2:1, 2400 px di larghezza. Gli smartphone la ritagliano a 4:5, oppure usano l'immagine separata per mobile
Storia della home	2:1, 2400 px di larghezza. Gli smartphone la ritagliano a 4:5
Fascia della collezione in evidenza	16:9, 1600 px di larghezza o più. Gli smartphone la ritagliano a 4:3
Foto principale del prodotto (`custom.hero_image`)	3:2, 2000 px di larghezza. Gli smartphone la ritagliano a 4:5
Foto delle varianti (tessere dei colori)	4:5, 1080 × 1350. Le schede prodotto e la galleria mostrano il 4:5; la tessera del colore ritaglia un quadrato al centro
Foto del prodotto (galleria)	4:5
Foto sul campo (`story.gallery`)	2:3, verticali
Dritto e rovescio del tessuto	Qualsiasi, ma la stessa forma per entrambe; 1200 px di larghezza
Passaggi del tessuto	Disegni su sfondo bianco; il bianco si fonde con la pagina
Immagine dell'articolo del blog	4:3 nell'elenco del journal, 1600 px di larghezza o più
Favicon	Quadrata, 32 px o più

Shopify ridimensiona tutto per ogni schermo, quindi più grande va bene.

12. Lingue

Tutti i testi di esempio del tema sono in inglese. Le etichette del tema (pulsanti, carrello, ricerca) e l'editor del tema sono forniti in inglese, giapponese, tedesco, francese, spagnolo, portoghese (Brasile), italiano, cinese tradizionale, cinese semplificato e coreano; il negozio segue la lingua impostata.

I tuoi contenuti, come i testi delle sezioni, i prodotti e le pagine, si traducono con l'app gratuita Translate & Adapt di Shopify. App

13. Aggiornare il tema

Quando esce una nuova versione, Negozio online → Temi mostra un avviso di aggiornamento sul tema. L'aggiornamento mantiene le impostazioni dell'editor del tema e i contenuti. Le modifiche al codice del tema non vengono mantenute, quindi annota le modifiche che hai fatto prima di aggiornare.

14. Cosa il tema non include

Foto e video. I temi Shopify non possono includere contenuti multimediali, e le foto della demo sono concesse in licenza solo alla demo. Dove manca una foto vedi un disegno segnaposto grigio.
Prodotti, articoli, pagine, definizioni dei metacampi. Sono dati del negozio. Questa guida elenca tutto ciò che il tema può usare.
App. Non ne servono. Translate & Adapt serve solo per altre lingue; un'app di abbonamenti solo se vendi abbonamenti.