Themeforest a deschis recent o nouă secțiune în care puteți cumpăra sau vinde teme pentru Shopify! Shopify este o soluție găzduită de comerț electronic, care facilitează începerea unei afaceri online. Poți avea un magazin în picioare în câteva minute.

Pentru a da startul catalogului ThemeForest's Shopify, autorii fiecărui șablon acceptat vor primi un bonus de 100 $ - până când vor exista zece șabloane din categoria.

Shopify este bine cunoscut pentru flexibilitatea designului. Vedeți câteva exemple. Shopify creat (și mai târziu eliberat ca sursă deschisă) Motorul Templating Liquid. Lichidul permite libertatea de proiectare completă pentru designeri.

În acest tutorial vă voi arăta cum să creați o temă Shopify folosind Liquid. Odată ce aveți elementele de bază, puteți crea o temă și o puteți trimite la Themeforest.

Să designem o temă Shopify

Shopify

Ce este lichidul?

Liquid este motorul templating dezvoltat și utilizat de Shopify. Procesează fișierele șablon lichid, care au extensia ".liquid". Fișierele lichide sunt doar fișiere HTML cu cod încorporat. Deoarece Liquid permite personalizarea completă a codului dvs. HTML, puteți să creați un magazin care să arate ca orice.

Lichid a fost inițial dezvoltat în Ruby pentru utilizarea cu Shopify și a fost lansat ca un proiect open source. De atunci, a fost folosită în alte proiecte Ruby on Rails și a fost portată în PHP și javascript.

O previzualizare rapidă a lichidului

Să ne uităm la ce este nevoie pentru a începe cu lichidul.

 
 % pentru produs în produse% 
 
product.title
 Numai product.price | money_with_currency 
product.description | frumos imprimat | truncate: 200
 
 % endfor% 

După cum puteți vedea, Liquid este doar un cod HTML cu un cod încorporat. De aceea Liquid este atât de puternic, vă oferă putere deplină asupra codului dvs. și ușurează lucrul cu variabilele pe care le aveți disponibile.

Ce se întâmplă mai sus?

În lichid, există două tipuri de marcare: producție și Etichete. Lichid Etichete sunt înconjurate de paranteze curbate și semne procentuale; producție este înconjurat de două paranteze curbate.

În fragmentul de mai sus, prima linie de lichid este: % pentru produs în produse% ... % endfor% Acesta este un exemplu de etichetă lichidă. pentru Eticheta bifă o colecție de articole și vă permite să lucrați cu fiecare. Dacă ați folosit vreodată pentru bucle în PHP, Ruby, javascript, sau (introduceți aici orice limbaj de programare), funcționează la fel în Liquid.

Următoarea linie Liquid din fragmentul de mai sus este product.title. Acesta este un exemplu de ieșire lichidă. Acest lucru va cere titlul unui produs și va afișa rezultatul pe ecran.

Următoarea linie de lichid introduce ceva nou: product.price | money_with_currency Aici avem un exemplu de filtru lichid. Acestea vă permit să procesați un șir sau o variabilă dată. Filtrele iau valoarea la stânga de la ele și fac ceva cu ele. Acest filtru special este numit format_as_money; este nevoie de un număr, o prependă cu un semn de dolar și o împachetează cu simbolul valutar corect.

Un exemplu simplu:

 product.price | money_with_currency

ar putea genera următorul cod HTML

 $ 45.00 USD

Ultima linie de lichid de mai sus: product.description | frumos imprimat | truncate: 200 Afișează modul în care puteți filtra împreună lanțurile. Filtrele acționează asupra valorii care se află în partea stângă a acestora, chiar dacă această valoare se întâmplă să fie rezultatul unui alt filtru. Deci, fragmentul în cauză va aplica prettyprint filtrează la descrierea produsului, și apoi va aplica trunchia filtrați la rezultatele rezultatelor prettyprint. În acest fel, puteți alătura împreună cât mai multe filtre lichide de care aveți nevoie!

Ce altceva oferă lichidă?

În ceea ce privește etichetele lichide, pe lângă pentru tag, există mai multe altele. Cele mai frecvente sunt:

Cometariu:

 % comment% Acest text nu va fi redat % endcomment%

Dacă / Else:

 % if product.description == ""% Acest produs nu are descriere! % else% Acest produs este descris! % endif%

Caz:

 % case temp% % atunci când 'product'% Acesta este un produs.liquid % atunci când 'cart'% Acesta este un cart.liquid % endcase%

Consultați lista completă a etichetelor.

Liquid oferă, de asemenea, o mulțime de filtre pe care le puteți utiliza pentru a vă masura datele. Unele comune sunt:

Valorifica:

 "Luni" | capitalizează # => Luni

A adera:

 product.tags | se alătură: ',' # => zăpadă adâncă, sezon 2009

Data:

 Postat pe article.created_at | data: "% B% d,"% y " # => Postat pe 26 ianuarie '09

Consultați lista completă a filtrelor disponibile.

Anatomia unei tematici Shopify

Temele Shopify toate au o structură de director simplu. Se compune dintr-un dosar de active, aspect și șabloane. Să vedem ce se întâmplă acolo:

1. folderul de materiale: În dosarul de materiale stocați toate fișierele pe care doriți să le utilizați cu tema. Aceasta include toate foile de stil, scripturile, imaginile, fișierele audio etc. pe care le veți folosi. În șabloanele dvs. puteți accesa aceste fișiere cu ASSET_URL Filtru.

    "logo.gif" | asset_url | img_tag: "Logo principal" # => 

2. layout folder: Acest dosar ar trebui să conțină doar un fișier numit theme.liquid. The theme.liquid conține elementele globale pentru tema Shopify. Acest cod va fi înfășurat în jurul tuturor celorlalte șabloane din magazin. Iată un exemplu de temă foarte importantă: lichid:

        'layout.css' | asset_url | stylesheet_tag conținut_for_încălțător   
    
   shop.name
    
    
    content_for_layout 
    
    Toate prețurile sunt în shop.currency | Powered by Shopify 
     

   Elemente necesare

   Există două elemente foarte importante care trebuie să fie prezente într-un fișier theme.liquid. Primul este content_for_header. Această variabilă trebuie plasată în capul temei. Lichid. Aceasta permite Shopify să introducă orice cod necesar în capul documentului, cum ar fi un script pentru urmărirea statisticilor. Pentru cei familiarizați cu WordPress, acest lucru este destul de similar cu funcția wp_head ().

   Celălalt element FOARTE important este content_for_layout. Această variabilă trebuie plasată în corpul temei. Lichid; este locul în care toate celelalte template-uri lichide vor fi redate.

3. șabloane: Acest dosar conține restul șabloanelor Shopify. Se compune din:
   1. index.liquid: Afișată ca pagină principală de index a magazinului dvs..
   2. product.liquid: Fiecare produs va folosi acest șablon pentru a se afișa.
   3. cart.liquid: Afișează coșul de cumpărături al utilizatorului curent.
   4. collection.liquid: Afișat pentru colecții de produse.
   5. page.liquid: Afișat pentru toate paginile statice pe care magazinul le-a creat.
   6. blog.liquid: Afișat pentru orice bloguri Shopify pentru magazin.
   7. article.liquid: Se afișează pentru articole în blog și include un formular pentru trimiterea comentariilor.
   8. 404.liquid: Afișată pentru orice moment, magazinul returnează un număr de 404.
   9. search.liquid: Afișat pentru rezultatele căutării magazinelor.

După cum probabil ați ghicit, fiecare dintre aceste șabloane are acces la diferite variabile. De exemplu, produsul.liquid are acces la un produs care conține produsul curent afișat, blog.liquid are acces la un blogul variabilă și index.liquid are acces la toate. Dacă sunteți interesat de variabilele pe care le puteți utiliza în ce șablon, consultați documentația privind lichidele.

Un schelet de bază pentru a începe

Cel mai bun lucru în ceea ce privește proiectarea pentru Shopify este că puteți să folosiți toate abilitățile pe care le aveți deja: HTML, CSS, JS, etc. Singurul obstacol în proces este familiarizarea cu care variabile lichide sunt disponibile în fiecare șablon.

Aici intră Vision.

Viziune - Shopify într-o cutie

Viziune

Ce este Vision?

Vision este o aplicație autonomă care vă permite să creați teme pentru magazinele Shopify de pe mașina dvs. locală, fără a fi nevoie să vă înscrieți pentru un magazin sau să configurați o bază de date sau alte lucruri.

De ce am nevoie pentru a rula Vision?

Viziunea vine complet cu tot ce este necesar pentru a alerga direct din cutie. Dacă aveți un editor de text și un browser web instalat, sunteți gata să vă răsturnați.

Ca și cum acest lucru nu ar fi de ajuns, Vision vine pre-încărcat cu temele pregătite de Shopify. Shopify a permis oamenilor să folosească aceste teme ca elemente de construcție, astfel încât să puteți începe cu una dintre aceste teme existente ca bază și să le extindeți pe ea!

Afișați temele implicite

rezumat

Shopify este o platformă de comerț electronic cu creștere rapidă, deja cu mii de vânzători care doresc să își arate produsele. Folosind Vision, puteți lovi terenul și să începeți să vă dezvoltați în cel mai scurt timp. Primele zece șabloane postate în categoria Themeforest Shopify obțin un extra $ 100. Deci, începeți!

Dacă aveți nevoie de mai multe informații despre proiectarea cu Shopify, acestea au o documentație extensivă despre wiki-ul lor. Check out Ghidul Tematica Shopify, Utilizarea lichidului și Noțiuni de bază cu Viziunea.

Cele mai bune template-uri Shopify de la ThemeForest ... Departe!

• 

  Rătăcitor

  "Această temă elegantă Shopify oferă linii curate și accente de design moderne care vă prezintă produsele dvs. JOCURI ușoare jQuery permit produselor dvs. să fie vizualizate în detaliu."

  Vezi Tema

• 

  Fantezie roz

  "O temă de cumpărături cu design modern, de design fantezist 2.0".

  Vezi Tema

• Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.