Share
Themeforest åpnet nylig en ny seksjon hvor du kan kjøpe eller selge temaer for Shopify! Shopify er en vert for e-handelsløsning som gjør det enkelt å komme i gang med en Internett-bedrift. Du kan få en butikk oppe i løpet av få minutter.
For å starte ThemeForests Shopify-katalog, vil forfatterne til hver akseptert mal få en $ 100 bonus - til det er ti maler i kategorien.
Shopify er kjent for sin fleksibilitet i design. Se noen eksempler. Shopify opprettet (og senere utgitt som åpen kildekode) Liquid Templating Engine. Væske gir fullstendig designfrihet for designere.
I denne opplæringen vil jeg vise hvordan du designer et Shopify-tema med Liquid. Når du har det grunnleggende, kan du designe et tema og sende det til Themeforest.
Væske er den templerende motoren utviklet for og brukt av Shopify. Den behandler flytende malfiler, som har ".lidelig" forlengelsen. Flytende filer er bare HTML-filer med innebygd kode. Siden Liquid tillater full tilpasning av HTML, kan du bokstavelig talt tegne en butikk for å se ut som noe.
Væske ble opprinnelig utviklet i Ruby for bruk med Shopify og ble utgitt som et open source-prosjekt. Siden da har den blitt brukt i andre Ruby on Rails-prosjekter, og har blitt portet til PHP og javascript.
La oss se på hva som trengs for å komme i gang med væske.
product.description | prettyprint | avkorte: 200
Som du kan se, er Liquid bare HTML med noen innebygd kode. Det er derfor Liquid er så kraftig, det gir deg full kraft over koden din og gjør det enkelt å arbeide med variablene du har tilgjengelig.
I Væske er det to typer merking: Produksjon og Tags. Væske Tags er omgitt av krølle parentes og prosent tegn; produksjon er omgitt av to krøllede parenteser.
I ovennevnte kutt er den første linjen med væske: % for produkt i produkter% ... % endfor% Dette er et eksempel på et flytende merke. De til Merk løkkene over en samling av gjenstander og lar deg jobbe med hver enkelt. Hvis du noen gang har brukt til sløyfer i PHP, Ruby, javascript, eller (sett inn et programmeringsspråk her), fungerer det på samme måte i flytende.
Neste linje med væske i den ovennevnte koden er product.title. Dette er et eksempel på en flytende utgang. Dette vil be om et produkts tittel og vise resultatet til skjermen.
Den neste linjen Liquid introduserer noe nytt: product.price | money_with_currency Her har vi et eksempel på et flytende filter. De lar deg behandle en gitt streng eller variabel. Filtre tar verdien til venstre for seg selv og gjør noe med det. Dette bestemte filteret kalles format_as_money; det tar et tall, prepends det med et dollarskilt og bryter det med riktig valutasymbol.
Accentsconagua
product.price | money_with_currency kan generere følgende HTML
$ 45.00 USD Den siste linjen med væske over: product.description | prettyprint | avkorte: 200 viser hvordan du kan kjede filtre sammen. Filtre virker på verdien som er til venstre for dem, selv om verdien som er resultatet av et annet filter. Så vil det aktuelle kuttet gjelde pretty filter til produktbeskrivelse, og da vil søke på avkorte filtrer til resultatene av pretty. På denne måten kan du koble sammen så mange flytende filtre som du trenger!
Når det gjelder Liquid Tags, foruten til tag, det er flere andre. De mest vanlige er:
% comment% Denne teksten blir ikke gjengitt % endcomment%
% if product.description == ""% Dette produktet har ingen beskrivelse! % else% Dette produktet er beskrevet! % slutt om %
% case template% % when 'product'% Dette er en product.liquid % når 'cart'% Dette er en cart.liquid % endcase%
Sjekk ut hele listen over merker.
Væske tilbyr også mange filtre du kan bruke til å massere dataene dine. Noen vanlige er:
"Mandag" | kapitalisere # => mandag
product.tags | bli med: ',' # => tre, dyp snø, 2009 sesong
Skrevet på article.created_at | dato: "% B% d, '% y" # => Skrevet 26. januar '09
Sjekk ut hele listen over filtre som er tilgjengelige.
Shopify-temaer har alle en enkel katalogstruktur. Den består av en formue for eiendeler, layout og maler. La oss se på hva som skjer der:
ASSET_URL Filter. "logo.gif" | asset_url | img_tag: "Hovedlogo" # =>
Shop.name 'layout.css' | asset_url | stylesheet_tag content_for_headershop.name
content_for_layoutAlle priser er i shop.currency | Drevet av Shopify
Det er to svært viktige elementer som må være til stede i en theme.liquid-fil. Den første er content_for_header. Denne variabelen må plasseres i hodet på temaet.liquid. Det tillater Shopify å sette inn nødvendig kod i dokumenthodet, for eksempel et script for statistikksporing. For dette er kjent med WordPress, er dette ganske lik wp_head () -funksjonen.
Det andre veldig viktige elementet er content_for_layout. Denne variabelen må plasseres i kroppen av ditt tema.liquid; Det er stedet der alle andre flytende maler blir gjengitt.
Som du kanskje har gjettet, har hver av disse maler tilgang til forskjellige variabler. For eksempel har product.liquid tilgang til a produkt variabel som inneholder det nåværende produktet som vises, har blog.liquid tilgang til a blog variabel og index.liquid har tilgang til alle dem. Hvis du er interessert i hvilke variabler du kan bruke i hvilken mal, vennligst se Liquid dokumentasjonen.
Det beste ved å designe for Shopify er at du får brukt alle ferdighetene du allerede har: HTML, CSS, JS, etc. Den eneste veiblokken i prosessen blir kjent med hvilke flytende variabler som er tilgjengelige i hver mal.
Det er her Vision kommer inn.
Vision er et frittstående program som lar deg lage temaer for Shopify-butikker på din lokale maskin uten å måtte registrere deg for en butikk eller sette opp en database eller alle de andre geeky ting.
Visjon kommer komplett med alt som trengs for å løpe rett ut av esken. Hvis du har en tekstredigerer og en nettleser installert, er du klar til å rulle.
Som om det ikke var nok, kommer Vision pre-loaded med Shopify sine ferdige temaer. Shopify har gitt folk mulighet til å bruke disse temaene som byggesteiner, slik at du kan starte med en av disse eksisterende temaene som en base og utvide på det!
Shopify er en raskt voksende e-handelsplattform allerede med tusenvis av selgere som ønsker å vise frem sine produkter. Ved hjelp av Vision kan du slå bakken og begynne å utvikle på kort tid. De ti første malene som er lagt ut på Themeforests Shopify-kategori, får en ekstra $ 100. Så kom i gang!
Hvis du trenger mer informasjon om design med Shopify, har de omfattende dokumentasjon på deres wiki. Ta en titt på The Shopify Tema Guide, Bruk Væske, og Komme i gang med Vision.
"Dette elegante Shopify-temaet har rene linjer og moderne design-aksenter som viser frem dine produkter. Egendefinerte jQuery-lysbokser lar produktene dine sees i full detalj."
Se tema
"Et shopify tema med moderne, fancy web 2.0 design."
Se tema
