Share
Nel corso di tre articoli qui su Tuts + vedremo come creare un tema per la piattaforma di e-commerce ospitata Shopify. Il mio obiettivo è quello di dotarti di tutte le competenze necessarie per iniziare, oltre a mostrarti una serie di modi creativi per rendere i tuoi temi flessibili e potenti.
Shopify: una piattaforma di e-commerce ospitata basata sul tema del designer Ecco cosa tratteremo nei prossimi articoli:
Prima di iniziare ti consiglio vivamente di iscriverti a un account partner Shopify gratuito. I temi di costruzione sono gratuiti al 100% per i progettisti (gli abbonamenti iniziano solo quando il cliente fa vivere il proprio negozio).
Avere un account partner ti consente di creare tutti i negozi di sviluppo con funzionalità complete di cui hai bisogno. Questi non hanno limiti di tempo e sono completamente gratuiti e testabili al 100%. Puoi anche effettuare pagamenti fittizi per testare l'intero flusso di acquisto, che è molto utile quando mostri il tuo lavoro ai tuoi clienti.
Potresti aver usato Shopify senza rendertene conto. Se hai mai acquistato un titolo da A Book Apart, una maglietta di United Pixel Workers, un tatuaggio temporaneo di Tattly, un caffè di Has Bean o (se posso essere così audace) ho comprato una copia di un libro -autorizzato, quindi hai fatto esperienza con Shopify.
Come vedrai da questi negozi sembrano tutti molto diversi. Non ci sono restrizioni in termini di come il tuo negozio può apparire, è interamente al 100% per te e la tua immaginazione. Nel 2013 Shopify ha deciso di dare risalto al grande design di e-commerce e ha lanciato gli inaugurati Shopify Design Awards. Oltre 150 temi sono stati presentati e sono stati giudicati da tre persone molto rispettate dal mondo del design del Web: Jeffrey Zeldman (fondatore di A List Apart e Happy Cog), Tina Roth-Eisenberg (fondatrice di swissmiss e Tattly) e Daniel Weinand (Co -founder e Chief Design Officer di Shopify).
I tre temi principali erano:
Greats Brand - Un perfetto esempio della flessibilità dei temi di Shopify Un altro mio preferito e una menzione d'onore nei premi, è il negozio Pure Fix Cycles. Oltre a mettere in mostra alcuni buoni modi per filtrare i prodotti, iniettano anche divertimento nel loro design - un ottimo esempio è la loro pagina delle ruote a bagliore.
Tutti questi temi non solo dimostrano grandi capacità progettuali, ma evidenziano anche la flessibilità dei temi di Shopify. Non c'è HTML, classi o ID prescritti e nessuna restrizione in termini di layout. Mentre molte persone scelgono temi premium per i loro negozi, molti designer partono da zero. La scelta è tua.
Come con tutti i sistemi, Shopify ha una serie di concetti chiave che vale la pena comprendere prima di immergerci in un editor di testo. Iniziamo osservando come organizziamo il nostro negozio.
Ogni negozio online ha bisogno di prodotti e Shopify non è diverso. I prodotti sono la nostra unità di base in Shopify e centrale nella costruzione di temi.
In sostanza, un prodotto è tutto ciò che desideri vendere. Ogni prodotto in un negozio ha un numero di attributi: i quattro più comuni sono titolo, descrizione, prezzo e un'immagine. Altre caratteristiche che un prodotto potrebbe possedere sono peso, colore e dimensioni. Tutti questi sono accessibili, creati e aggiornati tramite l'amministratore online.
All'interno di Shopify ogni prodotto può anche avere un numero di varianti. Per impostazione predefinita, ogni prodotto che crei ha una variante, puoi semplicemente aggiungerne di più quando necessario. Usando ancora una volta il nostro esempio di maglietta potremmo dire che ha tre varianti di colore (nero, bianco e verde) e tre varianti di dimensioni (piccola, media e grande). Ciò a sua volta ti consentirà di vendere:
Hai anche la possibilità di impostare dettagli specifici per ciascuna combinazione. Ad esempio, puoi impostare un prezzo diverso per la t-shirt verde piccola rispetto alla t-shirt verde di grandi dimensioni.
La modifica delle varianti viene eseguita tramite la schermata di amministrazione del prodotto Le varianti sono una funzionalità davvero potente di Shopify e ti consentono di visualizzare i tuoi prodotti in una varietà di modi interessanti all'interno dei tuoi modelli.
Una volta aggiunti prodotti al tuo negozio, potresti volerli suddividere in collezioni. Descrivo una collezione come un "raggruppamento logico di prodotti". Altre piattaforme possono usare il termine categoria.
Le raccolte non sono obbligatorie, ma sono molto utili. Qualsiasi prodotto può essere inserito in una o più raccolte, consentendo di classificare in modo efficace i prodotti. Come ho detto, i prodotti non devono appartenere a una collezione, è puramente facoltativo.
Collezioni: un raggruppamento logico di prodotti Se prendiamo la Best Made Co. come esempio, possiamo vedere che usano le seguenti collezioni per classificare i loro prodotti:
È del tutto possibile che una borsa possa sedersi in entrambe le collezioni "Borse e custodie" e "Campagne".
Oltre a definire manualmente le raccolte, Shopify offre una serie di altri modi in cui possiamo aggiungere automaticamente i prodotti. Un esempio di questo potrebbe essere includere tutti i prodotti in cui il prezzo è inferiore a $ 10. Ci sono molti altri attributi che possiamo usare:
Per i confronti possiamo usare il seguente:
Questi sono noti come "collezioni intelligenti" all'interno dell'interfaccia di amministrazione. Puoi ordinare le raccolte nei seguenti modi:
Infine, proprio come i prodotti, le raccolte hanno attributi che possiamo modificare dall'amministratore di Shopify tra cui un titolo, una descrizione e un'immagine.
Oltre alle raccolte, possiamo anche utilizzare i tag per aggiungere ulteriori metadati ai nostri prodotti. Un uso comune dei tag è di aiutare con il filtraggio di una raccolta. Dimostriamo questo con un esempio utilizzando lo store Pure Fix Cycles:
Come puoi vedere dall'immagine sopra, siamo nella collezione XXX e possiamo filtrarlo usando l'elenco a discesa dei tag.
I tag sono anche un modo davvero utile di mettere in relazione i prodotti tra loro. Vedremo come visualizzare "prodotti correlati" in modo più approfondito più avanti nella serie.
Con le nozioni di base su prodotti, raccolte e tag, è giunto il momento di iniziare a guardare come costruiamo i temi. La buona notizia è che se hai mai costruito un sito web (e presumo che la maggior parte di voi leggendo questo abbia, in qualche modo), la creazione di un tema Shopify non genererà sorprese sgradite.
Ogni tema di Shopify è composto da quattro elementi chiave:
Accentsconagua
.liquido estensione)Questi file sono organizzati ordinatamente in cinque cartelle. Come vedrai di seguito c'è solo una manciata di file necessari per iniziare. Ecco la struttura di cartelle di base di un tema di Shopify:
├── beni
Screen ├── screen.css.liquid
│ ├── site.js.liquid
├── config
│ ├── settings.html
─── layout
│ ├── theme.liquid
├── snippet
├── modelli
│ ├── 404.liquid
│ ├── article.liquid
│ ├── blog.liquid
Cart ├── cart.liquid
│ ├── collection.liquid
│ ├── lista-collezioni.liquid
│ ├── page.liquid
│ ├── product.liquid
│ ├── product.liquid
│ ├── search.liquid
Ho aggiunto il mio tema iniziale di bare bones a GitHub - sentiti libero di prendere una copia per i tuoi progetti.
Vale la pena notare che i temi di Shopify non consentono strutture di cartelle annidate. Qualcos'altro che potresti notare è che tutti i blocchi di uno dei file HTML non hanno la consueta .html estensione. Nei temi Shopify praticamente tutti i file HTML focalizzati hanno un .liquido estensione - ad es. product.liquid e index.liquid.
Il liquido in .liquido è la lingua dei modelli di Shopify. È stato sviluppato dai creatori originali di Shopify ed è ora disponibile come progetto open source su GitHub. Potresti averlo già visto come può essere trovato in molti progetti, tra cui Mixture e SiteLeaf.
Diamo un'occhiata più approfondita alle cartelle e al loro ruolo in un tema.
La cartella delle risorse contiene tutte le immagini, i JavaScript e i file CSS.
Molte persone, me incluso, spesso separano i file in sottocartelle in base al tipo, ad esempio uno per i CSS, uno per le immagini e un altro per JavaScript. Tieni presente che ciò non è possibile in un tema di Shopify; tutti i tuoi file devono essere nella radice del risorse cartella. Inoltre, tutti i file che carichi vengono caricati impostazioni tema tramite l'admin di Shopify (che vedremo in seguito) vengono aggiunti a questa cartella.
Quando lavori sul tuo primo tema potresti non aver bisogno di incontrare il config cartella. Tuttavia, man mano che progredisci con la costruzione del tema, lo troverai incredibilmente utile. Questa cartella è la casa di settings.html file. Noterai che questo è l'unico file che fa fine in a .html estensione.
Se lo apri in un editor di testo, vedrai che è tipico settings.html il file contiene elementi del modulo quali campi di caricamento file, caselle di controllo, elenchi di selezione e input di testo. Questo file consente ai progettisti di temi di creare campi di input per i commercianti per modificare i dati relativi al loro tema.
Per spiegare ulteriormente, diciamo che volevamo rendere possibile la modifica del colore di sfondo del negozio. Potremmo farlo aggiungendo un input di testo nel nostro settings.html file come segue:
Il valore inserito, o il valore predefinito come specificato nell'attributo value, è ora accessibile nei nostri modelli utilizzando il globale (disponibile in ogni modello) impostazioni variabile nel modo seguente:
settings.text_color
Non preoccuparti se ora ti sembra un po 'alieno, alla fine della serie avrà perfettamente senso.
I temi possono essere modificati tramite l'editor online La cartella di layout di solito contiene un file chiamato theme.liquid, anche se può contenere di più come discuteremo più avanti.
I layout sono davvero potenti in quanto ci consentono di definire tutti gli elementi comuni del nostro sito in un unico file. Quando viene richiesta una pagina Shopify esegue il wrapping di questo file attorno al relativo micro modello per il rendering di una singola pagina.
Uno dei principali vantaggi dei layout è che ci consentono di mantenere il nostro codice piacevole e ASCIUTTO (Non ripeterti), ci consente di apportare cambiamenti globali molto facilmente e rende meno complicato il lavoro con i nostri micromodelli interni, dato che abbiamo a che fare con sezioni più piccole di codice.
Esistono due importanti tag Liquid che è necessario includere in un file di layout Shopify. Il primo è content_for_header. Questa variabile deve essere posizionata nella sezione del file di layout. Questo tag consente a Shopify di inserire qualsiasi codice necessario nella testata del documento, come uno script per il rilevamento delle statistiche e i file CSS per la barra di amministrazione "connesso"
Il secondo tag è content_for_layout. Questo di solito si trova nel mezzo del tuo modello nel punto in cui desideri che appaia il tuo modello micro.
I frammenti sono file contenenti blocchi di codice riusabile, anche questi hanno il .liquido estensione del file.
Trovo spesso che i progettisti di temi utilizzino snippet in diversi modi. Personalmente l'approccio che prendo è il seguente:
Esempi di buon uso dei frammenti includono collegamenti sociali e blocchi di impaginazione. Gli snippet sono facili da includere nei nostri modelli utilizzando il tag Liquid % include 'snippetname'%. Si noti che non è necessario aggiungere il .liquido estensione quando si punta al file.
Infine, arriviamo alla cartella in cui trascorrerai la maggior parte del tempo. Mi riferisco spesso ai file in modelli cartella come micro modelli semplicemente perché sono piccoli pezzi di codice che vengono iniettati nel nostro file di layout.
Se la maggior parte dei tuoi siti markup è contenuta in a theme.liquid file di layout quindi questi micro template sono spesso molto piccoli.
Ecco un elenco dei micro modelli che compongono un tema e il loro utilizzo:
404.liquid - Usato quando una pagina è "non trovata"article.liquid - La pagina dell'articolo per un post sul blogblog.liquid - La pagina di elenco degli archivi per un blogcart.liquid - Una pagina di elenco di tutti gli articoli nel carrellocollection.liquid - Una pagina di elenco di tutti i prodotti in una raccolta specificataindex.liquid - La "home page" che è possibile personalizzare per visualizzare uno o più prodotti, articoli di blog e raccoltelist-collections.liquid - Una pagina di elenco per tutte le raccolte di prodottipage.liquid - Una pagina di base per il contenuto, ideale per termini e condizioni, pagine, ecc.product.liquid - Utilizzato per visualizzare un prodotto specificatosearch.liquid - Il modello per visualizzare i risultati della ricercaCome vedrai, ci sono un totale di dieci micro modelli nel modelli cartella. Per fortuna, sono ben nominati quindi dovrebbe essere chiaro quando si lavora con loro quello che fanno.
L'ultimo pezzo del puzzle è sapere quando questi modelli sono resi all'interno di un negozio. In realtà è piuttosto semplice.
Shopify determina quale modello viene visualizzato in base all'URL richiesto. Se hai mai utilizzato uno dei famosi framework di sviluppo, potresti avere familiarità con il concetto di instradamento. Shopify ha il proprio sistema di routing interno ed è questo che determina quale modello viene inviato al browser.
Ecco una panoramica di quale modello è reso come determinato dall'URL:
/ thisisntarealurl → 404.liquid/ Blogs / blog-name / article-id-handle → article.liquid/ Blogs / blog-name → blog.liquid/carrello → cart.liquid/ collezioni → lista-collezioni.liquid/ collezioni / collezione-maniglia → collection.liquid/ Collezioni / collezione-handle / tag → collection.liquid/ → index.liquid/ pages / page-maniglia → page.liquid/prodotti → lista-collezioni.liquid/ Prodotti / product-handle → product.liquid/ Search? Q = ricerca termine → search.liquidGli elementi in denota una variabile che avrà un impatto sui dati caricati in un modello. Ad esempio, se prendiamo il / collezioni / collezione-maniglia Pattern URL un set diverso di dati sarebbe reso se avessimo / collezioni / moto rispetto a / collezioni / automobili.
Come puoi vedere, diversi pattern URL condividono lo stesso file modello, ad es /prodotti e / collezioni entrambi renderanno il list-collections.liquid modello.
allo stesso modo / collezioni /, / collezioni / collezione-maniglia / e / Collezioni / collezione-handle / tag tutti fanno uso di collection.liquid.
Ora che abbiamo una solida conoscenza dei concetti chiave associati a Shopify è ora di passare ad altre questioni legate al codice.
Nella prossima parte di questa serie ti presenterò Liquid, il template template di Shopify e ti mostreremo come iniziare a popolare facilmente i tuoi micro templates con i dati del tuo negozio online. Nel frattempo, se vuoi saperne di più, un buon punto di partenza è shopify.com/fordesigners.
