Modifica del codice 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.

Prima di personalizzare il tuo tema

Per prepararti a personalizzare il tuo tema, completa le seguenti attività consigliate:

Modifica del codice del tema

Puoi modificare il codice del tuo tema.

Procedura:

Desktop
  1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
  2. Clicca su ... > Modifica codice.
iPhone
  1. Nell'app di Shopify tocca il pulsante .
  2. Nella sezione Canali di vendita, tocca Negozio online.
  3. Tocca Gestisci temi.
  4. Clicca su ... > Modifica codice.
Android
  1. Nell'app di Shopify tocca il pulsante .
  2. Nella sezione Canali di vendita, tocca Negozio online.
  3. Tocca Gestisci temi.
  4. 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:

La directory dei file del tema che mostra un puntino accanto ai file modificati

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.

Procedura:

Desktop
  1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
  2. Trova il tema che desideri modificare, clicca sul pulsante per aprire il menu azioni, quindi clicca su Modifica codice.
  3. Nell'header Modelli, clicca su uno dei file .liquid che hai modificato di recente.
  4. Clicca su Versione attuale sotto il file .liquid.
  5. 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.
  6. Facoltativo: clicca su Anteprima negozio per verificare che l'errore sia stato corretto.
iPhone
  1. Nell'app di Shopify tocca il pulsante .
  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.
  5. Nell'header Modelli, clicca su uno dei file .liquid che hai modificato di recente.
  6. Clicca su Versione attuale sotto il file .liquid.
  7. 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.
  8. Facoltativo: clicca su Anteprima negozio per verificare che l'errore sia stato corretto.
Android
  1. Nell'app di Shopify tocca il pulsante .
  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.
  5. Nell'header Modelli, clicca su uno dei file .liquid che hai modificato di recente.
  6. Clicca su Versione attuale sotto il file .liquid.
  7. 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.
  8. 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.

Esempio di Theme Check che rileva un errore di codice

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.

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.

Non trovi le risposte che stai cercando? Siamo qui per aiutarti.