Come creare una sezione personalizzata per Shopify da zero (guida passo-passo)

Online Store 2.0 di Shopify ha trasformato il modo in cui i commercianti personalizzano i propri negozi. Con le sezioni personalizzate, è possibile creare componenti riutilizzabili e flessibili che i commercianti possono aggiungere, rimuovere e personalizzare direttamente dall'Editor del tema, senza dover modificare il codice ogni volta.

Che si tratti di creare un banner principale, una sezione FAQ, una galleria di immagini, uno slider di testimonianze o una vetrina di prodotti, comprendere lo sviluppo delle sezioni di Shopify è una competenza essenziale per ogni sviluppatore Shopify.

In questa guida vedremo l'intero processo per creare una sezione personalizzata di Shopify da zero utilizzando Liquid, HTML, CSS, JavaScript e le impostazioni dello schema di Shopify.

Perché creare sezioni personalizzate di Shopify?

Le sezioni personalizzate offrono diversi vantaggi:

• Maggiore flessibilità di design
• Prestazioni migliori del negozio rispetto a molte app di terze parti
• Personalizzazione più semplice per i commercianti
• Componenti riutilizzabili su più pagine
• Migliore esperienza utente e tassi di conversione

Per le agenzie e gli sviluppatori Shopify, le sezioni personalizzate aiutano anche a creare storefront unici che si distinguono dalla concorrenza.

Comprendere le sezioni di Shopify

Una sezione di Shopify è un blocco di contenuto modulare che può essere personalizzato tramite l'Editor del tema.

Alcuni esempi comuni includono:

• Banner principali
• Prodotti in evidenza
• Testimonianze
• FAQ
• Gallerie di immagini
• Sezioni video
• Vetrina di collezioni
• Banner promozionali

Con Online Store 2.0, le sezioni possono essere utilizzate su quasi ogni pagina, rendendo la personalizzazione del negozio più potente che mai.

Passaggio 1: creare un nuovo file di sezione

Vai su:

Negozio online → Temi → Modifica codice → Sezioni

Crea un nuovo file denominato:

custom-hero.liquid

Questo file conterrà il markup, gli stili, le impostazioni e le funzionalità della tua sezione.

Passaggio 2: creare il markup della sezione

Aggiungi il seguente codice Liquid:

<div class="ck-hero">
  <div class="ck-container">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.description }}</p>

    <a href="{{ section.settings.button_link }}" class="ck-button">
      {{ section.settings.button_text }}
    </a>
  </div>
</div>

Questo consente di controllare dinamicamente il contenuto tramite l'Editor del tema.

Passaggio 3: aggiungere gli stili

.ck-hero {
  padding: 100px 20px;
  text-align: center;
}

.ck-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.ck-button {
  display: inline-block;
  padding: 14px 28px;
  text-decoration: none;
}

L'uso di un prefisso personalizzato come ck- aiuta a prevenire conflitti CSS con temi e app.

Passaggio 4: creare le impostazioni dell'Editor del tema

Aggiungi la sezione schema:

{% schema %}
{
  "name": "Banner principale CK",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Titolo"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Descrizione"
    }
  ],
  "presets": [
    {
      "name": "Banner principale CK"
    }
  ]
}
{% endschema %}

Queste impostazioni appariranno automaticamente all'interno dell'Editor del tema di Shopify.

Passaggio 5: aggiungere blocchi dinamici

I blocchi consentono ai commercianti di creare più elementi di contenuto senza scrivere codice.

Esempio:

{% for block in section.blocks %}
  <div class="testimonial">
    <h3>{{ block.settings.name }}</h3>
    <p>{{ block.settings.review }}</p>
  </div>
{% endfor %}

Perfetto per:

• Testimonianze
• FAQ
• Membri del team
• Funzionalità
• Gallerie di immagini

Passaggio 6: aggiungere funzionalità interattive

Per slider, fisarmoniche, schede e animazioni:

document.addEventListener('DOMContentLoaded', () => {
  console.log('Sezione personalizzata caricata');
});

Per progetti più grandi, sposta il JavaScript in un file asset dedicato.

Best practice per lo sviluppo delle sezioni di Shopify

Mantieni le sezioni modulari

Crea ogni sezione per un unico scopo ed evita di combinare troppe funzionalità in un solo componente.

Ottimizza le immagini

Usa i filtri delle immagini di Shopify:

{{ image | image_url: width: 1200 | image_tag }}

Rendi tutto responsive

Testa sempre su dispositivi desktop, tablet e mobili.

Usa impostazioni significative

Organizza le impostazioni in modo chiaro affinché i commercianti possano personalizzare facilmente le sezioni.

Concentrati sulle prestazioni

Minimizza il JavaScript non necessario e ottimizza gli asset per caricamenti più rapidi.

Considerazioni finali

Le sezioni personalizzate di Shopify sono la base dello sviluppo moderno dei temi Shopify. Padroneggiando Liquid, le impostazioni dello schema, il design responsive e i componenti riutilizzabili, gli sviluppatori possono creare esperienze di storefront altamente flessibili che i commercianti possono gestire con facilità.

In CodeKanon, creiamo sezioni personalizzate di Shopify, personalizzazioni di temi e app di Shopify che aiutano i commercianti a creare negozi più veloci, coinvolgenti e orientati alla conversione.

Serve aiuto con lo sviluppo di Shopify? Contatta CodeKanon per dare vita al tuo prossimo progetto Shopify.