Modifica del codice del tema

Attenzione

Se le modifiche apportate al codice di un tema non sono compatibili con l'aggiornamento di un tema verranno rimosse nella copia aggiornata. Modifica il codice del tema solo se non è possibile effettuare le modifiche necessarie utilizzando un'app di Shopify o l'editor del tema.

Puoi modificare il codice del tema per apportare modifiche dettagliate al tuo negozio online. La maggior parte dei file che compongono un tema contengono Liquid, il linguaggio dei modelli di Shopify. I file dei temi includono anche HTML, CSS, JSON e JavaScript. Modifica il codice di un tema solo se conosci i linguaggi HTML e CSS e hai una conoscenza di base di Liquid.

Fai crescere la tua attività

Se vuoi aggiungere funzionalità o codici personalizzati ma non hai esperienza nello sviluppo di siti web con HTML, CSS e JavaScript, prendi in considerazione la possibilità di contattare un Esperto Shopify.

Prima di personalizzare il tuo tema

Prima di personalizzare il tuo tema, è opportuno eseguire le seguenti attività:

• 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.

Modifica del codice del tema

Puoi modificare il codice del tuo tema.

Procedura:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

iPhone

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

Android

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

1. Clicca su ... > Modifica codice.

L'editor di codice mostra una directory di file del tema sulla sinistra e uno spazio per visualizzare e modificare i file sulla destra.

Quando clicchi su un file nella directory a sinistra, questo si apre nell'editor di codice. È possibile aprire e modificare più file contemporaneamente. Accanto al nome di ogni file che modifichi apparirà un puntino:

Questo può aiutarti a ricordare dove hai apportato modifiche.

Ritorno a una versione precedente del tema

Se hai modificato i file del tema e hai bisogno di ripristinarli, puoi riportare i singoli file .liquid a una data e a un'ora precedenti alle modifiche.

Nota

I file che si trovano nella cartella Risorse nell'editor di codice, inclusi i file theme.scss.liquid e theme.js, non salvano le versioni modificate in precedenza. Se stai apportando modifiche ai file nella cartella Risorse, potresti dover contattare l'Assistenza per il tema o un Esperto Shopify.

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.

1. Nell'header Modelli, clicca su uno dei file .liquid che hai modificato di recente.

2. Clicca su Versione attuale sotto il file .liquid.

3. Clicca sul menu a discesa per selezionare una versione precedente. Cliccando su un indicatore di data e ora, il codice verrà riportato alla versione salvata.

4. Facoltativo: clicca su Anteprima negozio per verificare che l'errore sia stato corretto.

Theme Check

L'editor di codice include Theme Check, una funzionalità che aiuta a evitare errori fornendo un feedback immediato durante la scrittura del codice, invece di individuare errori nel tema attivo.

Nell'editor di codice Theme Check può identificare i seguenti errori nel codice modificato:

• Script di blocco parser, che possono rallentare la vetrina virtuale
• Incongruenze tra i file di traduzione, come chiavi di traduzione mancanti o traduzioni che non corrispondono in un file di impostazioni locali
• Modelli mancanti

Gli errori sono indicati da una riga rossa sotto il codice. Per visualizzare l'errore, passa con il mouse sulla riga evidenziata.

Tutorial per la personalizzazione del codice del tema

Puoi seguire i tutorial per la personalizzazione del codice del tema che ti guideranno nell'apportare modifiche al negozio online. I tutorial sono organizzati in base al tipo di pagina o funzionalità che modificano.

I tutorial per la personalizzazione del tema sono suddivisi in base alla versione della struttura del tema che utilizzano. Scopri come identificare la versione della struttura del tuo tema.

• Personalizzazione dei temi dell'Online Store 2.0
• Personalizzazione dei temi vintage

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.