Come creare la tua prima sezione tematica Shopify

Dare ai tuoi clienti il ​​controllo creativo è fondamentale, specialmente quando vogliono la possibilità di personalizzare la loro vetrina. La funzionalità delle sezioni di Shopify è un potente strumento per personalizzare i temi di Shopify, quindi utilizzarli in modo efficiente e seguire le migliori pratiche sbloccherà una gamma di opzioni per i tuoi clienti.

Se stai creando un tema Shopify da zero o modificando un tema per un cliente, dovrai creare diversi tipi di sezioni, che varieranno a seconda del contesto. Inoltre, i clienti si aspettano un'esperienza user-friendly e intuitiva, il che significa che la sezione giusta, nel posto giusto, può avere un enorme impatto sulla conversione.

In questo articolo, tratteremo come iniziare a creare diversi tipi di sezioni tematiche e le regole per utilizzarle, in modo che tu possa aiutare i tuoi clienti a personalizzare il loro negozio. Esploreremo anche alcuni esempi di sezioni specifiche dal nostro tema Dawn disponibile in origine, per dimostrare esattamente come puoi usarli in scenari del mondo reale.

Cosa sono le sezioni tematiche?

Ad alto livello, le sezioni sono componenti modulari di un tema Shopify che i commercianti possono personalizzare. Le sezioni contengono contenuti e impostazioni per aree specifiche di un negozio Shopify, come gli elementi di base di una pagina prodotto o un componente di presentazione.

All'interno di queste sezioni, gli sviluppatori hanno accesso a una gamma di diversi tipi di impostazioni, da input di testo e selettori di immagini, a HTML e menu personalizzati, che i commercianti possono personalizzare dall'editor del tema e popolare con il loro contenuto.

Le sezioni sono contenute all'interno della directory /sections di un tema e possono essere incluse staticamente nei file di layout di un tema (come l'intestazione e il piè di pagina), oppure possono essere aggiunte dinamicamente a qualsiasi modello dall'editor del tema. Per avere un'idea dei vari componenti che possono essere rappresentati come sezioni, puoi esplorare la directory /sections del tema Dawn.

Con il lancio dell'Online Store 2.0, le sezioni possono ora essere utilizzate come metodo principale per organizzare tutti i diversi aspetti del tema, da intere pagine a singoli elementi. Come tratteremo in questo articolo, la possibilità di aggiungere sezioni a qualsiasi modello JSON ti consentirà di organizzare facilmente pagine diverse, che possono essere ulteriormente migliorate quando i commercianti personalizzano il loro tema.

Modelli e sezioni

Uno dei prerequisiti per apprendere come funzionano le sezioni sui temi di Shopify è comprendere il sistema dei modelli di tema di Shopify. Con Online Store 2.0, ogni tipo di pagina può essere rappresentato come un file .json all'interno della directory /templates di un tema. Gli sviluppatori possono strutturare ogni tipo di pagina definendo quali sezioni appariranno per impostazione predefinita in questi file modello JSON.

Questi modelli JSON non includono markup o oggetti Liquid per la visualizzazione del contenuto del negozio, sono semplicemente file di dati che indicano quali sezioni appariranno per impostazione predefinita su una pagina e in quale ordine.

Un esempio di base di come potrebbe apparire un file modello product.json sarebbe:

In questo caso, una pagina prodotto verrebbe visualizzata con una sezione chiamata main-product.liquid , e sarebbe l'unica sezione che appare per impostazione predefinita. Quando un commerciante personalizza questa pagina e aggiunge più sezioni alla pagina, il file modello product.json viene aggiornato con queste informazioni. Esploreremo maggiormente questo processo in questo articolo quando esamineremo come le sezioni sono incluse nei modelli.

Nozioni di base sulle sezioni

Quando sviluppi il tuo tema utilizzando sezioni e modelli JSON, puoi prendere in considerazione la creazione di file di sezione in due categorie distinte: sezioni della pagina "principale" e singoli componenti modulari.

Sezioni della pagina principale

All'interno di una sezione della pagina principale, dovresti includere tutto il contenuto predefinito per quella pagina. Ad esempio, nella sezione principale della pagina di un prodotto, dovresti includere gli elementi importanti per visualizzare un prodotto e le sue proprietà associate come il titolo del prodotto, la descrizione, i media, il prezzo e il modulo di aggiunta al carrello.

Puoi accedere a variabili Liquid, o oggetti, all'interno di una sezione, in base al modello di pagina in cui è inclusa una sezione. Ciò significa che una sezione che verrà visualizzata all'interno di un modello product.json sarà in grado di accedere a qualsiasi attributo del product Liquid oggetto, che rappresenta il prodotto la cui pagina viene visualizzata.

Analogamente, una sezione inclusa in un file collection.json sarà in grado di accedere a tutti gli attributi dell'oggetto Liquid della collection . Tutte le sezioni, indipendentemente da dove appaiono, possono accedere a qualsiasi oggetto globale Liquid.

Oltre al markup e agli oggetti Liquid specifici della pagina che aggiungerai a una sezione della pagina principale, puoi anche creare impostazioni all'interno dei tag {% schema %} . Queste impostazioni possono fare riferimento a elementi nella sezione e possono essere configurate dai commercianti nell'editor del tema.

Poiché una sezione della pagina principale include il markup specifico per un tipo di pagina, ti consigliamo di includerlo solo all'interno del relativo modello associato. Per evitare che una sezione della pagina principale venga aggiunta ad altri tipi di pagina dall'editor del tema, non dovrebbe contenere preimpostazioni all'interno del suo schema di sezione.

Per visualizzare un esempio di una sezione della pagina principale, puoi esplorare il file main-product.liquid nella directory /sections di Dawn, o una qualsiasi delle sezioni che hanno il prefisso main nel titolo. Come regola generale, dovresti anche denominare le sezioni della tua pagina principale con main nel titolo per aiutarti a distinguere tra diversi tipi di sezioni.

Sezioni modulari

Le sezioni modulari sono sezioni che possono essere riutilizzate in diverse aree di un negozio online e integrano gli elementi principali di una pagina. Esempi di questi tipi di sezioni includono raccolte in primo piano, presentazioni e moduli di iscrizione alla newsletter.

Queste sezioni vengono generalmente aggiunte alle pagine dai commercianti utilizzando l'editor del tema, piuttosto che le sezioni aggiunte per impostazione predefinita a un modello di pagina. Affinché una sezione possa essere aggiunta a una pagina tramite l'editor, la sezione deve contenere preimpostazioni all'interno del suo schema. Una volta aggiunti questi preset, la sezione sarà un'opzione disponibile quando il commerciante fa clic su Aggiungi sezione nell'editor del tema.

A differenza delle sezioni della pagina "principale", le sezioni modulari in genere contengono contenuti e markup che possono essere riutilizzati in diversi tipi di pagina e in diversi contesti su un negozio Shopify. Gli sviluppatori dovrebbero quindi evitare di fare affidamento su oggetti Liquid specifici della pagina all'interno di queste sezioni.

È possibile, tuttavia, limitare la disponibilità di una sezione solo su tipi di pagina specifici utilizzando l'attributo templates all'interno dello schema della sezione. Ad esempio, se desideri limitare una sezione solo alle pagine dei prodotti e delle collezioni, devi includere questa riga all'interno dei tag schema della sezione:

 "templates": ["product", "collection"]

L'attributo templates accetta un elenco di stringhe che rappresentano il tipo di pagina.

In base alle funzionalità che desideri includere nel tuo tema o ai requisiti specifici del tuo cliente, probabilmente creerai una gamma di sezioni diverse che abilitano funzionalità uniche. Per visualizzare esempi di sezioni modulari, puoi esplorare la sezione newsletter o la sezione rich text utilizzata in Dawn.

Impostazioni della sezione

Abbiamo esaminato brevemente come utilizzare le impostazioni di un file di sezione per creare opzioni di personalizzazione a cui i commercianti possono accedere, ma analizziamole un po' più a fondo per vedere come sono strutturate.

Come abbiamo visto, le impostazioni sono incluse all'interno dei file di sezione, all'interno dei tag {% schema %} , che denotano che si tratta di impostazioni che dovrebbero essere visualizzate nell'interfaccia utente dell'editor del tema. Un esempio molto semplice di ciò potrebbe essere visto con una sezione di testo personalizzata che potrebbe assomigliare a:

In questo esempio abbiamo due elementi HTML: un elemento di intestazione e un elemento di paragrafo. Ciascuno di questi elementi contiene contenuti dinamici che abbiamo creato con l'oggetto section.settings Liquid. Questo oggetto sezione ci consente di recuperare i valori delle impostazioni facendo riferimento all'ID univoco dell'impostazione.

Sotto il markup HTML e Liquid abbiamo le nostre impostazioni di sezione, contenute nei nostri tag {% schema %} . Ogni impostazione è rappresentata da un oggetto, dove possiamo definire l'impostazione id , il suo type e come apparirà nell'editor. Per accedere all'impostazione di una sezione in Liquid, aggiungi il suo id all'oggetto liquid section.settings . Definiamo anche il tipo di impostazione e come apparirà nell'editor del tema.

All'interno delle impostazioni dei nostri tag schema:

• id si riferisce alla variabile Liquid in fase di definizione
• type definisce il tipo di output che stiamo creando
• label fornisce il contesto visualizzato nell'editor del tema
• default assegna un valore predefinito

In questo esempio, ho creato una casella di text per la nostra intestazione e una casella richtext per il nostro corpo, ma è possibile aggiungere un'ampia gamma di tipi di output, a seconda delle esigenze del cliente. Altri tipi di input validi includono image_picker , radio , video_url e font_picker .

Questo esempio è ora una sezione valida, tuttavia ci manca un aspetto chiave: determinare dove apparirà esattamente la sezione sul tema. In seguito esploreremo alcuni approcci diversi per includere le sezioni, ma per ora consentiremo l'aggiunta della sezione tramite l'editor del tema a qualsiasi pagina creando preimpostazioni nella sezione.

I preset sono configurazioni predefinite delle sezioni e vengono aggiunti all'interno dei tag {% schema %} di una sezione. Nel nostro semplice esempio, i preset potrebbero apparire come:

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Una volta aggiunta al nostro esempio, la sezione della casella di testo personalizzata sarebbe simile a:

Ora, se passiamo all'editor del tema e selezioniamo Aggiungi sezione su qualsiasi pagina, questa sezione apparirà come opzione disponibile. Le impostazioni della sezione che abbiamo creato appariranno sulla barra laterale destra con le etichette e il testo predefinito che abbiamo aggiunto e possiamo popolare le impostazioni del testo di input, che verranno visualizzate nella nostra sezione.

Questo è un semplice esempio che mostra la relazione tra le impostazioni della sezione e le variabili che puoi creare all'interno delle sezioni, nonché il modo in cui queste vengono visualizzate nell'editor del tema. Per un modello più avanzato puoi esplorare la sezione rich text del tema Dawn.

Comprese le sezioni sulle pagine

Come abbiamo già accennato, esistono numerosi metodi per includere sezioni nelle pagine di un tema. Esploriamo ciascuno di questi approcci individualmente e scompattiamo alcune delle regole che si applicano ad essi.

1. Includere sezioni nei modelli JSON

Quando abbiamo esaminato le sezioni della pagina principale, abbiamo visto che i file modello JSON accettano una proprietà "main" , che diventa la sezione predefinita per quel tipo di pagina e dovrebbe includere tutti gli elementi di contenuto importanti per quella pagina.

Oltre a una sezione "main" , è anche possibile includere altre sezioni in un modello JSON che appariranno per impostazione predefinita su quel tipo di pagina. Se utilizziamo un modello JSON di prodotto come esempio, potremmo includere una sezione di consigli sui prodotti nella pagina aggiungendo un nuovo oggetto sotto la sezione "main" :

In questo caso stiamo assegnando un nome alla sezione, recommendations e la proprietà type viene utilizzata per identificare quale file nella directory /sections vogliamo includere.

Poiché questo modello JSON fa riferimento a più di una sezione, è necessario definire in che modo le sezioni vengono visualizzate in sequenza, all'interno dell'oggetto order . A ogni sezione inclusa in un modello JSON dovrà essere assegnato un ordine predefinito, tuttavia i commercianti possono comunque riorganizzare le sezioni nell'editor del tema.

Le sezioni senza preimpostazioni aggiunte ai modelli JSON non possono essere rimosse nell'editor del tema, ma possono essere nascoste se un commerciante non le richiede. Per un esempio reale di come organizzare le sezioni in un modello JSON, puoi esplorare il modello di prodotto Dawn.

2. Includere sezioni come opzioni su tutte le pagine

Come abbiamo visto con il nostro testo personalizzato, è possibile rendere disponibile una sezione su tutte le pagine di un tema quando i presets sono presenti all'interno delle impostazioni schema .

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Se incluse utilizzando questo approccio, queste sezioni possono essere aggiunte, riposizionate ed eliminate dall'editor del tema. Queste sezioni possono anche essere limitate a pagine specifiche con la proprietà templates .

Questa funzionalità di trascinamento della selezione significa che quando crei sezioni dinamiche personalizzate, verrà sbloccata un'ampia gamma di opzioni per personalizzare i negozi. Puoi creare sezioni mobili per video, prodotti o gallerie di immagini. Un buon esempio di una sezione che utilizza questo metodo sarebbe la sezione della newsletter di Dawn.

3. Utilizzo dei tag {% section %} per aggiungere sezioni statiche

Il tag section Liquid consente di eseguire il rendering di una sezione dalla directory /sections in un layout Liquid o in un file modello. Questo tag potrebbe apparire come:

 {% section 'header' %}

Le sezioni aggiunte utilizzando questo tag di section non possono essere rimosse, riposizionate o nascoste nell'editor del tema. La posizione di questa sezione sulla pagina è bloccata, in base a dove è stata aggiunta all'interno di un file di layout o modello.

Questo approccio è più comunemente utilizzato per contenuti e componenti che dovrebbero essere sempre visibili come intestazioni, piè di pagina e barre degli annunci. Per vedere un esempio di questo su Dawn, puoi controllare il file theme.liquid in cui la barra degli annunci statici, la sezione dell'intestazione e le sezioni del piè di pagina vengono aggiunte con il tag della section .

Potenziare la creatività

Ora che hai visto come creare e aggiungere sezioni ai tuoi temi, puoi creare infinite opzioni per i negozi dei tuoi clienti.

Lavorare con i modelli JSON sblocca il potere delle sezioni per tutte le pagine di un tema, che consentirà ai commercianti di costruire il loro negozio esattamente come vorrebbero, con una tua indicazione.