Modifica del codice del tema

Puoi modificare il codice del tema per apportare modifiche dettagliate al negozio online con l'editor di codice. La maggior parte dei file che compongono un tema contiene Liquid, il linguaggio dei modelli di Shopify. I file del tema contengono anche HTML, CSS, JSON e JavaScript. Modifica il codice di un tema solo se hai dimestichezza con HTML e CSS e una conoscenza di base di Liquid.

Puoi modificare il codice del tema solo dopo averlo acquistato. Questo include l'utilizzo del generatore di codice IA nell'editor del tema. Se utilizzi una versione di prova di un tema a pagamento, devi acquistarlo prima di poter apportare modifiche al codice.

L'editor di codice mostra una directory dei file del tema e uno spazio per visualizzare e modificare i file. Quando clicchi su un file nella directory, questo si apre nell'editor di codice. Puoi aprire e modificare più file contemporaneamente. Puoi anche aprire e rivedere più file contemporaneamente.

Modifica il codice del tema

Puoi utilizzare l'editor di codice per modificare i file del tema.

Passaggi:

Salvataggio delle modifiche

Quando modifichi un file, accanto al nome della scheda viene visualizzato un punto per indicare le modifiche non salvate. Clicca sul pulsante Salva per salvare le modifiche. Puoi anche digitare ⌘ + S su Mac o Ctrl + S su Windows per salvare le modifiche.

Formattazione del codice del tema

Per correggere il rientro del codice, apri la tavolozza dei comandi con ⌘ + Shift + P su Mac o Ctrl + Shift + P su Windows, digita format e quindi seleziona Formatta documento.

Passaggi:

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

2. Clicca su > Modifica codice.

3. Apri il file che vuoi formattare.

4. Digita ⌘ + P su Mac o Ctrl + P su Windows.

5. Nella tavolozza dei comandi, digita format, quindi premi Invio sulla tastiera.

6. Salva il file.

Tracciamento delle modifiche ai file

Per annullare le modifiche ai file del tema, utilizza la vista Sequenza temporale per controllare la cronologia del file e ripristinare una versione precedente. Tieni presente che le modifiche apportate su altri dispositivi non vengono visualizzate nella vista Sequenza temporale.

Passaggi:

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

2. Clicca su > Modifica codice.

3. Apri il file che vuoi rivedere.

4. Nella vista Sequenza temporale, clicca su una voce nella sequenza temporale per confrontare le differenze.

5. Per ripristinare il file a uno stato precedente, clicca con il pulsante destro del mouse sulla voce della sequenza temporale, quindi seleziona Ripristina contenuti.

6. Clicca su Ripristina.

Verifica tema

L'editor del codice include Theme Check, una funzionalità che aiuta a prevenire gli errori fornendo un feedback immediato durante la scrittura del codice, anziché individuarli nel tema attivo.

Nell'editor del codice, Theme Check è in grado di identificare i seguenti errori nel codice modificato:

• Script di blocco del parser, che possono rallentare una vetrina virtuale
• Incoerenze tra i file di traduzione, come chiavi di traduzione mancanti o traduzioni non corrispondenti in un file di impostazioni locali
• Modelli mancanti

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

Ricerca e sostituzione nell'editor del codice

Puoi effettuare una ricerca nell'editor del codice in uno dei seguenti modi:

• Ricerca nel codice di un file specifico.
• Ricerca nel codice di tutti i file del tema.

Puoi anche sostituire il codice in un file specifico o più istanze in tutti i file del tema. Puoi anche cercare un file per nome per aprire un file.

Ricerca all'interno di un file

Puoi cercare il codice in un file specifico e sostituirlo. Usa i tasti freccia per controllare ogni istanza del codice.

Dopo aver cercato il codice, puoi sostituirlo in un file.

Passaggi:

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

2. Clicca su > Modifica codice.

3. Apri il file in cui desideri effettuare la ricerca.

4. Premi ⌘ + F su Mac o Ctrl + F su Windows.

5. Nel campo Cerca, inserisci il termine di ricerca.

6. Facoltativo: per sostituire il codice, esegui i passaggi seguenti:

• Nella finestra modale di ricerca, fai clic sull'icona .
• Nel campo Sostituisci, inserisci il codice sostitutivo. Puoi fare clic su Mantieni maiuscole/minuscole per far corrispondere il formato maiuscole/minuscole del codice sostitutivo a quello dell'istanza esistente.
• Fai clic sull'icona Sostituisci per sostituire un'istanza alla volta oppure fai clic sull'icona Sostituisci tutto per sostituirle tutte contemporaneamente.

Ricerca in tutti i file

Fai clic sul pulsante di ricerca nella barra laterale sinistra per cercare in tutti i file del tema. I risultati mostrano ogni istanza del termine di ricerca e il file in cui compare.

Passaggi:

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

2. Clicca su > Modifica codice.

3. Fai clic sull'icona per aprire il pannello di ricerca.

4. Nel campo Cerca, inserisci il termine di ricerca.

5. Facoltativo: per sostituire il codice, esegui i passaggi seguenti:

• Nella finestra modale di ricerca, fai clic sull'icona .
• Nel campo Sostituisci, inserisci il codice sostitutivo.
• Sostituisci un'istanza alla volta o tutte le istanze contemporaneamente.

Opzioni di ricerca avanzate

Per restringere i risultati di ricerca, usa una o più delle seguenti opzioni di ricerca:

• Corrispondenza maiuscole/minuscole restituisce i termini di ricerca che corrispondono per l'uso di maiuscole/minuscole. Ad esempio, se inserisci prodotto, la ricerca evidenzia qualsiasi istanza di “prodotto” o “Prodotto”. Se selezioni Corrispondenza maiuscole/minuscole, la ricerca evidenzia solo le istanze di prodotto.
• Corrispondenza parola intera restituisce i termini di ricerca che corrispondono alla parola esatta ed esclude le corrispondenze parziali. Ad esempio, se inserisci cart, la ricerca evidenzia le istanze di “cart” ma non di “carton”.
• Usa espressione regolare restituisce i risultati di ricerca che corrispondono a un'espressione regolare (regex). Una regex è una stringa di caratteri che specifica uno schema di corrispondenza nel testo.

Nel pannello Cerca, puoi anche selezionare file e cartelle da includere o escludere dai risultati di ricerca.

Fai clic su per aprire il menu avanzato. Puoi inserire qualsiasi percorso di file o cartella nei campi file da includere o file da escludere. Per aggiungere più di un file o di una cartella, separali con uno spazio e una virgola. Ad esempio, per cercare i file nella cartella sections, inserisci ./sections nel campo file da includere.

Puoi anche cercare all'interno di una cartella specifica dalla vista della directory dei file. Fai clic con il pulsante destro del mouse su una cartella, quindi seleziona Trova nella cartella... dal menu a discesa.

Gestione dei file del tema

Puoi gestire i file nel codice del tema. Puoi eliminare file, aggiungere nuovi file, rinominare file e ripristinare i file modificati dalla directory dei file.

Apertura di un file del tema

Per aprire un file del tema, fai clic su una cartella, quindi fai clic sul nome del file dall'esplora file. Puoi anche cercare i file per nome o estensione e quindi aprire il file.

Passaggi:

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

2. Clicca su > Modifica codice.

3. Digita ⌘ + P su Mac o Ctrl + P su Windows.

4. Inserisci il nome del file nella barra di ricerca e seleziona il file oppure seleziona un file dall'elenco Aperti di recente.

Aggiunta di un nuovo file del tema

Per aggiungere un file, seleziona una cartella, fai clic sull'icona Nuovo file, quindi inserisci il nome e l'estensione del file.

I nomi dei file possono includere i caratteri A-Z, 0-9 e non possono includere spazi. Separa le parole con trattini o trattini bassi. L'estensione di un file è definita da un punto . e dal tipo di estensione. Ad esempio, .liquid o .css.

Passaggi:

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

2. Clicca su > Modifica codice.

3. Fai clic sulla cartella a cui desideri aggiungere un nuovo file.

4. Fai clic con il pulsante destro del mouse sul nome della cartella e seleziona Nuovo file... dal menu a discesa.

5. Inserisci un nuovo nome per il file.

6. Premi Invio sulla tastiera.

Caricamento di un nuovo asset

Puoi caricare un nuovo asset, ad esempio un'icona o un file immagine, nella cartella assets dell'editor del codice.

Passaggi:

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

2. Clicca su > Modifica codice.

3. Fai clic con il pulsante destro del mouse sulla cartella assets.

4. Fai clic su Carica....

5. Seleziona il file che desideri caricare.

6. Fai clic su Apri.

Rinomina di un file del tema

Puoi fare clic con il pulsante destro del mouse su un file per rinominarlo. Assicurati di non modificare o rimuovere l'estensione del file. L’estensione di un file è definita da un punto . e dal tipo di estensione. Ad esempio, .liquid o .css. I nomi dei file possono contenere i caratteri dalla A alla Z, i numeri da 0 a 9 e non possono contenere spazi. Separa le parole con trattini o trattini bassi. Se il nome del file non è valido, il nuovo nome non verrà salvato.

Passaggi:

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

2. Clicca su > Modifica codice.

3. Fai clic con il pulsante destro del mouse su un file e seleziona Rinomina... dal menu a discesa.

4. Inserisci un nuovo nome per il file.

5. Premi Invio sulla tastiera.

Eliminazione di un file del tema

Puoi eliminare qualsiasi file presente nel tema. I file del tema eliminati non possono essere recuperati.

Passaggi:

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

2. Clicca su > Modifica codice.

3. Fai clic con il pulsante destro del mouse su un file e seleziona Elimina definitivamente dal menu a discesa.

4. Fai clic su Elimina.