Share
Themeforest heeft onlangs een nieuw gedeelte geopend waar je thema's kunt kopen of verkopen voor Shopify! Shopify is een gehoste e-commerce oplossing die het gemakkelijk maakt om aan de slag te gaan met een online bedrijf. U kunt binnen enkele minuten een winkel draaiende houden.
Om ThemeForest's Shopify-catalogus te starten, ontvangen de auteurs van elke geaccepteerde sjabloon een bonus van $ 100 - totdat er tien sjablonen in de categorie zijn.
Shopify staat bekend om zijn flexibele ontwerp. Zie enkele voorbeelden. Shopify heeft de Liquid Templating Engine gemaakt (en later vrijgegeven als open source). Liquid staat complete ontwerpvrijheid toe voor ontwerpers.
In deze tutorial laat ik zien hoe je een Shopify-thema ontwerpt met Liquid. Zodra je de basis hebt, kun je een thema ontwerpen en indienen bij Themeforest.
Liquid is de sjablonengine die is ontwikkeld voor en wordt gebruikt door Shopify. Het verwerkt vloeibare sjabloonbestanden met de extensie ".liquid". Vloeibare bestanden zijn eenvoudig HTML-bestanden met ingesloten code. Omdat Liquid de volledige aanpassing van uw HTML mogelijk maakt, kunt u een winkel letterlijk ontwerpen om op alles te lijken.
Liquid is oorspronkelijk ontwikkeld in Ruby voor gebruik met Shopify en is uitgebracht als een open source-project. Sindsdien is het gebruikt in andere Ruby on Rails-projecten en geporteerd naar PHP en javascript.
Laten we eens kijken wat er nodig is om aan de slag te gaan met vloeistof.
product.description | prettyprint | truncate: 200
Zoals je ziet, is Liquid slechts HTML met een ingesloten code. Dit is de reden waarom Liquid zo krachtig is dat het u volledige controle over uw code geeft en het gemakkelijk maakt om met de variabelen te werken die u beschikbaar hebt.
In Liquid zijn er twee soorten markeringen: uitgang en Tags. Vloeistof Tags zijn omgeven door accolades en procenttekens; uitgang is omringd door twee accolades.
In het bovenstaande fragment is de eerste regel van Liquid: % voor product in producten% ... % endfor% Dit is een voorbeeld van een vloeibare tag. De voor Tag lus over een verzameling items en stelt u in staat om met elke collectie te werken. Als je ooit hebt gebruikt voor loops in PHP, Ruby, javascript of (voeg hier een programmeertaal in), werkt het op dezelfde manier in Liquid.
De volgende regel met Liquid in het bovenstaande fragment is product.title. Dit is een voorbeeld van een vloeistofuitvoer. Dit vraagt om de titel van een product en geeft het resultaat weer op het scherm.
De volgende regel Liquid introduceert iets nieuws: product.price | money_with_currency Hier hebben we een voorbeeld van een vloeistoffilter. Hiermee kunt u een gegeven reeks of variabele verwerken. Filters nemen de waarde links van zichzelf en doen er iets mee. Dit specifieke filter wordt genoemd format_as_money; er is een getal voor nodig, vooraf geplaatst met een dollarteken en omwikkeld met het juiste valutasymbool.
Accentsconagua
product.price | money_with_currency kan de volgende HTML genereren
$ 45.00 Amerikaanse Dollar De laatste regel met Liquid hierboven: product.description | prettyprint | truncate: 200 laat zien hoe je filters aan elkaar kunt koppelen. Filters werken op de waarde links ervan, zelfs als die waarde toevallig het resultaat is van een ander filter. Dus het betreffende fragment zal het prettyprint filteren naar Productomschrijving, en dan zal de afknotten filter op de resultaten van prettyprint. Op deze manier kunt u zoveel Liquid-filters aan elkaar koppelen als u nodig heeft!
In termen van Liquid Tags, naast de voor tag, er zijn verschillende andere. De meest voorkomende zijn:
% comment% Deze tekst wordt niet weergegeven % endcomment%
% if product.description == ""% Dit product heeft geen beschrijving! % else% Dit product is beschreven! % stop als %
% case template% % when 'product'% Dit is een product.liquid % when 'cart'% Dit is een cart.liquid % endcase%
Bekijk de volledige lijst met tags.
Liquid biedt ook veel filters die u kunt gebruiken om uw gegevens te masseren. Enkele veel voorkomende zijn:
"Maandag" | kapitaliseren # => maandag
product.tags | join: ',' # => houten, diepe sneeuw, seizoen 2009
Geplaatst op article.created_at | datum: "% B% d, '% y" # => Geplaatst op 26 januari, '09
Bekijk de volledige lijst met beschikbare filters.
Shopify-thema's hebben allemaal een eenvoudige directorystructuur. Het bestaat uit een map met items, lay-out en sjablonen. Laten we eens kijken naar wat waar gaat:
ASSET_URL Filter. "logo.gif" | asset_url | img_tag: "Hoofdlogo" # =>
winkel naam 'layout.css' | asset_url | stylesheet_tag content_for_headerwinkel naam
content_for_layoutAlle prijzen zijn in shop.currency | Mogelijk gemaakt door Shopify
Er zijn twee ZEER belangrijke elementen die aanwezig moeten zijn in een theme.liquid-bestand. De eerste is content_for_header. Deze variabele moet in de kop van uw theme.liquid worden geplaatst. Hiermee kan Shopify elke noodzakelijke code invoegen in de documentkop, zoals een script voor het bijhouden van statistieken. Voor degenen die bekend zijn met WordPress, lijkt dit vrij veel op de functie wp_head ().
Het andere ZEER belangrijke element is content_for_layout. Deze variabele moet in de body van uw theme.liquid worden geplaatst; het is de plek waar al je andere vloeibare sjablonen worden weergegeven.
Zoals je misschien al geraden hebt, heeft elk van deze sjablonen toegang tot verschillende variabelen. Product.liquid heeft bijvoorbeeld toegang tot a artikel variabele die het huidige product bevat dat wordt weergegeven, blog.liquid heeft toegang tot a blog variabele, en index.liquid heeft toegang tot al deze. Als u geïnteresseerd bent in welke variabelen u in welke sjabloon kunt gebruiken, raadpleegt u de documentatie bij Liquid.
Het beste ding over ontwerpen voor Shopify is dat je alle vaardigheden kunt gebruiken die je al hebt: HTML, CSS, JS, etc. De enige wegversperring in het proces is bekend worden met welke vloeibare variabelen beschikbaar zijn in elke sjabloon.
Dit is waar Visie binnenkomt.
Vision is een stand-alone toepassing waarmee u thema's kunt maken voor Shopify-winkels op uw lokale computer zonder dat u zich hoeft aan te melden voor een winkel of een database of al die andere nerds in te stellen.
Vision wordt compleet geleverd met alles wat nodig is om direct uit de doos te rennen. Als u een teksteditor en een webbrowser hebt geïnstalleerd, bent u klaar om te rollen.
Alsof dat nog niet genoeg was, komt Vision vooraf geladen met de kant-en-klare thema's van Shopify. Shopify heeft mensen in staat gesteld deze thema's als bouwstenen te gebruiken, zodat je kunt beginnen met een van deze bestaande thema's als basis en er meer over kunt doen!
Shopify is een snelgroeiend e-commerceplatform met al duizenden verkopers die willen pronken met hun producten. Met Vision kun je snel de grond raken en beginnen met ontwikkelen. De eerste tien sjablonen in de Shopify-categorie van Themeforest ontvangen een extra $ 100. Ga aan de slag!
Als je meer informatie nodig hebt over ontwerpen met Shopify, hebben ze uitgebreide documentatie over hun wiki. Bekijk de Shopify Theme Guide, Liquid gebruiken en Aan de slag met Vision.
"Dit gestroomlijnde Shopify-thema heeft strakke lijnen en moderne designaccenten die uw producten in de kijker zetten." Op maat gemaakte jQuery-lichtbakken zorgen ervoor dat uw producten in detail kunnen worden bekeken. "
Bekijk thema
"Een shopify-thema met modern, fraai web 2.0-ontwerp."
Bekijk thema
