5 aggiornamenti Shopify da non perdere per migliorare il tuo negozio di e-commerce

Se gestisci un sito Web di e-commerce utilizzando Shopify, è essenziale tenere il passo con gli ultimi aggiornamenti di Shopify per stare al passo con la concorrenza. Nel 2023, il numero di negozi Shopify ha superato i 6,3 milioni, in 175 paesi in tutto il mondo. In particolare, Shopify ha stabilito il suo dominio nel mercato dell'e-commerce statunitense, detenendo una significativa quota di mercato del 19,8%.

Con una base di utenti così ampia, Shopify lavora sempre su nuove caratteristiche e funzionalità per soddisfare le esigenze dei suoi utenti. In qualità di partner di sviluppo Shopify White-Label, ci teniamo aggiornati con le ultime tendenze e gli aggiornamenti.

Questi recenti aggiornamenti di Shopify ti aiuteranno a migliorare il tuo negozio online e a stare al passo con il panorama dell'e-commerce in continua evoluzione.

I. Raccolta automatizzata con Metafield

Le raccolte automatizzate che utilizzano metafield possono aiutarti a creare raccolte più accurate per i tuoi prodotti su Shopify. I metafield sono campi personalizzati che ti consentono di aggiungere ulteriori informazioni ai tuoi prodotti, come colore, dimensioni o materiale.

Shopify ora ti consente di aggiungere condizioni di metafield alle raccolte automatizzate. Ciò significa che puoi creare raccolte automatizzate più accurate per i tuoi prodotti in base ai metafield del prodotto.

Una volta aggiunti i metafield a un prodotto, il prodotto verrà aggiunto automaticamente alla raccolta automatizzata corrispondente.

Per aggiungere condizioni di metafield a una raccolta, devi seguire questi passaggi:

Passaggio 1: creazione di un metafield per il prodotto

Innanzitutto, devi creare un metafield per il tuo prodotto o variante. Vai alla sezione "Campi personalizzati" nelle impostazioni di Shopify e seleziona "Aggiungi un campo personalizzato".

Con i recenti aggiornamenti di Shopify, ora è più facile aggiungere informazioni importanti sui tuoi prodotti utilizzando i metafield. Puoi scegliere tra quattro tipi di metafield:

• Testo a riga singola
• Numero intero
• Decimale
• Vero o falso

Se desideri creare valori predefiniti per il tuo metafield, seleziona "Elenco di valori".

Passaggio 2: impostazione delle raccolte automatizzate

Dopo aver creato il tuo metafield, puoi impostare raccolte automatizzate basate su quel valore del metafield. Vai alla sezione "Collezioni automatizzate" della dashboard di Shopify e seleziona "Crea collezione automatizzata".

Da lì, puoi selezionare il metafield che hai creato in precedenza e impostare le condizioni per la tua raccolta. Questo aggiornamento di Shopify ti consente di organizzare i prodotti in collezioni personalizzate, semplificando la gestione dell'inventario.

Passaggio 3: creazione di una raccolta

Dopo aver impostato le raccolte automatizzate, puoi creare una nuova raccolta. Vai alla sezione "Collezioni" nella dashboard di Shopify e seleziona "Crea collezione".

Nella sezione "Condizioni", seleziona il metafield che desideri utilizzare per la tua raccolta e imposta il valore per quel metafield. Questo aggiungerà automaticamente i prodotti che corrispondono alla tua condizione di metafield alla tua collezione.

Segui questi passaggi per creare raccolte automatizzate con metafield per i tuoi prodotti o varianti. Questo può aiutarti a organizzare meglio i tuoi prodotti e rendere più facile per i tuoi clienti trovare ciò che vogliono per il tuo negozio online.

Per saperne di più sulle raccolte automatiche clicca qui.

II. Estensibilità alla cassa

A partire dal 13 agosto 2024, checkout. liquid non funzionerà più per le pagine in-checkout. Questo significa che se attualmente personalizzi le tue pagine in-checkout con checkout. liquid deve eseguire l'upgrade all'estensibilità del checkout prima di questa data.

Devi utilizzare l'API di Checkout per personalizzare le tue pagine di spedizione e pagamento. Le personalizzazioni effettuate al di fuori di questa API non saranno supportate.

Quando esegui l'upgrade all'estensibilità del checkout, puoi beneficiare di esperienze di checkout migliorate e di una maggiore soddisfazione del cliente.

Ecco come:

• Passaggio 1: vai alla sezione Shopify Checkout API del sito web Shopify Developers.

• Passaggio 2: familiarizza con l'API di Checkout e le sue funzionalità.

• Passaggio 3: personalizza le tue pagine di checkout utilizzando l'API di checkout.

• Passaggio 4: verifica le modifiche per assicurarti che funzionino correttamente.

Questo aggiornamento ti consentirà di personalizzare le tue esperienze di checkout e di fornire ai clienti maggiori informazioni per prendere decisioni informate durante il checkout.

III. Creazione di gruppi di sezioni nei temi di Shopify

Shopify ha introdotto una nuova funzionalità che ti consente di creare gruppi di sezioni nel layout del tuo tema. I gruppi di sezioni sono contenitori JSON che consentono al proprietario del negozio di aggiungere, rimuovere e riordinare le sezioni nelle aree del file di layout, come l'intestazione e il piè di pagina.

Con questo aggiornamento di Shopify , puoi facilmente personalizzare e riorganizzare le sezioni nel layout del tuo tema.Questa funzione promette un flusso di lavoro più snello ed efficiente per i negozi online.

Per aggiungere un gruppo di sezioni, attenersi alla seguente procedura:

• Passaggio 1: vai su "Modifica codice" nel tuo negozio Shopify.

• Passaggio 2: vai su "Sezioni" e fai clic su "Aggiungi una nuova sezione" per aggiungere una nuova sezione.

• Passaggio 3: aggiungi un nome file e aggiungi ".json" per creare un nuovo file JSON.

• Passaggio 4: nel file JSON, aggiungi i seguenti quattro attributi: "Tipo", "Nome", "Sezioni" e "Ordine".Questi attributi sono obbligatori, senza nessuno degli elementi che il file JSON non salverà. se manca qualcuno di loro, darà un errore.

• Passaggio 5: possiamo avere uno dei seguenti valori: "header", "footer", "aside" o "custom.<nome>" per l'attributo "Tipo".

• Passaggio 6: l'attributo "Nome" può essere qualsiasi nome che è necessario assegnare al gruppo di sezioni.

• Passaggio 7: l'attributo "Sezione" ha tutti i valori che abbiamo aggiunto da Shopify Customizer.Verrà generato automaticamente da Shopify in base al contenuto che aggiungiamo. Consigliamo vivamente di NON MODIFICARE manualmente il file JSON.

• Passaggio 8: l'attributo "Ordine" definisce il numero di blocchi che abbiamo aggiunto alle sezioni specifiche.Sarà cambiato automaticamente quando cambiamo l'ordine dal customizer. Gli attributi dell'ordine definiscono l'ordine dei blocchi.

• Passaggio 9: ora che hai creato il file JSON del gruppo di sezioni, sorge la domanda su come collegarlo al programma di personalizzazione e come apparirà nel programma di personalizzazione.Per fare ciò, puoi aggiungere il seguente codice al tuo file liquid:

• {% sezioni "Nome_file_gruppo_sezione" %}

• Passaggio 10: questo collegherà il file del gruppo di sezioni al programma di personalizzazione.Una volta collegato, sarai in grado di aggiungere più sezioni a quel gruppo di sezioni, come mostrato nell'immagine qui sotto:

Nel complesso, questa nuova funzionalità offre ai proprietari dei negozi Shopify come te una grande flessibilità e opzioni di personalizzazione per la creazione e la gestione delle sezioni nel file di layout.

Nota:

• I gruppi di sezioni creati in Shopify non verranno visualizzati nel customizer per impostazione predefinita. Se desideri aggiungere un gruppo di sezioni, dovrai farlo manualmente nel file dal codice liquido.

• Tuttavia, Shopify ha recentemente introdotto una nuova funzionalità sullo schema delle sezioni che ti consente di rendere visibile la tua sezione ".liquid" personalizzata in specifici gruppi di sezioni.

• Gli attributi "enabled_on" e "disabled_on" nello schema possono essere utilizzati per eseguire questa operazione. Puoi organizzare meglio le sezioni ".liquid" personalizzate e utilizzarle in gruppi di sezioni specifici con questo aggiornamento di Shopify.

• Ad esempio, se hai due gruppi di sezioni denominati "group1.json" e "group2.json" e un file di sezione denominato "section_file.liquid", puoi utilizzare l'attributo "enabled_on" nello schema per creare il file "section_file.liquid ” visibile solo in “group1.”

• D'altra parte, puoi utilizzare l'attributo "disabled_on" per nascondere la sezione "section_file.liquid" in "group1" e mostrarla in tutti gli altri gruppi.

• Gli attributi “enabled_on” e “disabled_on” accettano due argomenti: “template” e “groups”. Puoi usarli entrambi contemporaneamente o uno di essi. L'argomento "template" consente tutti i tipi di pagine e [""] consente tutte le pagine.

• L'argomento "gruppi" consente di aggiungere tipi di gruppi di sezioni, come intestazione, piè di pagina, a parte e personalizzato. <nome>. [“”] consente tutti i tipi di sezioni.

• Se utilizzi "enabled_on" sia con gli argomenti template che group, significa che la tua sezione verrà visualizzata solo nel gruppo di sezioni di quel template. Lo stesso funzionerà in "disabled_on" ma al contrario.

Ulteriori informazioni su "enabled_on" e "disabled_on" qui. Puoi anche leggere informazioni sui gruppi di sezioni qui.

IV. Funzione campo meta oggetto di Shopify

La funzione Meta Object Field di Shopify è un modo semplice per aggiungere e archiviare informazioni strutturate per il tuo negozio. Ti consente di memorizzare informazioni su un prodotto, come le sue caratteristiche, specifiche e tabelle delle taglie, che possono quindi essere recuperate e modificate dal pannello di controllo Shopify.

Questa funzione può essere utilizzata per prodotti, collezioni, clienti, ordini e altre parti del tuo negozio. Questo aggiornamento rende la gestione e l'aggiornamento del tuo negozio più semplice ed efficiente.

I meta oggetti sono accessibili tramite Shopify Admin, nonché tramite l'API StoreFront e l'API meta oggetto. Questa funzione consente alle applicazioni di terze parti di accedere e interagire con i meta oggetti.

Ciò significa che puoi utilizzare Meta Objects per creare un'ampia gamma di personalizzazioni e integrazioni con il tuo negozio.

Impostazione di meta oggetti

L'impostazione di Meta Objects è un processo semplice. Ci sono due elementi chiave per i meta oggetti: il gruppo di campi che descrivono la struttura di un oggetto e il contenuto oi dati dei meta oggetti.

• Puoi gestire la struttura dei meta oggetti dalla sezione Impostazioni > Dati personalizzati nel pannello di controllo Shopify, dove puoi aggiungere o rimuovere campi e definire i relativi tipi di dati.

• Puoi quindi gestire il contenuto o i dati dei Meta Oggetti dalla sezione Contenuto > Meta Oggetti nel pannello di controllo Shopify, dove puoi aggiungere o modificare le informazioni memorizzate in ciascun Meta Oggetto.

È importante rimanere aggiornati con gli ultimi aggiornamenti di Shopify per garantire che i tuoi meta oggetti funzionino correttamente.

Quando crei meta oggetti in Shopify, è importante tenere a mente alcune cose per assicurarti che funzionino correttamente.

• Innanzitutto, dovresti assegnare a ciascun meta oggetto un nome chiaro e conciso per aiutarti a identificarlo all'interno del pannello di controllo di Shopify. Successivamente, dovresti assegnare un tipo al Meta Object, che verrà utilizzato per identificarlo nelle API.

• Oltre al nome e al tipo, è necessario definire i campi che compongono il Meta Oggetto. Questi campi determineranno il tipo di contenuto che può essere aggiunto al meta oggetto.

• Ogni campo avrà i propri dettagli, inclusi nome, descrizione, tipo e limiti di caratteri delle regole di convalida, valori minimi e massimi o valori attuali.

• Una volta che il tuo Meta Object è stato creato, puoi iniziare a creare voci per esso. Queste voci possono essere aggiunte ai prodotti, alle collezioni, ai clienti, agli ordini e ad altre parti del tuo negozio. Puoi anche fare riferimento a Meta Objects all'interno di diverse aree del tuo negozio o tramite app di terze parti.

• Quando si tratta di visualizzare Meta Objects nel tuo negozio online, puoi adottare alcuni approcci diversi. Ad esempio, puoi visualizzare i meta oggetti direttamente sulle pagine dei prodotti o utilizzarli per creare campi personalizzati nel processo di checkout.

In definitiva, Meta Objects mira a fornire uno strumento flessibile e potente per la gestione dei dati strutturati e del markup dello schema nel tuo negozio. Quando segui le migliori pratiche e progetti attentamente i tuoi Meta Object, un aggiornamento di Shopify può aiutarti a creare un'esperienza di e-commerce più efficace ed efficiente per il tuo cliente.

Creazione di riferimenti Metafield per parti specifiche di Shopify

Per lavorare con parti specifiche di Shopify, come prodotti, ordini o clienti, puoi utilizzare i meta oggetti creando un riferimento metafield.

Ad esempio, se si dispone di un Meta oggetto "Caratteristiche del prodotto" che si desidera visualizzare nelle pagine del prodotto, è possibile creare un metacampo del prodotto che faccia riferimento a questo specifico Meta oggetto.

Questo riferimento ti consente di mostrare "Caratteristiche del prodotto" uniche su prodotti specifici. Ad esempio, puoi aggiungere voci di riferimento come "Sostenibilità" sul prodotto A e "Materiali" sul prodotto B.

Questo aggiornamento di Shopify è eccellente, poiché aumenta l'efficienza e aiuta a creare esperienze utente migliori.

Puoi saperne di più sui meta oggetti di riferimento facendo clic qui:

Visualizzazione dei metafield nel tuo negozio online di Shopify.

Per visualizzare i Meta Object nel tuo negozio online, hai due opzioni: collegare i metafield al tuo tema utilizzando l'editor del tema o modificare il codice del tema per aggiungere i Meta Object.

Tenere il passo con gli ultimi aggiornamenti di Shopify è essenziale per assicurarti di utilizzare il metodo più efficiente.

Ecco i passaggi per ciascuna opzione:

Connetti i metafield al tuo tema utilizzando l'editor del tema:

• Vai al tuo pannello di controllo Shopify e fai clic su Negozio online > Temi.
• Trova il tema che desideri modificare e fai clic su Personalizza.
• Passare alla parte del modello in cui si desidera che appaia il riferimento Meta Object.
• Seleziona una sezione esistente con blocchi o aggiungine una nuova con blocchi.
• Fare clic sul blocco che si desidera collegare al riferimento Meta Object.
• Accanto al nome del blocco, fare clic sull'icona Connetti sorgente dinamica.
• Selezionare i riferimenti Meta Object che si desidera visualizzare con questo blocco.

Modifica il codice del tuo tema per aggiungere meta oggetti:

• Prova questa opzione solo se hai esperienza di programmazione.
• Vai al tuo pannello di controllo Shopify e fai clic su Negozio online > Temi.
• Trova il tema che desideri modificare e fai clic su Azioni > Modifica codice.
• Nel menu a sinistra, vai al modello in cui desideri aggiungere il riferimento Meta Object.
• Usa Liquid per fare riferimento ai metafield nei tuoi modelli di pagina.
• Salva le modifiche e visualizza l'anteprima del tema per assicurarti che il riferimento Meta Object appaia come previsto.

Tieni presente che se il tuo tema è un tema vintage che non supporta i metafield, dovrai modificare il codice per aggiungere i tipi di metafield.

Questo aggiornamento semplifica la personalizzazione del design delle pagine e crea un aspetto unico per i negozi.

V. Ottimizzazione del codice con il plug-in Shopify Liquid Prettier

Il plug-in Shopify Liquid Prettier (1.0.0) consente effettivamente agli sviluppatori di formattare istantaneamente il codice in uno stile di codice coerente. È uno strumento prezioso per gli aggiornamenti di Shopify, eliminando la necessità di discutere le linee guida di stile.

Questo plug-in è disponibile nel browser, nel terminale o nel tuo editor di codice preferito. Con esso, puoi risparmiare tempo e mantenere facilmente un codice di alta qualità.

È disponibile con alcuni popolari editor di testo, tra cui Visual Studio Code, Vim e WebStorm.

Installa e configura il plug-in nel tuo editor preferito per iniziare. Ciò ti aiuterà a creare un codice più pulito e più facile da leggere e a semplificare le attività di debug e manutenzione.

UN. Codice VisualStudio

Gli sviluppatori di tutto il mondo usano Visual Studio Code. Impariamo a conoscere le due estensioni che possono aiutare con la formattazione del codice, Shopify Liquid Prettier Plugin e Prettier.

Shopify Liquid Prettier Plugin

Shopify Liquid Prettier Plugin è una funzionalità integrata in Shopify Liquid, che aiuta a formattare il codice Liquid. Per utilizzare questo plugin, puoi aggiungere il seguente codice nel file settings.json del tuo negozio:

{
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode",
"editor.formatOnSave": true
},
}
Aggiungi questa configurazione per applicare automaticamente la formattazione al codice Liquid al salvataggio.

Più carino

Prettier è un'estensione che può essere scaricata da Visual Studio Code Marketplace. Per utilizzare Prettier con Shopify Liquid, devi installare il plug-in Shopify Liquid Prettier in locale nel tuo repository.

Per installare il plug-in, puoi utilizzare npm o Yarn:

npm install –save-dev più carino @shopify/prettier-plugin-liquid

filato add –dev più carino @shopify/prettier-plugin-liquid

Dopo aver installato il plug-in, Prettier formatterà automaticamente il codice in base alle regole impostate nel plug-in. Ciò consente di risparmiare tempo e garantire la coerenza nella formattazione del codice, semplificandone la lettura e la manutenzione.

Tenere il passo con gli aggiornamenti di Shopify può garantire che la tua app o il tuo tema rimangano compatibili con le funzionalità o le modifiche appena introdotte.

B. Vim

Vim è anche un popolare editor di testo. Esploriamo come utilizzare Vim Prettier con Shopify Liquid, un plug-in che può aiutarti a formattare il tuo codice.

• Passaggio 1: installa Vim

Per iniziare, dovrai installare Vim sulla tua macchina. Puoi scaricare l'ultima versione di Vim dal repository Git ufficiale, disponibile qui.

• Passaggio 2: installa Vim Prettier

Successivamente, dovrai installare Vim Prettier, un plug-in che ti consente di formattare il tuo codice utilizzando Prettier dall'interno di Vim. Puoi trovare il plugin sul repository Git ufficiale qui.

• Passaggio 3: installa il plug-in Shopify Liquid Prettier

Per utilizzare Prettier con Shopify Liquid, devi installare il plug-in Shopify Liquid Prettier in locale nel tuo repository. Puoi farlo usando npm o Yarn. Esegui il comando seguente per installare il plug-in utilizzando npm:

npm install –save-dev più carino @shopify/prettier-plugin-liquid

In alternativa, puoi usare Yarn per installare il plugin:

filato add –dev più carino @shopify/prettier-plugin-liquid

Dopo aver installato il plug-in, Prettier formatterà automaticamente il codice in base alle regole impostate nel plug-in. Ciò consente di risparmiare tempo e garantire la coerenza nella formattazione del codice, semplificandone la lettura e la manutenzione.

Inoltre, stare al passo con gli aggiornamenti di Shopify può aiutarti a garantire che il tuo codice rimanga compatibile con le ultime versioni di Shopify e altre dipendenze.

C. WebStorm

WebStorm è un ambiente di sviluppo integrato (IDE) per lo sviluppo Web che fornisce assistenza avanzata per la codifica, strumenti di debug e supporto per le tecnologie Web più diffuse.

Per utilizzare il plug-in Shopify Liquid Prettier in WebStorm, devi seguire i passaggi seguenti:

• Passaggio 1 : installa il plug-in Prettier dal Marketplace dei plug-in JetBrains.Puoi trovare il plug-in qui: https://plugins.jetbrains.com/plugin/10456-prettier.

• Passaggio 2 : installa il plug-in Shopify Liquid Prettier in locale nel tuo repository.Puoi installarlo usando npm o Yarn. Per installarlo utilizzando npm, esegui il seguente comando:
• npm install –save-dev più carino @shopify/prettier-plugin-liquid
• In alternativa, se preferisci utilizzare Yarn, esegui il seguente comando:
• filato add –dev più carino @shopify/prettier-plugin-liquid
• Passaggio 3 : riavvia WebStorm.

• Passaggio 4: nelle preferenze di WebStorm, cerca Prettier e aggiorna l'opzione "Esegui file" per includere i file "liquidi".Puoi anche selezionare la casella di controllo "Al salvataggio" per formattare automaticamente i file al momento del salvataggio.

• Passaggio 5: salva le impostazioni per attivare il plug-in.

Con questi passaggi, puoi utilizzare il plug-in Shopify Liquid Prettier in WebStorm per formattare automaticamente il tuo codice Liquid e migliorarne la leggibilità.

È importante tenere il passo con gli aggiornamenti di Shopify, aggiornando il plug-in Shopify Liquid Prettier in WebStorm. Quando aggiorni regolarmente un plug-in, puoi sfruttare nuove funzionalità e miglioramenti, assicurandoti che il codice dell'app Shopify sia sempre formattato correttamente e facile da leggere.

Conclusione

Come puoi vedere, gli aggiornamenti di Shopify possono apportare molti miglioramenti al funzionamento del tuo negozio online. Grazie a questi aggiornamenti, puoi lasciare indietro i tuoi concorrenti. E approfittare di questi preziosi aggiornamenti ora è più facile che mai con i nostri servizi di sviluppo Shopify in white label.

In E2M, ci impegniamo per il tuo successo e siamo più che felici di aiutarti con qualsiasi domanda tu possa avere su questi aggiornamenti. Crediamo nella tua attività e vogliamo vederla salire a nuove vette. Contattaci se hai bisogno di assistenza.

Approfitta di questi preziosi aggiornamenti e assicurati che il tuo negozio sia aggiornato con le ultime innovazioni di Shopify.