Share
Themeforest ha recentemente aperto una nuova sezione in cui è possibile acquistare o vendere temi per Shopify! Shopify è una soluzione di e-commerce in hosting che facilita l'avvio di un'attività online. Puoi avere un negozio attivo e funzionante in pochi minuti.
Per avviare il catalogo Shopify di ThemeForest, gli autori di ciascun modello accettato riceveranno un bonus di $ 100 fino a quando non ci saranno dieci modelli nella categoria.
Shopify è ben noto per la sua flessibilità di design. Guarda alcuni esempi. Shopify ha creato (e successivamente rilasciato come open source) il Liquid Templating Engine. Il liquido consente la completa libertà di design per i progettisti.
In questo tutorial mostrerò come progettare un tema Shopify usando Liquid. Una volta che hai le basi, puoi progettare un tema e inviarlo a Themeforest.
Liquid è il motore dei templating sviluppato e utilizzato da Shopify. Elabora i file di modelli liquidi, che hanno l'estensione ".liquid". I file liquidi sono semplicemente file HTML con codice incorporato. Poiché Liquid consente la completa personalizzazione del tuo HTML, puoi letteralmente progettare un negozio per assomigliare a qualsiasi cosa.
Liquid è stato originariamente sviluppato in Ruby per l'uso con Shopify ed è stato rilasciato come progetto open source. Da allora, è stato utilizzato in altri progetti di Ruby on Rails ed è stato convertito in PHP e javascript.
Diamo un'occhiata a ciò che serve per iniziare con il liquido.
product.description | prettyprint | troncato: 200
Come puoi vedere, Liquid è solo HTML con qualche codice incorporato. Questo è il motivo per cui Liquid è così potente, ti dà pieno potere sul tuo codice e rende facile lavorare con le variabili che hai a disposizione.
In Liquid, ci sono due tipi di markup: Produzione e tag. Liquido tag sono circondati da parentesi graffe e segni di percentuale; produzione è circondato da due parentesi graffe.
Nel frammento di cui sopra, la prima riga di Liquid è: % per prodotto nei prodotti% ... % endfor% Questo è un esempio di Liquid Tag. Il per Tag loop su una collezione di oggetti e ti consente di lavorare con ciascuno di essi. Se hai mai usato loop in PHP, Ruby, javascript o (inserisci qui qualsiasi linguaggio di programmazione), funziona allo stesso modo in Liquid.
La prossima riga di Liquid nel frammento sopra è product.title. Questo è un esempio di un output liquido. Ciò chiederà il titolo di un prodotto e visualizzerà il risultato sullo schermo.
La prossima linea di Liquid introduce qualcosa di nuovo: product.price | money_with_currency Qui abbiamo un esempio di un filtro liquido. Permettono di elaborare una determinata stringa o variabile. I filtri prendono il valore a sinistra di se stessi e fanno qualcosa con esso. Questo particolare filtro è chiamato format_as_money; prende un numero, lo prepone con un segno di dollaro e lo avvolge con il simbolo di valuta corretto.
Accentsconagua
product.price | money_with_currency potrebbe generare il seguente codice HTML
$ 45.00 Dollaro statunitense L'ultima riga di Liquid sopra: product.description | prettyprint | troncato: 200 mostra come è possibile concatenare i filtri. I filtri agiscono sul valore che si trova a sinistra di essi, anche se quel valore risulta essere il risultato di un altro filtro. Quindi lo snippet in questione applicherà il prettyprint filtrare a Descrizione del prodotto, e quindi applicherà il troncare filtro per i risultati di prettyprint. In questo modo, puoi concatenare tutti i filtri liquidi di cui hai bisogno!
In termini di tag liquidi, oltre al per tag, ce ne sono molti altri. I più comuni sono:
% comment% Questo testo non verrà visualizzato % endpoint%
% if product.description == ""% Questo prodotto non ha descrizione! % else% Questo prodotto è descritto! % finisci se %
% case template% % quando 'product'% Questo è un prodotto.liquid % quando 'cart'% Questo è un carrelloquarquesto % endcase%
Controlla l'elenco completo dei tag.
Liquid offre anche molti filtri che puoi usare per massaggiare i tuoi dati. Alcuni comuni sono:
"Lunedì" | maiuscolo # => lunedì
product.tags | join: ',' # => legno, neve profonda, stagione 2009
Pubblicato su article.created_at | data: "% B% d, '% y" # => Pubblicato il 26 gennaio '09
Controlla l'elenco completo dei filtri disponibili.
I temi di Shopify hanno tutti una struttura di directory semplice. Consiste in una cartella di risorse, layout e modelli. Diamo un'occhiata a cosa va dove:
ASSET_URL Filtro. "logo.gif" | asset_url | img_tag: "Logo principale" # =>
Shop.name 'layout.css' | asset_url | stylesheet_tag content_for_headershop.name
content_for_layoutTutti i prezzi sono in shop.currency | Alimentato da Shopify
Ci sono due elementi MOLTO importanti che devono essere presenti in un file theme.liquid. Il primo è content_for_header. Questa variabile deve essere inserita nella testa del tuo theme.liquid. Consente a Shopify di inserire qualsiasi codice necessario nella testata del documento, ad esempio uno script per il rilevamento delle statistiche. Per chi ha familiarità con WordPress, questo è abbastanza simile alla funzione wp_head ().
L'altro elemento MOLTO importante è content_for_layout. Questa variabile deve essere inserita nel corpo del tuo theme.liquid; è il luogo in cui saranno resi tutti gli altri tuoi modelli Liquid.
Come avrai intuito, ognuno di questi modelli ha accesso a diverse variabili. Ad esempio, product.liquid ha accesso a a Prodotto variabile che contiene il prodotto corrente che viene visualizzato, blog.liquid ha accesso a a blog variabile e index.liquid ha accesso a tutti loro. Se sei interessato a quali variabili puoi utilizzare in quale modello, consulta la documentazione di Liquid.
La cosa migliore del design di Shopify è che puoi usare tutte le abilità che hai già: HTML, CSS, JS, ecc. L'unico roadblock nel processo sta diventando familiare con quali variabili Liquid sono disponibili in ogni template.
È qui che entra in gioco Vision.
Vision è un'applicazione stand-alone che ti consente di creare temi per gli store Shopify sulla tua macchina locale senza doverti registrare per un negozio o configurare un database o tutte quelle altre cose geek.
La visione è completa di tutto il necessario per funzionare subito fuori dalla scatola. Se hai installato un editor di testo e un browser web, sei pronto per il lancio.
Come se ciò non bastasse, Vision viene pre-caricato con i temi già pronti di Shopify. Shopify ha permesso alle persone di usare questi temi come elementi di base, quindi puoi iniziare con uno di questi temi esistenti come base ed espanderci sopra!
Shopify è una piattaforma di e-commerce in rapida crescita già con migliaia di venditori che cercano di mostrare i loro prodotti. Usando Vision, puoi iniziare a correre e iniziare a svilupparsi in poco tempo. I primi dieci modelli pubblicati nella categoria Shopify di Themeforest ottengono un extra di $ 100. Quindi inizia!
Se hai bisogno di maggiori informazioni sulla progettazione con Shopify, hanno una vasta documentazione sulla loro wiki. Consulta la Guida ai temi Shopify, Uso di liquidi e Guida introduttiva di Vision.
"Questo elegante tema di Shopify presenta linee pulite e accenti dal design moderno che mettono in risalto i tuoi prodotti. Le lightbox jQuery personalizzate consentono di visualizzare i tuoi prodotti in ogni dettaglio."
Visualizza tema
"Un tema shopify con un design Web 2.0 moderno e sofisticato."
Visualizza tema
