Modificare il tema
Puoi modificare il tema per personalizzare i contenuti, il layout, i caratteri tipografici e i colori del tuo negozio online. Ogni tema offre sezioni e impostazioni che ti consentono di modificare il design e funzionalità del tuo negozio senza dover intervenire sul codice.
Su questa pagina
- Prima di personalizzare il tuo tema
- Editor del tema
- Accesso all'editor del tema
- Preview Inspector
- Modalità della sidebar
- Gruppi sezione
- Sezioni e blocchi
- Modelli
- Modifica nel testo dei dati personalizzati
- Visualizzare la documentazione, ricevere assistenza e controllare la versione del tema
- Ricevere assistenza per la personalizzazione
Prima di personalizzare il tuo tema
Per prepararti a personalizzare il tuo tema, completa le seguenti attività consigliate:
- Duplica il tuo tema per creare una copia di backup. Questo rende facile rimuovere le modifiche e ricominciare, se necessario.
- Assicurati di capire quale livello di assistenza è disponibile.
- Scopri requisiti e best practice per il caricamento delle immagini.
Editor del tema
L'editor del tema mostra una vista ad albero di tutto il contenuto del modello che stai attualmente visualizzando nella sidebar. Espandi un nodo di sezione con l'icona di espansione ▸ per visualizzarne i blocchi oppure comprimilo utilizzando l'icona di compressione ▾ per nasconderli. Puoi cliccare su qualsiasi sezione o blocco per visualizzarne le impostazioni.
Accesso all'editor del tema
- Dal pannello di controllo Shopify, vai su Negozio online > Temi.
- Accanto al tema che desideri modificare, clicca su Personalizza.
- Clicca su Sezioni.
Preview Inspector
Preview Inspector è una nuova funzionalità dell'editor del tema. Ti permette di accedere a sezioni e blocchi direttamente dalla finestra di anteprima e di trovare le impostazioni corrispondenti in modo più rapido e intuitivo. Con Preview Inspector puoi riordinare, nascondere o eliminare sezioni e blocchi direttamente dalla finestra di anteprima.
Preview Inspector è disponibile per tutti i temi Shopify gratuiti ed è attivato per impostazione predefinita. Puoi attivare o disattivare Preview Inspector durante la sessione di modifica.
Quando Preview Inspector è attivato, puoi cliccare su qualsiasi elemento evidenziato per aprire l'impostazione corrispondente. Su un dispositivo mobile, quando Preview Inspector è attivato, puoi cliccare su qualsiasi elemento per selezionare l'impostazione corrispondente. Puoi aprire la scheda in basso per apportare modifiche tramite questa impostazione selezionata.
Preview Inspector mostra due bordi diversi intorno alle sezioni e ai blocchi cliccati nella finestra di anteprima:
- Linea blu continua: la sezione attiva. L'impostazione corrispondente nella sidebar viene evidenziata in grigio.
- Linea blu tratteggiata: un blocco associato alla sezione. Cliccando sull'articolo nella finestra di anteprima si apriranno le impostazioni del blocco o della sezione.
Cliccando su qualsiasi punto del tuo sito web, nella finestra di anteprima verranno caricate le impostazioni corrispondenti della sidebar. Toccando due volte su un dispositivo mobile è possibile navigare sul sito come farebbe un cliente.
Aggiunta di sezioni e blocchi in Preview Inspector
Mentre utilizzi Preview Inspector, puoi aggiungere sezioni e blocchi al tema direttamente dalla finestra di anteprima. Sui dispositivi mobili, puoi aggiungere, duplicare, nascondere, spostare ed eliminare le sezioni utilizzando la modalità di modifica nella scheda in basso.
| Strumento | Description (Descrizione) |
|---|---|
| Aggiungi sezione | Il pulsante Aggiungi sezione viene visualizzato nella parte superiore e inferiore della sezione selezionata. Clicca su Aggiungi sezione per inserire una nuova sezione sopra o sotto la sezione selezionata. |
| Aggiungi blocco | Il pulsante Aggiungi blocco viene visualizzato al passaggio del mouse su un blocco esistente. Per aggiungere un blocco, clicca sull'icona +. Verrà visualizzato un menu popup con il tema e i blocchi delle app che possono essere aggiunti alla sezione selezionata. Clicca sul blocco che desideri aggiungere. La finestra delle impostazioni del nuovo blocco si carica nella sidebar di destra. |
Strumenti Preview Inspector
Con Preview Inspector puoi spostare, nascondere, duplicare o eliminare sezioni e blocchi dall'editor del tema.
| Strumento | Description (Descrizione) |
|---|---|
| Passa alla posizione successiva/precedente | Puoi spostare una sezione o un blocco nella posizione successiva o precedente utilizzando le icone della freccia in Preview Inspector. Se la sezione selezionata si trova nella parte superiore della pagina, il pulsante passa alla posizione precedente sarà grigio. Allo stesso modo, se la sezione si trova in fondo alla pagina, non puoi utilizzare il pulsante passa alla posizione successiva. |
| Duplica sezione o blocco | Clicca sull'icona Copia per duplicare una sezione o un blocco e il suo contenuto. |
| Hide section or block (Nascondi sezione o blocco) | Clicca sull'icona a forma di occhio per nascondere una sezione o un blocco. Quando una sezione o un blocco sono nascosti, non potrai mostrarli in Preview Inspector. Puoi cliccare sul pulsante Annulla nella barra home o chiudere il pannello delle impostazioni per tornare alla home dell'editor del tema, dove potrai visualizzare le sezioni o i blocchi nascosti elencati nella sidebar con l'icona a forma di occhio che non viene visualizzata. Clicca su questa icona per mostrare la sezione o il blocco. |
| Delete section or block (Elimina sezione o blocco) | Clicca sull'icona del cestino per eliminare la sezione o il blocco selezionati in Preview Inspector. |
Modalità della sidebar
L'editor del tema offre due modalità per utilizzare tutto lo spazio sullo schermo.
La Modalità a sidebar doppia è per le finestre del browser più larghe e per gli schermi più grandi, mentre la Modalità a sidebar singola è per le finestre più strette e per gli schermi più piccoli. La modalità della sidebar determina in che punto dell'editor viene visualizzato il pannello delle impostazioni.
Modalità a sidebar doppia
Se hai uno schermo di larghezza superiore a 1600 pixel e la finestra del browser è espansa completamente o fino a raggiungere almeno 1600 pixel di larghezza, saranno presenti due sidebar. Quella sulla sinistra contiene il pannello di navigazione, mentre quella sulla destra il pannello delle impostazioni.
Modalità a sidebar singola
I browser più stretti dispongono di una sola sidebar per conservare spazio per l'anteprima del tema. Quando clicchi su una sezione o su un blocco per modificarli, il pannello delle impostazioni si apre sopra il pannello di navigazione nella sidebar.
Gruppi sezione
In ogni modello di pagina le sezioni sono raggruppate nelle seguenti aree:
- Header: include header, barra degli annunci e qualsiasi app o Liquid personalizzato.
- Modello: include le sezioni che costituiscono il corpo principale della pagina. Ad esempio, le sezioni dei modelli possono includere articoli del blog, collage, elenchi delle collezioni o Liquid personalizzati.
- Footer: include footer, iscrizione alla newsletter e qualsiasi app o Liquid personalizzato.
L'header e il footer sono comuni a tutte le pagine del tuo negozio online. Ad esempio, se aggiungi un blocco Liquid personalizzato all'header, tale Liquid personalizzato verrà visualizzato su tutte le pagine di prodotto, sulla homepage e su qualsiasi altra pagina. Puoi riordinare le sezioni in base alle esigenze.
Sezioni e blocchi
Nell'elenco di sezioni e blocchi, tutti i blocchi per le sezioni di una pagina vengono visualizzati per impostazione predefinita.
Le sezioni che costituiscono l'header o il footer sono compresse per impostazione predefinita, ma puoi visualizzarle cliccando sull'icona di espansione ▸ accanto al nome della sezione.
Spostamento di sezioni e blocchi
Puoi spostare una sezione o un blocco da un'area della pagina a un'altra utilizzando l'icona ⋮⋮ per cliccare e trascinare la sezione o il blocco e rilasciarli in un'altra posizione disponibile.
Se tenti di spostare una sezione o un blocco dove non è consentito, la sezione o il blocco verranno nuovamente spostati nella posizione originale.
Rimozione delle sezioni
Dalla schermata delle impostazioni di ciascun articolo puoi eliminare una sezione o un blocco dal modello. Il pulsante Rimuovi sezione viene visualizzato nella parte inferiore delle impostazioni della sezione.
Passaggi:
- Nella sidebar dell'editor del tema, clicca sulla sezione o sul blocco che desideri rimuovere.
- Clicca su Rimuovi sezione o su Rimuovi blocco.
- Clicca su Salva. Se stai modificando un tema pubblicato, clicca su Pubblica per salvare le modifiche e renderle visibili nel negozio.
Annullamento della visualizzazione dei blocchi
Puoi nascondere le sezioni o i blocchi utilizzando l'icona a forma di occhio.
Modelli
Puoi accedere a tutti i modelli del tema dal selettore di pagina nella barra in alto dell'editor del tema.
Se utilizzi un tema per Online Store 2.0, puoi anche creare un nuovo modello direttamente dal selettore di pagina cliccando sull'opzione New template (Nuovo modello).
Anteprima del modello con risorse specifiche
Quando visualizzi un modello, puoi vedere l'anteprima del suo aspetto nel negozio con tutte le risorse compatibili. Ad esempio, se visualizzi un modello di prodotto puoi testarlo con tutti i prodotti del negozio.
Passaggi:
- Dal selettore di pagina dell'editor del tema, seleziona il modello che desideri visualizzare in anteprima.
- Nella sezione Anteprima del pannello di navigazione, clicca su Cambia.
- Dal menu Seleziona, seleziona la risorsa che desideri visualizzare in anteprima.
Annullamento e ripetizione di azioni
I pulsanti Annulla e Ripeti si trovano in alto a destra nell'editor del tema.
Modifica nel testo dei dati personalizzati
Quando lavori con dati personalizzati per creare pagine metafield, puoi modificare i metafield e i metaobject direttamente nel testo senza dover passare al pannello di controllo per apportare modifiche. Funziona per metafield di immagine, video, colore, prodotto, pagina, collezione e testo.
Passaggi:
- Seleziona nel tema un'impostazione compatibile a cui viene fatto riferimento al metaobject.
- Seleziona e modifica il valore del metafield nella voce metaobject dal pannello delle impostazioni.
- Salva il lavoro e la landing page verrà aggiornata automaticamente con le informazioni aggiornate.
Visualizzare la documentazione, ricevere assistenza e controllare la versione del tema
I link alla documentazione del tema e alle informazioni di supporto si trovano nel menu Altro ⋯ nella barra del menu, da cui puoi anche controllare la versione del tema e le informazioni relative all'autore.
Ricevere assistenza per la personalizzazione
Se ti serve aiuto per apportare modifiche al tema, puoi contattare lo sviluppatore del tema per ricevere assistenza.
Per verificare quali altre risorse sono disponibili per aiutarti con la personalizzazione del tema, consulta la sezione relativa alle risorse aggiuntive per l'assistenza con i temi.