Eén van de onderwerpen waar we als support adviseurs met enige regelmaat tegenaan lopen is dat het voor veel winkeliers erg moeilijk kan zijn uit te vogelen hoe onze thema’s nou precies werken. Thema’s, pagina’s, templates, secties, blokken, metavelden, meta-objecten…! Vooral als beginnend winkelier komt er heel veel op je af, en het kan ontzettend ingewikkeld zijn al deze termen uit elkaar te houden, en een goed idee te krijgen van hoe het ene onderdeel in het andere past. In deze blog leggen we op een makkelijk te begrijpen manier uit hoe de verschillende onderdelen van Shopify winkels samenkomen om jouw bezoekers één naadloze website te tonen, en vooral hoe je zelf snel met al deze onderdelen aan de slag gaat!
Voordat we hierin duiken, zijn er een aantal “huishoudelijke mededelingen” waarvan het belangrijk is deze eerst gezegd te hebben:
Omdat dit een nogal uitgebreid onderwerp is, is deze blog opgesplitst in tweeën. Het eerste deel bekijkt de algemene structuur van Shopify webdesign, en gaat dieper in op Thema’s en Templates. In deel twee gaan we verder met Secties, en met de nieuwste toevoeging aan onze gereedschapskist, Metavelden en Meta-objecten.
Ten tweede, in dit artikel gebruik ik afbeeldingen uit mijn testwinkel. Ik heb de taal bewust als Engels ingesteld, en termen in de afbeeldingen zijn daarom de Engelse termen. In de blog gebruik ik de Nederlandse termen. Op deze manier blijft dit artikel hopelijk bruikbaar zowel voor winkeliers met hun winkelbeheer in het Nederlands én in het Engels.
Tenslotte is het belangrijk dat deze blog bedoeld is om Shopify webdesign te verduidelijken voor gebruikers met weinig of geen kennis van het ontwikkelen van websites en software. Voor een meer gevorderd inzicht in de Shopify thema architectuur, is onze Shopify Developer Documentatie een uitstekende informatiebron.
Sjablonen
Heel simpel gezegd bestaan Shopify websites uit sjablonen, in sjablonen, in sjablonen, (enzovoort).
Met “sjabloon” bedoel ik hier een ontwerp dat gemakkelijk herhaald kan worden over meerdere pagina’s en automatisch ingevuld kan worden met informatie die ergens anders staat. Die informatie kan bestaan uit uw keuze voor kleuren en lettertypes, kan bestaan uit product informatie (foto’s, teksten, etc.), kan bestaan uit tekstblokken, of bijvoorbeeld uit één of meerdere “onderliggende” sjablonen.
In de afbeelding hieronder, uit mijn testwinkel, zien we bijvoorbeeld verschillende sjablonen samen op een scherm:
Van boven naar beneden zien we een sectie die door een app is toegevoegd (1), een meldingenbalk (2), het hoofdmenu (3), de productinformatie (4), metavelden (5) binnen die productinformatie (incl. een aanvullend product aanbevolen met onze Search & Discovery app (6)), een sectie met aanbevolen producten (7), en een chatapplicatie (8). Bovendien is het thema zelf natuurlijk ook een sjabloon, en maakt deze productpagina gebruik van het template “Default Product” (9).
Niet al deze elementen werken op dezelfde manier, maar ze halen wel allemaal informatie ergens anders vandaan en laten het hier aan de websitebezoeker zien. Zo wordt de productinformatie bijvoorbeeld ingevuld in de Producten sectie van je winkelbeheer, en wordt de productinformatie (zoals de beschrijving, de varianten, de prijs, etc.) automatisch door het systeem daar opgevraagd, en op de juiste plek op de website getoond.
Wat voor veel mensen echter lastig kan zijn is om een duidelijk beeld te vormen wat precies de hiërarchie en architectuur is van deze verschillende sjablonen. Nog lastiger wordt het als we bedenken dat waar de informatie vandaan wordt gehaald (en waar het dus moet worden ingevuld) kan verschillen per type sjabloon.
Architectuur
Als er één ding is dat belangrijk is om mee te nemen over hoe Shopify sjablonen gebruikt, is het idee dat deze sjablonen niet alleen ingevuld kunnen worden (als een kleurplaat), maar dat ze bovendien in elkaar passen, als een reeks Matroesjka poppen die je zelf in kan kleuren. De vergelijking gaat niet 100% op, bijvoorbeeld omdat één grotere sjabloon (bijv. een thema) eigenlijk altijd meerdere sjablonen van de stap kleiner (bijv. een pagina-template) zal bevatten. Toch wil ik even bij deze illustratie blijven, omdat het goed weergeeft hoe alle sjablonen los functioneren en opgemaakt kunnen worden, en toch perfect in elkaar zullen blijven passen in één specifieke volgorde en hiërarchie.
Ook helpt deze illustratie om visueel onderscheid te maken tussen de sjablonen en de informatie die u aanlevert. Zo is de “vorm” en de volgorde van de sjablonen al van tevoren bepaald door ons systeem, maar ben jij degene die bepaalt welke informatie (welke kleur verf) er op deze templates wordt weergegeven. Dit zijn de teksten die je schrijft, je producten, je productafbeeldingen, enz. In andere woorden, dit is de informatie die je invoert op andere plekken dan in de thema-editor (themabewerker), en die automatisch door ons systeem wordt opgevraagd en ingevuld op het moment dat een bezoeker een bepaalde webpagina opzoekt.
De voornaamste uitzondering hierop is de thema-opmaak (dus de kleuren, lettertypes, en andere instellingen). Deze pas je aan in de thema-editor. De reden hiervoor is dat de opmaak de enige informatie is die jij opgeeft, die wijzigt als je een ander thema(-bestand) gebruikt. Je producten, collecties, afbeeldingen, enz. blijven hetzelfde, maar de thema-opmaak/thema-instellingen pas je aan per thema.
Dit laat ook goed zien hoe sommige sjablonen bij het thema horen, en andere niet. Alles wordt uiteindelijk aangepast op de “werktafel van Shopify”, maar als je het thema wijzigt, til je in één keer de hele doos met thema, pagina-templates, secties, en opmaak van tafel. De product informatie, maar ook bijvoorbeeld de metaveld sjablonen én de metaveld definities blijven allebei onveranderd wanneer je een nieuwe doos (met een ander thema) op de tafel neerzet.
Zoals gezegd is deze matroesjka metafoor niet perfect. Andere vergelijkingen (zoals het winkelcentrumpand dat ik hieronder bespreek) zijn misschien completer, maar moeilijker om effectief te illustreren. Voor verdere uitleg zou ik zeker ons themastructuur helpcentrumpagina bekijken. Ook zijn er talloze artikelen en video’s te vinden die dieper ingaan op de thema-structuur op het niveau van code. Deze blog is echter bedoeld om winkeliers te helpen zo snel mogelijk aan de slag te kunnen gaan zonder kennis van dergelijke gevorderde informatie. Met dat in het achterhoofd, kunnen we naar de verschillende sjabloontypes gaan kijken.
Verschillende sjablonen:
Thema
Het thema is het hoofdsjabloon waarmee je de uitstraling en functionaliteit van je winkel vorm kan geven. Als je het hele Shopify platform voorstelt als een winkelcentrum waar je een pand kunt huren voor je winkel, kan je thema’s zien als de algemene inrichting die je aan je interieur geeft: de verf, het behang, maar ook bijvoorbeeld de deuren, de grootte van je etalage, interne muren, etc. De meeste van deze aspecten zijn aan te passen in de Thema-Instellingen. Aanpassingen in deze instellingen, zoals je kleuren, lettertypes gelden voor je hele website (zolang je dit thema gebruikt).
De thema-instellingen zelf zijn vrij voor de hand liggend, en we hoeven ook niet al te lang bij thema’s stil te staan. Klik hier voor verdere uitleg per instelling.
Het enige waar wij af en toe wat vragen of opmerkingen over krijgen zijn de prijzen van thema’s uit de theme store. Afgezien van de gratis thema’s die Shopify heeft ontwikkeld, kosten thema’s vaak rond de 200-300 euro, met uitschieters naar bijna € 400. Dit kan erg veel geld zijn voor beginnende winkeliers. In veel gevallen raden wij daarom ook gewoon aan om met één van onze gratis thema’s te beginnen (wij kunnen ook betere ondersteuning bieden voor onze eigen thema’s, omdat wij deze door en door kennen).
Dit betekent echter niet dat de betaalde thema’s het geld niet waard zijn. Zo is het zonder meer zo dat deze betaalde thema’s vaak gewoon net even wat mooier ontworpen zijn. Ook is er een veel bredere keus aan betaalde thema’s, wat betekent dat er voor elk type winkel thema’s zijn die preciezer passen bij jouw specifieke winkel en wensen. Het is vergelijkbaar met het verschil tussen flatpack meubilair en designer meubels in fysieke winkels, en het is helemaal aan jou wat het beste bij jouw winkel past.
(Pagina-)Templates
Het pagina-template is één van de twee soorten sjablonen die het meest leiden tot vragen van verwarde winkeliers. Dit is zeker heel begrijpelijk, vooral vanwege hoe deze templates zich door de jaren heen hebben ontwikkeld. Voorheen was het zo dat het template een vrij simpele sjabloon was waarin niet al te veel kon worden aangepast, waardoor het heel duidelijk was waar de voornaamste inhoud voor pagina’s vandaan kwam (de Pagina’s sectie onder Onlinewinkel in je winkelbeheer). Tegenwoordig zijn templates, door de uitbreiding en toevoeging van onderliggende sjablonen zoals Secties, Blokken en Metavelden, echt uitgegroeid tot heel krachtige web-bouwinstrumenten. Dit is een enorme verbetering, maar heeft er wel voor gezorgd dat veel winkeliers enthousiast aan de slag gaan met deze templates, zonder eerst de onderliggende structuur uit te vogelen, en vaak na uren ontwerpen en puzzelen uiteindelijk radeloos bij ons aankloppen: “waarom kom ik nou steeds op mijn Contactpagina als ik naar mijn “Wie zijn wij” pagina probeer te gaan?”
Het antwoord op die vraag is dan vrijwel altijd dat ze wel op de “Wie zijn wij” pagina terecht zijn gekomen, maar dat deze er precies hetzelfde uitziet als de contactpagina, omdat ze hetzelfde template gebruiken en alle wijzigingen die ze hebben gemaakt niet op pagina-niveau waren, maar veranderingen waren aan het algemene pagina-template. In de kern blijft een pagina namelijk altijd wat bezoekers bezoeken, en het template is de extra vormgeving die deze pagina krijgt. In de winkelpand metafoor is het pagina template vergelijkbaar met een stellage. Of bezoekers nou op je broekenafdeling staan, of bij t-shirts, de stellage blijft hetzelfde. Wel kan je natuurlijk verschillende soorten stellages bouwen, om je winkel interessant te houden.
Om dit verder uit te leggen, kunnen we het best even praktisch de stappen volgen voor het aanmaken van een nieuwe pagina met een nieuw template:
1. Ga naar Online winkel, dan Pagina’s en kies een pagina, of maak een nieuwe pagina aan. Ik maak in dit geval even een nieuwe pagina aan voor een Over Ons pagina.
2. Vul hier de belangrijkste informatie voor de pagina in, waaronder de pagina titel (A) en de meta-informatie (D) (oftewel wat zichtbaar zal zijn in Google resultaten, etc). Vervolgens is de Content (oftewel de pagina inhoud, B) de voornaamste tekst die je zichtbaar wil hebben op deze pagina. Je kan deze in de Rich Text Editor aanpassen zoals je ‘m wilt, inclusief afbeeldingen etc. Deze Rich Text Editor werkt hetzelfde als een heel simpele versie van Microsoft Word. Als je meer precieze controle wilt, en je bent HTML machtig, kan je bij C de achterliggende HTML code zien en aanpassen. Bij E kan je zien hoe de pagina eruit gaat zien met de aankleding van het gekozen template. En bij F kan je tenslotte het template kiezen dat je aan deze pagina toe wilt wijzen. Hier kan je het Default Template kiezen, maar wij willen nu natuurlijk eerst een eigen template bouwen speciaal voor deze pagina.
3. Ga naar Onlinewinkel > Thema’s en klik bij het thema waarin je het template aan wilt maken op Aanpassen.
4. In de thema editor klik je op het dropdown menu in het midden, en kies je het soort template dat je aan wilt maken. In dit geval kiezen we voor Pagina’. (Ik ga later nog even verder in op andere soort pagina templates, zoals voor productpagina’s etc.).
5. Klik op Template aanmaken. Het systeem vraagt op welk template je dit nieuwe template kan baseren.
6. Als je wilt weten hoe het template wat je aan het bouwen bent eruit gaat zien op een bepaalde pagina, kan je dit linksboven (A) wijzigen en bij (B) een pagina uitkiezen:
7. Hier begint het echte ontwerpen. Maak een pagina template aan door secties toe te voegen. De daadwerkelijke pagina inhoud, zoals we die bij stap 1 hebben geschreven is te zien bij (A), en fungeert als alle andere secties, en kan naar boven en naar onder worden gesleept met het icoontje met de zes puntjes. Verdere secties (B en C) kunnen zowel boven als onder de Pagina sectie worden gezet, inclusief verdere teksten (C). Een belangrijk, en veelgebruikt, gevolg hiervan is dat je de Pagina sectie (A) ook kunt verbergen door op het oog-icoontje ernaast te klikken, of zelfs helemaal leeg kunt houden. Op deze manier zien bezoekers dus alleen het template, en wordt de pagina zelf alleen gebruikt om het template een plek te geven.
Nu het template af is, is echter bij (D) te zien dat dit template nog niet is toegewezen aan een pagina. (Vergeet niet op te slaan voordat je verdergaat naar de volgende stap.)
8. Dus nu gaan we weer terug naar de pagina zelf, bij stap 1. Bij de templates voor deze pagina (zie 1F) kan je nu dit nieuw aangemaakte template zien, en toewijzen.
9. Je template is klaar en toegewezen aan een pagina. Je kan deze pagina nu toevoegen in je winkelmenu of ernaar verwijzen met een link op andere pagina’s.
In veel gevallen kan je heel goed één template hergebruiken voor meerdere pagina's. Denk aan pagina’s voor je privacybeleid, je gebruiksvoorwaarden, je terugbetalingsbeleid, enzovoorts, die allemaal een grote lap tekst hebben (dus ingevuld bij stap 1), en vervolgens misschien alleen nog één sectie met een verkoopbanner hebben (toegevoegd in stap 7) en dat is ‘t wel. Of bij schoonheidsspecialisten zien wij bijvoorbeeld vaak dat alle medewerkers hun eigen pagina hebben die afgezien van het tekstje over de specialist verder helemaal hetzelfde zijn. Hier zijn templates perfect voor.
En hoewel ik hier het meest voordehandliggende voorbeeld van een template heb gegeven, voor zogenaamde statische pagina’s, zijn templates tegenwoordig toe te passen op vrijwel alle soorten winkelpagina’s (productpagina’s, collectiepagina’s, blogpagina’s). Stel je verkoopt bijvoorbeeld bier én t-shirts. Dan kan je een standaard product-template creëren voor al je drankproducten, met secties voor ingrediënten, food pairings, enz., en een geheel andere template voor je kledingproducten, met een tekst blokje over het ontwerpproces, de duurzaamheid van je productie, en ga zo maar door.
Belangrijk: Templates worden aangemaakt binnen het thema, en horen enkel bij het thema waarin ze zijn aangemaakt. Dit betekent dat als je een nieuw thema gaat gebruiken, al je pagina’s standaard naar het Default template voor dat thema gaan. Je zult dus nieuwe templates moeten bouwen binnen je nieuwe thema. Als je nieuwe thema nog niet actief is, zal je de in dat thema gemaakte templates nog niet kunnen toewijzen aan de pagina’s. Wat je wel kunt doen is met de Preview functionaliteit kijken hoe de pagina eruit gaat zien (zie stap 6).
Voor meer visuele leerders, en voor verdere uitleg, heb ik hier een uitstekende video tutorial (Engelstalig), gevonden over het gebruiken van pagina-templates.
Tot zover Deel Één. In Deel Twee kijken we verder naar hoe je met Secties en Blokken pagina templates (waaronder je homepagina) heel precies aan kan passen en vorm kan geven. Maar vooral duiken we verder in hoe de nieuwste vormen van sjablonen, metavelden en meta-objecten, een gigantische sprong betekenen in hoe je allerlei soorten informatie effectief kan organiseren en weergeven.
Zoals gezegd is deze blog bedoeld om zo veel en zo simpel mogelijk opheldering te geven over hoe Shopify websites in elkaar steken. Mocht je daarom iets missen in mijn uitleg, of een verbetering hebben, of misschien een effectievere metafoor, laat het dan zeker weten in de Opmerkingen hieronder!
