Creazione di Template Personalizzati su Shopify: Guida Completa

Codegrind Team•Sep 05 2024

La creazione di template personalizzati su Shopify ti consente di migliorare l’aspetto e la funzionalità del tuo negozio, offrendo un’esperienza utente più coerente e personalizzata. I template personalizzati ti permettono di modificare l’aspetto delle pagine prodotto, delle collezioni, del checkout e di altre sezioni del negozio per adattarsi meglio al tuo brand e ai tuoi obiettivi di vendita.

In questa guida esploreremo come creare e gestire template personalizzati su Shopify, utilizzando il linguaggio di programmazione Liquid e altri strumenti di personalizzazione.

Cosa Sono i Template su Shopify?

I template su Shopify sono i file che definiscono l’aspetto delle diverse pagine del tuo negozio. Shopify utilizza un sistema a tema, che include file per gestire il design delle pagine prodotto, delle collezioni, della homepage, del carrello, e altre sezioni. Questi template possono essere personalizzati per offrire funzionalità e design unici per il tuo negozio.

I file dei template sono scritti principalmente in Liquid, un linguaggio di programmazione creato da Shopify che consente di inserire logica condizionale e cicli all’interno dell’HTML. Insieme a Liquid, puoi usare HTML, CSS e JavaScript per personalizzare ulteriormente il design.

Passo 1: Accesso ai Template di Shopify

Prima di creare template personalizzati, devi sapere come accedere ai file del tema esistente e capire la struttura di base dei file Liquid.

Come Accedere ai Template su Shopify:

Accedi alla Dashboard di Shopify: Vai su Shopify e accedi al pannello di controllo del tuo negozio.
Vai su Negozio Online > Temi: Dal menu principale, seleziona Negozio Online e poi clicca su Temi.
Clicca su “Azioni” e Seleziona “Modifica Codice”: Nella sezione del tema attivo, clicca su Azioni e poi su Modifica Codice. Questo ti porterà all’editor dei file del tema.
Esplora i File del Tema: Nella colonna di sinistra, vedrai una serie di cartelle contenenti i file Liquid. Le cartelle principali includono:
- Templates: Contiene i template di pagine principali come la pagina prodotto, il carrello, e le collezioni.
- Sections: Contiene le sezioni del tema che possono essere modificate e riutilizzate in diverse pagine.
- Snippets: Include piccoli blocchi di codice Liquid che possono essere richiamati in più pagine.

Da qui puoi iniziare a creare e modificare template personalizzati per il tuo negozio.

Passo 2: Creare un Template Personalizzato

Puoi creare template personalizzati per singole pagine prodotto, collezioni o altre sezioni specifiche del negozio. Questo è utile, ad esempio, se desideri creare un layout unico per una particolare categoria di prodotto o per promuovere una collezione speciale.

Come Creare un Template Personalizzato:

Vai nella Cartella “Templates”: Nell’editor del codice, apri la cartella Templates.
Crea un Nuovo Template: Clicca su Aggiungi un nuovo template nella parte superiore della pagina. Shopify ti chiederà di scegliere un tipo di template (es. prodotto, collezione, pagina, ecc.) e di assegnare un nome al nuovo template.
- Se desideri creare un template personalizzato per una pagina prodotto, seleziona Prodotto e assegna un nome descrittivo come “prodotto-speciale”.
Modifica il Codice del Template: Una volta creato il nuovo file, Shopify genererà automaticamente un template di base. Puoi iniziare a modificarlo usando Liquid, HTML, CSS e JavaScript.
- Esempio: Se desideri creare una sezione di recensioni solo per certi prodotti, puoi inserire il seguente codice Liquid:
```
{% if product.tags contains 'recensioni-speciali' %}
   <div class="recensioni">
      
   </div>
{% endif %}
```
Questo codice visualizza una sezione di recensioni solo se il prodotto ha un tag specifico.
Salva il Template: Dopo aver completato le modifiche, clicca su Salva per salvare il template personalizzato.

Assegnare un Template Personalizzato a un Prodotto o Collezione:

Vai alla Scheda Prodotti o Collezioni: Nel pannello di amministrazione di Shopify, vai su Prodotti o Collezioni e seleziona l’elemento a cui vuoi assegnare il template personalizzato.
Seleziona il Template: Nella pagina del prodotto o della collezione, trova il menu a discesa Template (sotto la sezione Organizzazione) e scegli il template personalizzato che hai creato.
Salva: Salva il prodotto o la collezione per applicare il nuovo layout personalizzato.

Passo 3: Modificare le Sezioni (Sections) del Tema

Le sezioni in Shopify sono blocchi modulari di codice che possono essere riutilizzati in più pagine. Ad esempio, puoi creare una sezione personalizzata per una promozione, un carosello di immagini o una tabella di specifiche tecniche, e poi aggiungerla a diverse pagine del negozio.

Come Creare e Modificare una Sezione Personalizzata:

Vai nella Cartella “Sections”: Nella cartella Sections, puoi trovare tutte le sezioni esistenti del tema. Clicca su Aggiungi una nuova sezione per creare una nuova sezione.

Modifica il Codice della Sezione: Inserisci il codice HTML, Liquid e CSS per la tua nuova sezione. Ad esempio, puoi creare una sezione che mostra prodotti correlati:

<section class="prodotti-correlati">
   <h2>Prodotti Correlati</h2>
   {% for product in collections['correlati'].products %}
      <div class="prodotto">
         <a href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
            <p>{{ product.title }}</p>
         </a>
      </div>
   {% endfor %}
</section>

Salva la Sezione: Dopo aver personalizzato il codice, clicca su Salva.

Aggiungere una Sezione a una Pagina:

Modifica il Template: Torna al template della pagina (come il template prodotto) e inserisci la nuova sezione dove desideri che venga visualizzata.
```
{% section 'prodotti-correlati' %}
```
Salva il Template: Una volta aggiunta la sezione al template, salva le modifiche e visualizza la pagina per assicurarti che tutto funzioni correttamente.

Passo 4: Creare e Modificare Snippets

Gli snippets sono piccoli frammenti di codice che possono essere inclusi in più pagine o sezioni del negozio. Utilizzarli consente di ridurre la ripetizione del codice e mantenere il tuo tema organizzato.

Come Creare uno Snippet:

Vai nella Cartella “Snippets”: Nell’editor del codice, clicca su Aggiungi uno snippet.
Scrivi il Codice per lo Snippet: Inserisci il codice che desideri riutilizzare in più pagine. Ad esempio, puoi creare uno snippet per un’icona di promozione:
```
<div class="icona-promozione">
   <img src="/assets/icona-sconto.png" alt="Promozione">
</div>
```
Salva lo Snippet: Una volta creato lo snippet, clicca su Salva.

Includere uno Snippet in un Template:

Per utilizzare uno snippet all’interno di un template, puoi richiamarlo usando il seguente codice:

{% include 'nome-snippet' %}

Best Practices per la Creazione di Template Personalizzati

Usa Nomi Descrittivi: Quando crei nuovi template, sezioni o snippet, utilizza nomi descrittivi che rendano facile capire il loro scopo (es. "

prodotto-speciale", “collezione-promozione”).

Fai Backup: Prima di apportare modifiche significative, assicurati di avere un backup del tema originale. Shopify non ha un sistema di versionamento integrato, quindi è importante salvare una copia dei file.
Testa su Pagine Specifiche: Dopo aver creato un template personalizzato, testalo su pagine specifiche per assicurarti che tutto funzioni correttamente prima di applicarlo a tutto il negozio.
Mantieni il Codice Pulito: Organizza il tuo codice e usa commenti per tenere traccia delle modifiche. Questo ti aiuterà a capire il codice in futuro o se devi collaborare con altri sviluppatori.

Conclusione

Creare template personalizzati su Shopify è un modo potente per personalizzare l’aspetto e le funzionalità del tuo negozio online, offrendo un’esperienza utente su misura. Che tu stia modificando le pagine prodotto, le collezioni o altre sezioni del negozio, la flessibilità di Shopify ti consente di costruire un negozio perfettamente allineato con il tuo brand. Utilizzando Liquid, HTML, CSS e JavaScript, puoi realizzare layout unici e dinamici, migliorando l’aspetto professionale e la funzionalità del tuo sito.