Themeforest öppnade nyligen en ny sektion där du kan köpa eller sälja teman till Shopify! Shopify är en värdbaserad e-handelslösning som gör det enkelt att komma igång med en online-verksamhet. Du kan få en butik igång på några minuter.

För att starta ThemeForests Shopify-katalog får författarna till varje accepterad mall en bonus på $ 100 - tills det finns tio mallar i kategorin.

Shopify är välkänt för sin flexibilitet i design. Se några exempel. Shopify skapade (och senare släpptes som öppen källkod) Liquid Templating Engine. Vätska ger fullständig designfrihet för designers.

I den här handledningen visar jag hur man utformar ett Shopify-tema med Liquid. När du har grunderna kan du designa ett tema och skicka in det till Themeforest.

Låt oss utforma ett Shopify-tema

Shopify

Vad är vätska?

Vätska är den templerande motorn som utvecklats för och används av Shopify. Den hanterar flytande mallfiler, som har ".lidlig" förlängning. Flytande filer är helt enkelt HTML-filer med inbäddad kod. Eftersom Liquid tillåter fullständig anpassning av din HTML, kan du bokstavligen utforma en butik för att se ut som någonting.

Vätska utvecklades ursprungligen i Ruby för användning med Shopify och släpptes som ett open source-projekt. Sedan dess har den använts i andra Ruby on Rails-projekt, och har blivit portad till PHP och javascript.

En snabb förhandsgranskning av vätska

Låt oss titta på vad som krävs för att komma igång med vätska.

 
 % för produkt i produkter% 
 
product.title
 Endast product.price | money_with_currency 
product.description | prettyprint | avkorta: 200
 
 % endfor% 

Som du kan se är Liquid bara HTML med någon inbäddad kod. Det är därför Liquid är så kraftfull, det ger dig full effekt över din kod och gör det enkelt att arbeta med de variabler du har tillgång till.

Vad händer ovan?

I Vätska finns det två typer av märkning: Produktion och Tags. Flytande Tags är omgivna av lockiga parenteser och procenttecken; produktion är omgiven av två krökta parenteser.

I ovanstående fragment är den första raden av flytande: % för produkt i produkter% ... % endfor% Detta är ett exempel på en flytande tagg. De för Tag loopar över en samling objekt och låter dig arbeta med var och en. Om du någonsin har använt slingor i PHP, Ruby, javascript eller (lägg in något programmeringsspråk här) fungerar det på samma sätt i flytande.

Nästa rad Liquid i ovanstående kod är product.title. Detta är ett exempel på en Liquid Output. Detta kommer att be om en produkts titel och visa resultatet på skärmen.

Nästa rad Liquid introducerar något nytt: product.price | money_with_currency Här har vi ett exempel på ett flytande filter. De låter dig bearbeta en viss sträng eller variabel. Filter tar värdet till vänster om sig själva och gör något med det. Det här filteret heter format_as_money; det tar ett nummer, lägger in det med ett dollartecken och sveper det med rätt valutasymbol.

Ett enkelt exempel:

 product.price | money_with_currency

kan generera följande HTML

 $ 45.00 USD

Den sista linjen Liquid ovan: product.description | prettyprint | avkorta: 200 visar hur du kan kedja filter tillsammans. Filter verkar på värdet som ligger till vänster om dem, även om det värdet råkar vara resultatet av ett annat filter. Så det aktuella fragmentet gäller för pretty filtrera till Produktbeskrivning, och då kommer att applicera stympa filtrera till resultaten av pretty. På så sätt kan du kedja ihop så många Liquid-filter som du behöver!

Vad annat erbjuder Liquid?

När det gäller Liquid Tags, förutom för tagg, det finns flera andra. De vanligaste är:

Kommentar:

 % comment% Den här texten kommer inte att visas % endcomment%

Om annat:

 % om product.description == ""% Den här produkten har ingen beskrivning! % else% Den här produkten beskrivs! % endif%

Fall:

 % case template% % when 'product'% Det här är en product.liquid % when 'cart'% Det här är en cart.liquid % endcase%

Kolla in hela listan med Taggar.

Vätska erbjuder också massor av filter som du kan använda för att massage dina data. Några vanliga är:

Kapitalisera:

 "Måndag" | kapitalisera # => måndag

Ansluta sig:

 product.tags | gå med: ',' # => trä, djup snö, 2009 säsong

Datum:

 Publicerad den article.created_at | datum: "% B% d, '% y" # => Skickat den 26 januari '09

Kolla in hela listan med tillgängliga filter.

Anatomi av ett Shopify-tema

Shopify-teman har alla en enkel katalogstruktur. Den består av en mapp för tillgångar, layout och mallar. Låt oss titta på vad som händer där:

1. tillgångar mapp: I aktivitetsmappen lagras alla filer som du vill använda med ditt tema. Detta inkluderar alla stilark, skript, bilder, ljudfiler, etc. som du ska använda. I dina mallar kan du komma åt dessa filer med ASSET_URL Filtrera.

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

2. layoutmapp: Den här mappen ska innehålla bara en fil som heter theme.liquid. Theme.liquid håller de globala elementen för ditt Shopify-tema. Denna kod kommer att vikas runt alla andra mallar i din butik. Här är ett exempel på ett mycket grundläggande tema.liquid:

        'layout.css' | asset_url | stylesheet_tag content_for_header   
    
   shop.name
    
    
    content_for_layout 
    
    Alla priser är i shop.currency | Drivs av Shopify 
     

   Obligatoriska element

   Det finns två mycket viktiga element som måste vara närvarande i en theme.liquid-fil. Den första är content_for_header. Denna variabel måste placeras i huvudet på ditt theme.liquid. Det tillåter Shopify att infoga nödvändig kod i dokumenthuvudet, till exempel ett skript för statistikspårning. För den som är bekant med WordPress, är det ganska lik wp_head () -funktionen.

   Det andra mycket viktiga elementet är content_for_layout. Denna variabel måste placeras i kroppen av ditt theme.liquid; Det är den plats där alla dina andra flytande mallar kommer att göras.

3. mallar mapp: Den här mappen innehåller resten av dina Shopify-mallar. Den består av:
   1. index.liquid: Visas som huvudindex för din butik.
   2. product.liquid: Varje produkt kommer att använda denna mall för att visa sig själv.
   3. cart.liquid: Visar den aktuella användarens kundvagn.
   4. collection.liquid: Visas för samlingar av produkter.
   5. page.liquid: Visas för eventuella statiska sidor som butiken kan ha skapat.
   6. blog.liquid: Visas för alla Shopify-bloggar till affären.
   7. article.liquid: Visas för alla bloggartiklar och innehåller ett formulär för inlämning av kommentarer.
   8. 404.liquid: Visas när som helst butiken returnerar en 404.
   9. search.liquid: Visas för butikssökresultat.

Som du kanske har gissat har var och en av dessa mallar tillgång till olika variabler. Till exempel har product.liquid tillgång till a produkt variabel som innehåller den aktuella produkten som visas, har blog.liquid tillgång till a blog variabel och index.liquid har tillgång till dem alla. Om du är intresserad av vilka variabler du kan använda i vilken mall, kolla Liquid dokumentationen.

Ett grundläggande skelett att komma igång

Det bästa med att utforma för Shopify är att du får använda alla färdigheter som du redan har: HTML, CSS, JS, etc. Det enda blocket i processen är att bli bekant med vilka Liquid-variabler finns i varje mall.

Det är här Vision kommer in.

Vision - Shopify i en låda

Syn

Vad är Vision?

Vision är en fristående applikation som låter dig skapa teman för Shopify-butiker på din lokala dator utan att behöva anmäla dig till en butik eller konfigurera en databas eller alla andra geekiga saker.

Vad behöver jag köra Vision?

Vision kommer komplett med allt som behövs för att springa rakt ut ur lådan. Om du har en textredigerare och en webbläsare installerad är du redo att rulla.

Som om det inte räckte, kommer Vision pre-loaded med Shopifys färdiga teman. Shopify har gjort det möjligt för människor att använda dessa teman som byggstenar, så att du kan börja med en av dessa befintliga teman som bas och expandera på det!

Shopify standard teman

Sammanfattning

Shopify är en snabbt växande e-handelsplattform redan med tusentals säljare som vill visa sina produkter. Med Vision kan du slå marken och börja utvecklas på nolltid. De första tio mallarna som publiceras i Themeforests Shopify-kategori får extra $ 100. Så börja!

Om du behöver mer information om design med Shopify, har de omfattande dokumentation på deras wiki. Kolla in The Shopify Tema Guide, Använda Vätska, och Komma igång med Vision.

De bästa Shopify-mallarna från ThemeForest ... så långt!

• 

  Drifter

  "Detta snygga Shopify-tema har rena linjer och moderna designaccenter som visar dina produkter. Anpassade jQuery-ljuslådor låter dina produkter ses i detalj."

  Visa tema

• 

  Fancy Pink

  "Ett shopify-tema med modern, snygg webbdesign."

  Visa tema

• Prenumerera på NETTUTS RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.