Shopify 2.0: Come Personalizzare e Ottimizzare il Tuo Negozio Online con il Theme Editor

Shopify 2.0 porta grandi miglioramenti per chi vuole personalizzare il proprio negozio online senza conoscenze di programmazione. Il Theme Editor permette di configurare il layout del negozio, adattare i colori, i font e le sezioni di ogni pagina, come la homepage, le pagine prodotto e quelle delle categorie.

Grazie a una struttura intuitiva, puoi facilmente aggiungere o modificare contenuti, come banner promozionali, recensioni e gallerie immagini, con una semplice interfaccia drag-and-drop. La visualizzazione in tempo reale ti aiuta a vedere subito come le modifiche influenzano il design del sito.

Sommario

• 1. Introduzione al Theme Editor di Shopify 2.0
• 2. Navigare all'interno del Theme Editor
• 3. Come Funzionano i Template nel Theme Editor
• 4. Impostazioni di Base nel Theme Editor di Shopify 2.0
• 5. Impostare le Sezioni del Tema
• 6. Personalizzare la Homepage
• 7. Creare e Personalizzare Modelli
• 8. Impostazioni Avanzate: App Embeds e Lingua del Tema
• 9. Conclusione

1. Introduzione al Theme Editor di Shopify 2.0

Il Theme Editor è uno strumento centrale per personalizzare il layout del tuo negozio, tutto senza dover scrivere codice. Puoi modificare in tempo reale colori, tipografia e layout delle pagine chiave come la homepage, le pagine prodotto, le categorie o persino il blog. Il tutto con pochi clic.

Per iniziare, clicca su Personalizza nella sezione Canali di vendita > Negozio online > Temi del tuo pannello di controllo Shopify.

2. Struttura del Theme Editor

Il Theme Editor è diviso in quattro aree principali:

1. Area header: Qui puoi navigare tra diverse pagine e template e selezionare la pagina che vuoi modificare.
2. Anteprima negozio: Vedi le modifiche in tempo reale e cambia la visualizzazione tra desktop e mobile.
3. Aree principali: Queste includono Sezioni, Impostazioni tema e Embeds di App.
4. Campi dettagliati: Qui puoi fare le modifiche specifiche per i vari moduli e sezioni.

Per navigare, puoi cliccare direttamente sugli elementi dell'anteprima del negozio o usare il menu a tendina nell’header per selezionare la pagina che desideri modificare.

3. Come Funzionano i Modelli nel Theme Editor

I modelli sono la base per la progettazione e l’organizzazione degli elementi su ogni pagina. Sono delle sorte di canvas che possono essere costruiti e utilizzati per pagine come la homepage, le pagine prodotto o quelle di categoria, aggiungendo nuove sezioni o modificando quelle esistenti.

Per visualizzare, editare o creare ex novo un modello dal theme editor potete utilizzare il drop down in alto nel theme editor:

Una volta creato un template, puoi associarlo a una pagina specifica nel tuo negozio, facilitando la personalizzazione senza dover modificare tutte le pagine individualmente. Approfondiremo esattamente come fare più avanti in questo articolo.

È importante ricordare che ciò che viene modificato da theme editor andrà ad incidere su tutti gli elementi (prodotti, pagine, etc.) a cui è assegnato un determinato modello. Ogni modello del tema contiene sezioni diverse. Quando aprite per la prima volta l'editor del tema, vengono mostrate le impostazioni della home page.

4. Impostazioni di Base nel Theme Editor di Shopify 2.0

Prima di approfondire la personalizzazione delle pagine, è importante configurare le impostazioni generali del tema.

Le impostazioni principali sono:

• Colori: Imposta i colori principali del tuo brand con i codici HEX. Assicurati che la palette rispecchi il tuo brand e sia costante, ad esempio nei pulsanti, per garantire un'esperienza uniforme.
• Font: Shopify offre una vasta gamma di font per titoli e testi. Puoi anche aggiungere font personalizzati tramite codice.
• Opzioni carrello: Scegli tra carrello a pagina separata, drawer o popup. Il drawer è spesso consigliato perché ha un migliore tasso di conversione.
• Favicon: Aggiungi un'icona per rinforzare la tua brand identity.

5. Impostare le Sezioni del Tema

Dopo aver configurato le impostazioni generali, puoi iniziare a personalizzare le singole sezioni di ogni pagina. Tra queste, le sezioni di negozio globale (header, footer) sono visibili su tutte le pagine.

Le sezioni includono:

• Barra di annuncio: Puoi inserire un messaggio promozionale nella parte superiore del sito.
• Header: Personalizza il menu principale, aggiungi il logo e modifica il layout.
• Footer: Personalizza i link legali e altre informazioni rilevanti.

6. Personalizzare la Homepage

La homepage è il biglietto da visita del tuo negozio. Nel Theme Editor puoi personalizzare sezioni come:

• Banner principale: Inserisci una grande immagine con una call-to-action.
• Sezione bestseller: Mostra i prodotti più venduti.
• Sezione USP (unique selling proposition): Evidenzia i punti di forza del tuo brand con icone e brevi descrizioni.
• Categorie principali: Mostra le collezioni principali del tuo negozio
• Social media e Newsletter: Tipicamente a fondo della tua homepage, puoi inserire una galleria dei tuoi post Instagram o un form di iscrizione alla newsletter

7. Creare e Personalizzare Modelli

Ogni pagina categoria o prodotto può essere configurata per migliorare la navigazione e la conversione. Puoi creare template specifici per prodotti o categorie diversi e aggiungere sezioni come descrizioni dettagliate, recensioni clienti o immagini di alta qualità, così come per la homepage.

Tutti i temi hanno un modello predefinito per ogni tipo (collezioni, prodotti, blog, articoli di blog, pagine), che corrisponde a quello che viene utilizzato se non viene impostato esplicitamente un modello alternativo.

Qualsiasi modifica apportata a un modello inciderà su tutte le pagine che lo utilizzano. Se vuoi differenziare tra tipologie di prodotto (es. pentole e spezie), puoi creare template dedicati per ogni categoria, garantendo una presentazione su misura. La creazione di un nuovo modello da uno esistente popola automaticamente il nuovo modello con le stesse sezioni, che potete quindi modificare e rimuovere, aggiungere o nascondere come preferite, senza influire sulla visualizzazione di altri modelli di quel tipo.

Procedura:

• Utilizza il menu a discesa per selezionare un modello. Clicca su + Crea modello.
• Assegna al modello un nome univoco.
• Utilizzando il menu a discesa, seleziona il modello
  esistente su cui vuoi basare il nuovo modello.
• Clicca su Crea modello.
  

La modifica di un modello assegnato viene eseguita nel pannello di controllo Shopify. I modelli possono essere assegnati a livello di singolo elemento o a più elementi utilizzando azioni in blocco. Questa operazione viene eseguita al di fuori dell'editor del tema.

Per l’assegnazione alla singola pagina/prodotto basta aprire la scheda della pagina/prodotto e, sotto modello,  selezionare quello desiderato:

8. Impostazioni Avanzate: App Embeds e i Testi del Tema

Con Shopify 2.0, puoi integrare facilmente app tramite App Embeds nel Theme Editor. Queste applicazioni offrono sezioni o widget che puoi aggiungere direttamente al tuo tema senza bisogno di codice.

Inoltre, puoi personalizzare i testi del tema per modificare termini o messaggi predefiniti. Per farlo, accedi alle Impostazioni del Tema > Modifica contenuto tema predefinito e aggiorna i campi necessari.

Conclusione

Il Theme Editor di Shopify 2.0 è uno strumento versatile che ti permette di personalizzare ogni aspetto del tuo negozio, dalle sezioni generali a quelle specifiche di pagina. Con la sua interfaccia intuitiva, puoi creare un'esperienza d’acquisto perfetta per il tuo brand e i tuoi clienti. Se hai bisogno di supporto per configurare o personalizzare il tuo negozio, NAMA è qui per aiutarti in ogni fase del percorso!