Share
In de loop van drie artikelen hier op Tuts + zullen we kijken hoe we een thema kunnen bouwen voor het gehoste e-commerce platform Shopify. Mijn doel is om je uit te rusten met alle vaardigheden die je nodig hebt om te beginnen, en om je een aantal creatieve manieren te tonen om je thema's flexibel en krachtig te maken.
Shopify - een gebruiksvriendelijk, op thema's gebaseerd, gehost ecommerceplatform Dit is wat we in de komende artikelen behandelen:
Voordat we van start gaan, raad ik u ten zeerste aan om u aan te melden voor een gratis Shopify-partneraccount. Het bouwen van thema's is 100% gratis voor ontwerpers (abonnementen beginnen pas als uw klant zijn winkel laat leven).
Met een partneraccount kun je zoveel mogelijk volledig uitgeruste ontwikkelingswinkels maken als je nodig hebt. Deze hebben geen tijdslimiet en zijn 100% gratis te gebruiken en te testen. U kunt zelfs dummy-betalingen doen om de volledige aankoopstroom te testen. Dit is erg handig wanneer u uw werk onder de aandacht van uw klanten brengt..
Je hebt Shopify misschien wel gebruikt zonder het echt te realiseren. Als je ooit een titel hebt gekocht van A Book Apart, een t-shirt van United Pixel Workers, een tijdelijke tatoeage van Tattly, koffie van Has Bean of (als ik zo gewaagd ben) een exemplaar van een boek gekocht heb ik -auteur, dan heb je Shopify ervaren.
Zoals je in deze winkels zult zien, zien ze er allemaal heel anders uit. Er zijn geen beperkingen in termen van hoe uw winkel kan verschijnen, het is 100% geheel aan u en uw verbeeldingskracht. In 2013 besloot Shopify om een groot ecommerce-ontwerp te benadrukken en lanceerde de inaugurele Shopify Design Awards. Meer dan 150 thema's werden ingediend en werden beoordeeld door drie zeer gerespecteerde personen uit de webontwerpwereld - Jeffrey Zeldman (oprichter van A List Apart en Happy Cog), Tina Roth-Eisenberg (oprichter van swissmiss, en Tattly) en Daniel Weinand (Co -founder en Chief Design Officer van Shopify).
De top drie thema's waren:
Greats Brand - Een perfect voorbeeld van de flexibiliteit van Shopify-thema's Een andere persoonlijke favoriet van mij, en een eervolle vermelding in de prijzen, is de Pure Fix Cycles-winkel. Naast het presenteren van leuke manieren om producten te filteren, injecteren ze ook plezier in hun ontwerp - een goed voorbeeld hiervan is hun productpagina met glimwielen..
Al deze thema's tonen niet alleen geweldige ontwerpvaardigheden, maar benadrukken ook de flexibiliteit van Shopify-thema's. Er is geen voorgeschreven HTML, klassen of ID's en geen beperkingen qua lay-out. Terwijl veel mensen premium-thema's kiezen voor hun winkels, beginnen veel ontwerpers helemaal opnieuw. De keuze is aan jou.
Net als bij alle systemen heeft Shopify een aantal sleutelbegrippen die de moeite van het begrijpen waard zijn voordat we in een teksteditor duiken. Laten we beginnen met kijken naar hoe we onze winkel organiseren.
Elke online winkel heeft producten nodig en Shopify is niet anders. Producten zijn ons basisstation in Shopify en centraal in themagebouw.
Kortom, een product is alles wat u wenst te verkopen. Elk product in een winkel heeft een aantal kenmerken - de meest voorkomende vier zijn titel, beschrijving, prijs en een afbeelding. Andere kenmerken die een product kan bezitten, zijn gewicht, kleur en maat. Al deze kunnen via de online beheerder worden geopend, aangemaakt en bijgewerkt.
Binnen Shopify kan elk product ook een aantal varianten hebben. Standaard heeft elk product dat u maakt één variant, u kunt er eenvoudig meer toevoegen als u dat wilt. Als we het voorbeeld van onze t-shirt opnieuw gebruiken, kunnen we zeggen dat het drie kleurenvarianten heeft (zwart, wit en groen) en drie maatvarianten (klein, middelgroot en groot). Dit zal op zijn beurt resulteren in het kunnen verkopen van:
Je hebt ook de mogelijkheid om specifieke details in te stellen voor elke combinatie. U kunt bijvoorbeeld een andere prijs instellen voor het kleine groene t-shirt in vergelijking met het grote groene t-shirt.
Varianten bewerken gebeurt via het productbeheerdersscherm Varianten zijn een erg krachtige functie van Shopify en stellen u in staat uw producten op verschillende interessante manieren binnen uw sjablonen weer te geven.
Nadat u producten aan uw winkel hebt toegevoegd, wilt u deze mogelijk indelen in collecties. Ik beschrijf een verzameling als een "logische groepering van producten". Andere platforms kunnen de termcategorie gebruiken.
Collecties zijn niet verplicht, maar zijn erg handig. Elk product kan in een of meerdere collecties zitten, zodat u uw producten effectief kunt categoriseren. Zoals ik zeg, hoeven producten niet tot een verzameling te behoren, het is puur optioneel.
Collecties - Een logische groepering van producten Als we Best Made Co. als voorbeeld nemen, kunnen we zien dat ze de volgende collecties gebruiken om hun producten te categoriseren:
Het is heel goed mogelijk dat een tas in zowel de collecties "Tassen & Cases" als "Camp Supplies" kan zitten.
Naast het handmatig definiëren van collecties, biedt Shopify een aantal andere manieren waarop we producten automatisch kunnen toevoegen. Een voorbeeld hiervan is om alle producten op te nemen waar de prijs lager is dan $ 10. Er zijn veel meer attributen die we kunnen gebruiken:
Voor vergelijkingen kunnen we het volgende gebruiken:
Deze staan bekend als 'slimme verzamelingen' in de beheerdersinterface. U kunt collecties op de volgende manieren bestellen:
Ten slotte hebben collecties, net als producten, attributen die we kunnen bewerken vanuit de Shopify-beheerder, inclusief een titel, beschrijving en afbeelding.
Naast collecties kunnen we ook tags gebruiken om verdere metadata aan onze producten toe te voegen. Een veelgebruikt gebruik voor tags is om te helpen met het filteren van een verzameling. Laten we dit demonstreren met een voorbeeld met behulp van de Pure Fix Cycles-winkel:
Zoals u kunt zien aan de bovenstaande afbeelding, bevinden we ons in de XXX-verzameling en kunnen we deze filteren met behulp van de vervolgkeuzelijst met tags.
Tags zijn ook een heel nuttige manier om producten aan elkaar te relateren. We zullen later in de serie meer in detail kijken naar hoe u gerelateerde producten kunt weergeven.
Met de basisbeginselen van producten, collecties en tags begrepen dat het tijd is om te beginnen kijken naar hoe we thema's construeren. Het goede nieuws is dat als je ooit een website hebt gebouwd (en ik veronderstel dat de meesten van jullie dit lezen, in een of andere vorm), het maken van een Shopify-thema geen onaangename verrassingen zal veroorzaken.
Elk Shopify-thema bestaat uit vier hoofdelementen:
Accentsconagua
.vloeistof uitbreiding)Deze bestanden zijn netjes georganiseerd in vijf mappen. Zoals u hieronder zult zien, zijn er slechts een handvol bestanden nodig om aan de slag te gaan. Hier is de basismapstructuur van een Shopify-thema:
├── activa
│ ├── screen.css.liquid
│ ├── site.js.liquid
├── config
│ ├── settings.html
├── lay-outs
│ ├── theme.liquid
├── fragmenten
├── sjablonen
│ ├── 404.liquid
│ ├── article.liquid
│ ├── blog.liquid
│ ├── winkelwagen.liquid
│ ├── collection.liquid
│ ├── list-collections.liquid
│ ├── page.liquid
│ ├── product.liquid
│ ├── product.liquid
│ ├── search.liquid
Ik heb mijn eigen bare-bones-startersthema toegevoegd aan GitHub - voel je vrij om een exemplaar te nemen voor je eigen projecten.
Het is vermeldenswaard dat Shopify-thema's genestelde mapstructuren niet toestaan. Iets anders dat je misschien opvalt, is dat in de hele balk een van de HTML-bestanden niet de gebruikelijke is .html uitbreiding. In Shopify-thema's hebben vrijwel alle HTML-gerichte bestanden een .vloeistof uitbreiding - bijv. product.liquid en index.liquid.
De vloeistof in .vloeistof is de Shopify-sjabloontaal. Het is ontwikkeld door de originele makers van Shopify en is nu beschikbaar als een open source-project op GitHub. Misschien ben je het al tegengekomen omdat het in veel projecten te vinden is, inclusief Mixture en SiteLeaf.
Laten we de mappen en hun rol in een thema dieper bekijken.
In de map met items staan al uw afbeeldingen, JavaScript- en CSS-bestanden.
Veel mensen, inclusief mijzelf, scheiden vaak bestanden in submappen op basis van het type, dat wil zeggen een voor CSS, een voor afbeeldingen en een voor JavaScript. Houd er rekening mee dat dit niet mogelijk is in een Shopify-thema; al uw bestanden moeten in de root van de staan middelen map. Ook alle bestanden die u uploadt met thema instellingen via de Shopify-admin (die we later zullen bekijken) worden toegevoegd aan deze map.
Als u aan uw eerste thema werkt, hoeft u misschien niet het config map. Maar naarmate je verder komt met je thema-gebouw zul je het ongelooflijk handig vinden. Deze map is de thuisbasis van de settings.html het dossier. Je zult merken dat dit het enige bestand is dat doet eindigen in een .html uitbreiding.
Als je het opent in een teksteditor, zul je dat zien als een standaard settings.html bestand bevat formulierelementen zoals bestandsupdates, selectievakjes, selectielijsten en tekstinvoer. Met dit bestand kunnen themaontwerpers invoervelden maken voor verkopers om gegevens met betrekking tot hun thema te bewerken.
Om dit verder uit te leggen, stellen we dat we het mogelijk wilden maken om de achtergrondkleur van de winkel te wijzigen. We kunnen dit doen door een tekstinvoer toe te voegen in onze settings.html bestand als volgt:
De ingevoerde waarde, of de standaardwaarde zoals gespecificeerd in het waardeattribuut, is nu toegankelijk in onze sjablonen met behulp van de globale (beschikbaar in elke sjabloon) instellingen variabele op de volgende manier:
settings.text_color
Maak je geen zorgen als dit nu een beetje buitenaards voelt, tegen het einde van de serie is het volkomen logisch.
Thema's kunnen worden bewerkt via de online editor De lay-outmap bevat meestal één bestand met de naam theme.liquid, hoewel het meer kan bevatten zoals we later zullen bespreken.
Lay-outs zijn erg krachtig omdat ze ons in staat stellen om alle gemeenschappelijke elementen van onze site in één bestand te definiëren. Wanneer een pagina wordt aangevraagd, wikkelt Shopify dit bestand rond het relevante micro sjabloon om een enkele pagina weer te geven.
Een van de belangrijkste voordelen van lay-outs is dat ze ons in staat stellen onze code mooi en DROOG te houden (Do not Repeat Yourself), stelt ons in staat om globale veranderingen snel aan te brengen en maakt het werken met onze innerlijke microsjablonen minder ingewikkeld, omdat we te maken hebben met kleinere delen van de code.
Er zijn twee belangrijke Liquid-tags die u in een Shopify-lay-outbestand moet opnemen. De eerste is content_for_header. Deze variabele moet in het gedeelte van uw lay-outbestand worden geplaatst. Met deze tag kan Shopify elke noodzakelijke code in de documentkop invoegen, zoals een script voor het bijhouden van statistieken en CSS-bestanden voor de beheerde "ingelogde" beheerbalk
De tweede tag is content_for_layout. Dit is meestal te vinden in het midden van uw sjabloon op het punt waar u wilt dat uw microsjabloon verschijnt.
Fragmenten zijn bestanden die stukjes herbruikbare code bevatten, deze hebben ook de .vloeistof bestandsextensie.
Ik vind vaak dat themaontwerpers fragmenten op verschillende manieren gebruiken. Persoonlijk is de aanpak die ik volg:
Voorbeelden van goed gebruik van fragmenten zijn sociale links en paginablokken. Fragmenten kunnen eenvoudig in onze sjablonen worden opgenomen met behulp van de tag Vloeistof % include 'snippetname'%. Merk op dat u de. Niet hoeft toe te voegen .vloeistof extensie wanneer naar het bestand wordt verwezen.
Ten slotte komen we bij de map waarin u het grootste deel van uw tijd zult doorbrengen. Ik verwijs vaak naar de bestanden in de templates map als micro-sjablonen simpelweg omdat het kleine stukjes code zijn die in ons lay-outbestand worden ingespoten.
Als het merendeel van de markup van uw site is opgenomen in a theme.liquid lay-outbestand dan zijn deze microsjablonen vaak erg klein.
Hier is een lijst met de micro-sjablonen waaruit een thema en het gebruik ervan bestaat:
404.liquid - Gebruikt wanneer een pagina "niet gevonden" isarticle.liquid - De artikelpagina voor een blogberichtblog.liquid - De archiefvermeldingspagina voor een blogcart.liquid - Een lijstpagina met alle items in uw winkelwagencollection.liquid - Een lijstpagina met alle producten in een specifieke verzamelingindex.liquid - De 'startpagina' die u kunt aanpassen om een of meer producten, blogitems en verzamelingen weer te gevenlist-collections.liquid - Een lijstpagina voor al uw productverzamelingenpage.liquid - Een basispagina voor inhoud, ideaal voor algemene voorwaarden, over pagina's, enzovoort.product.liquid - Gebruikt om een gespecificeerd product weer te gevensearch.liquid - De sjabloon om zoekresultaten weer te gevenZoals je zult zien, zijn er in totaal tien microsjablonen in de templates map. Gelukkig zijn ze goed genoemd, dus het zou hopelijk duidelijk moeten zijn wanneer ze met hen werken wat ze doen.
Het laatste stukje van de puzzel is weten wanneer deze sjablonen in een winkel worden gerenderd. Het is eigenlijk best rechttoe rechtaan.
Shopify bepaalt welke sjabloon wordt weergegeven op basis van de gevraagde URL. Als je ooit een van de populaire ontwikkelingskaders hebt gebruikt, ben je misschien bekend met het concept routing. Shopify heeft zijn eigen interne routingsysteem en dit bepaalt welke sjabloon naar de browser wordt verzonden.
Hier is een overzicht van welke sjabloon wordt weergegeven zoals bepaald door de URL:
/ thisisntarealurl → 404.liquid/ Blogs / blog-name / article-id-handle → article.liquid/ Blogs / blog-name → blog.liquid/ cart → cart.liquid/ collecties → list-collections.liquid/ Collecties / collectie-handle → collection.liquid/ Collecties / collectie-handle / tag → collection.liquid/ → index.liquid/ Pages / page-handle → page.liquid/ producten → list-collections.liquid/ Products / product-handle → product.liquid/ Search? Q = search termijn → search.liquidDe elementen in duiden een variabele aan die van invloed is op de gegevens die in een sjabloon zijn geladen. Als we bijvoorbeeld de / Collecties / collectie-handle URL-patroon een andere set gegevens zou worden weergegeven als we dat hadden gedaan / Collecties / fietsen vergeleken bij / Collecties / auto's.
Zoals u kunt zien, delen een aantal verschillende URL-patronen hetzelfde sjabloonbestand, bijvoorbeeld / producten en / collecties zullen beide de list-collections.liquid sjabloon.
hetzelfde / Collecties /, / Collecties / collectie-handle / en / Collecties / collectie-handle / tag allemaal gebruiken collection.liquid.
Nu we een goed begrip hebben van de belangrijkste concepten in verband met Shopify is het tijd om verder te gaan met meer aan code gerelateerde zaken.
In het volgende deel van deze serie zal ik u kennis laten maken met Liquid, de Shopify-sjabloontaal, en u laten zien hoe u gemakkelijk uw microsjablonen kunt vullen met gegevens uit uw online winkel. Als u in de tussentijd meer wilt leren, is een goede plek om te beginnen shopify.com/fordesigners.
