Che cos'è la Shopify Liquido? Una rapida carrellata delle basi

Al di sopra 4.4 milioni i siti di e-commerce sono costruiti utilizzando il Shopify piattaforma. È la piattaforma di e-commerce all-in-one che ha scosso il Web sin dal suo inizio nel 2006. I commercianti scelgono questa piattaforma per ospitare i loro negozi online per molte ragioni, dalla semplice configurazione dei pagamenti agli strumenti di marketing integrati e molto altro ancora. 

Ma uno degli aspetti critici di Shopify è il suo costruttore di siti intuitivo con migliaia di temi e Shopify integrazioni di app tra cui scegliere. 

Tuttavia, mentre il costruttore senza codice ti consente di creare siti Web straordinari e unici, ci sono alcune limitazioni. Ad esempio, quando inizi a costruire il tuo negozio online, devi scegliere un tema che definisca la disposizione e il livello di controllo che ottieni sui tuoi contenuti. Anche se selezioni un tema vuoto, cioè uno senza contenuto, c'è ancora un'architettura di codice sottostante che predefinisce come è organizzato il contenuto.

Ma ci sono buone notizie. Se vuoi crearne uno tuo Shopify template per il tuo sito o per quello di qualcun altro, c'è Shopify Liquido.

Interessato? Unisciti a me mentre mi sforzo di rispondere alla domanda: cos'è Shopify Liquido? Immergiamoci!

Che cos'è la Shopify Liquido?

È interessante notare che, Shopify Liquid è in circolazione da allora Shopify's inizio. Quando ShopifyI creatori di hanno prima progettato la piattaforma, hanno costruito un progetto open source che fungesse da linguaggio modello per tutti Shopify sito web ufficiale modelli. 

Per chi non lo sapesse, "linguaggio di programmazione open source" si riferisce al codice sorgente di un software che è liberamente disponibile al pubblico, consentendo a chiunque di utilizzare, modificare e distribuire il codice per qualsiasi scopo. 

Creato utilizzando Ruby, Shopify Liquido serve essenzialmente come segnaposto per inserire dati in un formato predefinito (maggiori dettagli di seguito).

Quindi, come funziona?

Per capirlo, devi prima sapere che i siti web sono tipicamente statici o dinamici. I negozi statici sono hardcoded per mostrare il contenuto esattamente come è scritto, ad esempio, in HTML. Al contrario, un sito Web dinamico può visualizzare contenuti diversi a seconda di come l'utente interagisce con esso. 

Ora diciamo che hai un sito web statico; lo scheletro di base del sito è preimpostato, ma si desidera rendere il contenuto dinamico. Qui è dove scrivere Shopify Liquid nel tuo codice HTML è utile. Questo si presta come segnaposto per contenuti dinamici. 

Shopify Liquid funge da intermediario tra il tuo negozio e Shopify, consentendo a Liquid di estrarre i dati da Shopifye consegnalo al tuo negozio. Liquid può richiedere tre tipi principali di dati:

1. Oggetti
2. tags
3. Filtri

Di seguito, esploreremo a turno ogni tipo di dati:

Oggetti liquidi

Gli oggetti sono simili a una libreria di funzioni o contenuti; all'interno di ogni oggetto, ci sono varie proprietà. 

Se non hai familiarità con il concetto di oggetti, ecco una breve panoramica:

Un oggetto è un concetto fondamentale nella programmazione. Un oggetto è costituito da due componenti: 

1. Proprietà che definiscono lo stato dell'oggetto
2. Funzioni che definiscono il comportamento dell'oggetto

Per illustrare meglio come funziona, utilizzeremo un esempio non correlato alla codifica. Ad esempio, un'auto. Qui, l'auto, cioè l'oggetto, potrebbe avere funzioni come "accelerare", "girare" e "frenare". Al contrario, le proprietà potrebbero essere i "finestrini", le "porte" dell'auto, ecc. 

In poche parole, gli oggetti sono importanti concetto nella codifica perché aiutano a organizzare sistemi complessi in blocchi più gestibili.

Ad esempio, supponiamo che tu stia creando un custom Shopify tema e desidera visualizzare a Titolo del Blog nel tuo modello. Puoi usare Liquid per portare queste informazioni da Shopifye visualizzalo da qualche parte nella pagina. In questo esempio, questo è il pezzo di codice Liquid che useresti per raggiungere questo obiettivo:

{{Blog.title}} 

Analizziamo questo:

• Qui, 'blog' è l'oggetto. 
• La proprietà che vogliamo all'interno di questo biblioteca è contrassegnato da 'titolo. ' 
• Lo strumento  '' dice a Liquid come questi due bit di dati sono correlati. 
• Le doppie parentesi sono la sintassi liquida che definisce il {{contenuto/output desiderato}} desiderato da Shopify server. 

Tag liquidi

Quando si usa Shopify Liquido, i tag aggiungono logica al contenuto che richiediamo al Shopify server per aiutare a definire quando il contenuto deve essere visibile sulla pagina. Ad esempio, supponiamo di voler visualizzare una grafica particolare sui post del nostro blog festivo. Cioè, vogliamo che questo grafico appaia solo quando viene soddisfatta una condizione specifica. 

Ecco come potrebbe essere:

{% if blog.title == 'celebrazione' %}

**immagine HTML**

{% finisci se %}

Questo potrebbe sembrare complesso, ma se lo scomponiamo, è piuttosto semplice da capire:

• I tag usano una sintassi leggermente diversa rispetto agli oggetti che hanno questo aspetto  {%…%}.
• Il primo cartellino {% if blog.title == 'celebrazione' %} dice a Liquid quale condizione deve essere soddisfatta prima di richiedere il contenuto dal server.
• La condizione da noi richiesta è definita da an dichiarazione "se".. Se hai familiarità con la codifica, saprai che le istruzioni "if" funzionano confrontando tra loro due o più dati. Se corrispondono, passerà alla riga successiva nel nostro codice. Qui,  se blog.title == 'celebrazione', chiediamo a Liquid di controllare se il titolo del nostro blog contiene la parola "celebrazione". In tal caso, passerà alla riga successiva del nostro codice. In caso contrario, Liquid non restituirà alcun contenuto.
• In questo esempio, se abbiamo il titolo di un blog che contiene la parola "celebrazione", Liquid estrarrà e visualizzerà la nostra immagine HTML.
• Una volta fatto ciò, passa alla riga seguente {% finisci se %}, che termina il nostro programma.

Questo è solo un esempio di cosa puoi fare con i tag. Shopify Liquid ha tag per:

• Controllo quando il codice viene eseguito
• iterare/iterazione (ripetizione) un blocco di codice
• Dsiplay alcuni markup HTML
• Crea nuove variabili.

Filtri liquidi

I filtri sono parti di codice che cambiano o modificano l'output di un oggetto. Ad esempio, possono modificare il colore, il carattere, la dimensione o l'aspetto degli elementi del sito web. 

Ma, oltre a modificare gli aspetti visibili dell'oggetto, possono eseguire funzioni su un oggetto. Ad esempio, se desideri mostrare i titoli del tuo blog in maiuscolo, un filtro potrebbe aiutarti a raggiungere questo obiettivo senza modificare manualmente tutti i titoli del tuo blog:

{{ blog.title | uppercase }}

• La sintassi per i filtri è {{…}}.
• Qui, la proprietà dell'oggetto che stiamo cercando è 'Titolo del Blog'.
• Il filtro che stiamo applicando è lettere maiuscole.
• Lo strumento  † separa l'input e l'output del nostro codice.

Ora, quando un utente guarda il titolo del nostro blog, apparirà in maiuscolo.

Vantaggi della Shopify Liquido

Supponi di essere un progettista o uno sviluppatore di siti. In tal caso, uno dei vantaggi più significativi di Shopify Liquid è che non hai bisogno dei dati del negozio (ovvero, informazioni sul negozio) per creare o modificare un sito web. Questo perché quando un utente effettua per la prima volta un Shopify memorizzare, tutte le informazioni sono memorizzate sul Shopify server, il che significa che puoi utilizzare Liquid per recuperare semplicemente i dati di cui hai bisogno. 

Tuttavia, se non sei uno sviluppatore web, invece sei solo il proprietario di un negozio che cerca di abbellire il tuo negozio, ci sono vantaggi anche per te:

• Facile da imparare e da usare: Liquid ha una sintassi semplice ed è facile da capire, rendendolo accessibile a sviluppatori e non sviluppatori.
• Contenuto dinamico: Liquid consente la creazione di contenuti dinamici
• personalizzabile: Con Liquid, puoi creare modelli e temi personalizzati, dandoti il ​​controllo completo sull'aspetto del tuo negozio di e-commerce.
• Prestazione migliorata: I modelli liquidi vengono compilati e memorizzati nella cache, migliorando prestazioni e velocità del sito web rispetto ad altri motori di template.
• Grande comunità: Shopify ha una vasta comunità di utenti, che fornisce accesso a una vasta gamma di conoscenze e supporto, facilitando la ricerca di soluzioni ai problemi comuni relativi a Liquid.

Requisiti

Quindi di cosa hai bisogno per iniziare a usare Shopify Liquido?

Se hai già un Shopify Tornare al suo account, Shopify Il liquido sarà disponibile per l'uso gratuito. Discuteremo su come trovare Liquid qui sotto. Ma tutto ciò che devi sapere per ora è che ogni sito creato su Shopify è costruito con Liquid, quindi puoi iniziare a modificare manualmente questo codice non appena hai creato un sito.

Tuttavia, se non hai un Shopify store, dovrai crearne uno per iniziare a giocare con Liquid. 

1. Per prima cosa, vai a Shopify e seleziona un piano. Inserisci i tuoi dati e crea il tuo account.
2. Dal tuo Shopify amministratore, fai clic su temi. Shopify fornisce automaticamente un tema predefinito. Puoi lasciarlo così com'è o scegliere un altro tema da cui iniziare.
3. Shopify ha una lista di controllo che puoi consultare per completare il tuo negozio. Ti consigliamo di eseguire tutte le operazioni di base, come aggiungere le pagine dei prodotti, progettare la tua vetrina, ecc.

Ora che hai lo scheletro di base del tuo negozio online, puoi estrarre questi dati dal file Shopify server e personalizzalo utilizzando Liquid (più su questo sotto). 

Sebbene non sia necessaria alcuna esperienza di codifica per iniziare a utilizzare Liquid, la familiarità con i principi di codifica di base renderà il tuo viaggio più semplice. Ma per la maggior parte, puoi trovare un'ampia documentazione e tutorial di auto-aiuto su Shopify portale degli sviluppatori. Qui troverai un'intera sezione dedicata a Nozioni di base liquide. 

È consigliabile dedicare un po' di tempo alla consultazione di queste guide prima di iniziare. Sebbene Liquid sia un potente strumento di personalizzazione, ha anche il potenziale per distruggere il tuo sito se non sai cosa stai facendo!

Guida introduttiva Shopify Liquido

Quindi, usando ciò che abbiamo imparato finora, vediamo come possiamo modificare il nostro Shopify tema usando Liquid. 

Per accedere a Liquid, segui questi passaggi:

1. Duplica il tuo tema: Per prevenire qualsiasi incidente importante, è consigliabile fare una copia del tema prima di iniziare. In questo modo, se commetti degli errori, il tuo originale Shopify tema rimane intatto. Per fare ciò, vai alla sezione dei temi sul lato destro del tuo Shopify pannello di controllo. Scegli il tema che desideri modificare e fai clic su Azioni per visualizzare il menu a discesa. Ora seleziona duplicato.
2. Rinomina il tuo duplicato: Quando duplichi un tema, lo vedrai apparire nel tuo elenco di temi. Puoi rinominare la tua copia in modo da non confondere l'originale con il duplicato. Basta fare nuovamente clic sul pulsante delle azioni e premere Rinomina nel menu a discesa. 
3. Entrando nell'editor di codice: Ora, seleziona di nuovo le azioni sul tuo duplicato e seleziona Modifica codice. Verrai indirizzato all'elenco completo dei codici all'interno del tuo tema. Dai un'occhiata alle cartelle elencate alla tua destra. Dovresti vedere una serie di cartelle contenenti diversi aspetti del tuo tema, come il layout, i modelli, le sezioni, ecc. Apri la cartella dei modelli. 
4. Codifica in Liquido: All'interno della cartella dei modelli, vedrai un elenco di file con il tipo di file .liquid. Puoi anche creare un nuovo modello di file Liquid selezionando il pulsante più nella cartella dei modelli. Ti chiederà quale modello vuoi creare, ad esempio pagina, sezione, blog, ecc., e di assegnare un nome al file. Per modificare un file, fai doppio clic su un file modello e si aprirà nell'editor di codice sulla destra.

All'interno di qualsiasi file Liquid, vedrai uno script HTML. Questo è lo scheletro del tuo sito web. Puoi usare il linguaggio Liquid all'interno di questo HTML per recuperare informazioni dal Shopify server. Finché usi la sintassi Liquid corretta, cioè le parentesi, dovrebbe rendere il tuo contenuto di conseguenza.

Per illustrare, eseguiamo un semplice esempio:

Ridimensionamento delle immagini utilizzando Shopify Liquido

Le immagini sono un aspetto essenziale della maggior parte Shopify I negozi. Ma se stai usando più immagini, può essere un incubo ridimensionarle tutte correttamente, in modo che appaiano in modo ordinato. Per risolvere questo problema, stiamo esaminando il file img_url filtro. Come altri filtri, img_url è progettato per modificare il contenuto che prende dal file Shopify server. Puoi usare questo filtro per modificare le dimensioni, la scala, il formato e il ritaglio delle tue immagini. 

Questa è una tecnica eccellente perché il filtro modifica solo temporaneamente un'immagine esistente; non crea ogni volta una nuova immagine per il rendering del tuo modello, quindi non rallenterà il tempo di caricamento del tuo sito. 

Quindi, come ridimensioniamo un'immagine?

Innanzitutto, dobbiamo decidere dove vogliamo applicare le modifiche. Puoi applicare il filtro img_url a qualsiasi oggetto con una proprietà image, inclusi:

• Prodotti
• Varianti di prodotto
• Elementi pubblicitari
• Collezioni
• Articoli

Una volta che hai deciso quali immagini vuoi modificare, devi sapere quale proprietà vuoi prendere di mira. Per scoprire quali proprietà hanno un attributo immagine, guarda Shopifyl'elenco degli oggetti e le loro proprietà. 

In questo esempio, sceglieremo come target le immagini dei nostri articoli del blog.

Ecco il codice di base:

{{ blog.articles.image | img_url: ‘100×100' }}

Abbattersi:

• Blog è l'oggetto che stiamo cercando e vogliamo la proprietà news, in quanto contiene tutti gli articoli del nostro blog. In particolare, vogliamo cambiare le immagini nei nostri articoli del blog, quindi ci rivolgiamo a Immagine proprietà all'interno degli artt.
• Ora applichiamo il filtro img_url. Se lo lasciassimo così com'è, visualizzerebbe semplicemente un'immagine estratta dall'URL fornito dal file Shopify server. Tuttavia, forniremo anche un parametro aggiuntivo: la dimensione dell'immagine '100×100' (notare che Shopify utilizza i pixel per determinare gli intervalli di dimensioni).
• Infine, avvolgiamo il nostro codice utilizzando la sintassi liquida doppia parentesi, che viene utilizzata per i filtri. 

E abbiamo finito! Questo dovrebbe restituire l'output per tutte le nostre immagini del blog, rendendole di dimensioni 100 x 100 pixel.

Suggerimenti e asporto

Spero che dopo aver letto questo articolo, ora tu abbia una risposta alla domanda: cos'è Shopify Liquido?

Come si può vedere, Shopify Liquido è uno strumento versatile che può svolgere varie funzioni durante la progettazione o la modifica di un file Shopify modello. Sebbene ci sia un po' di curva di apprendimento, una volta che ti ci abitui, è ragionevolmente facile da usare, soprattutto rispetto ad altri linguaggi di programmazione più complessi come Javascript.

Se sei interessato ad usare Shopify Liquid, ti consigliamo di seguire questi suggerimenti per ottenere il massimo da esso:

1. Inizia con una solida conoscenza di Liquid: Una profonda conoscenza di Liquid ti consentirà di creare temi personalizzati più complessi. Con questa base, i nuovi utenti possono sfruttare tutto il potenziale di Shopify per creare negozi online unici e accattivanti.
2. Metti alla prova il tuo tema a fondo: Il test è essenziale per garantire che il tuo tema personalizzato funzioni come previsto su diversi browser e dispositivi. Rilevando tempestivamente i problemi di compatibilità, eviti potenziali frustrazioni per i tuoi clienti.
3. Utilizzare gli strumenti e le risorse disponibili: Shopify ha una vasta gamma di risorse disponibili per aiutare gli sviluppatori di temi, quindi usale! Se utilizzato, questo può rendere il processo di sviluppo più rapido e semplice.

Con tutti questi punti coperti, penso che sia giusto dirlo Shopify Liquid può essere un modo divertente ed efficace per aggiornare o creare un ambiente più coinvolgente e dinamico Shopify memorizzare. 

Questo è tutto da parte mia; a voi. Fatemi sapere delle vostre esperienze con Shopify Liquido nei commenti qui sotto!