FROM CACHE - nl_header

Introductie tot Shopify thema’s, deel 2: Secties, Metavelden en Metaobjecten

 

Peter_0-1706800964529.png

 

 

Deze blog is bedoeld om Shopify webdesign te verduidelijken voor gebruikers met weinig of geen kennis van het ontwikkelen van websites en software. 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 (klik hier om Deel Één te lezen). In deel twee gaan we verder met Secties, met de nieuwste toevoeging aan onze gereedschapskist, Metavelden en Meta-objecten, en sluiten we af met tips van onze collega’s uit het Thema Supportteam.

 

Secties (en Blokken)

 

Gezien het feit dat alle thema’s en pagina-templates tegenwoordig vrijwel helemaal zijn opgebouwd uit secties, is het opvallend dat wij waarschijnlijk de minste vragen krijgen over deze sjabloonsoort. Het zijn dan ook vrij voor-de-hand liggende sjablonen. Toch zijn er zeker wel aspecten van Secties die waardevol zijn om te vermelden, zodat je nog meer uit je website zal kunnen halen. 

 

Secties zijn de bouwblokken voor jouw webpagina’s, en verschillen per thema. Alle gratis thema’s van Shopify hebben standaard 17 verschillende soorten secties, maar een extern ontworpen thema kan veel meer secties hebben (het populaire Prestige thema, bijvoorbeeld, van Maestrooo, heeft er 28). Bovendien worden er ook aan onze eigen thema’s regelmatig nieuwe secties toegevoegd. Dit is één van de redenen dat het altijd een goed idee is waar mogelijk je thema altijd bij te werken naar de laatst beschikbare thema-versie.  

 

Alle secties zijn opgebouwd uit verdere blokken. Denk aan tekstblokken, tekstkoppen, afbeeldingen, knoppen, etc. De sectie bepaalt hoe en waar deze blokken naast/onder/achter elkaar geplaatst worden op de website. Net als secties binnen thema’s kunt u de volgorde van blokken aanpassen hoe u het wilt zodat u de secties precies zo kunt in kunt richten als u wilt. 

 

De soorten blokken en secties die standaard beschikbaar zijn, zijn enigszins beperkt. Eén groot voordeel van het feit dat alle soorten pagina’s nu kunnen worden aangepast met secties, is dat het nu niet meer nodig is om hele pagina’s extern te ontwerpen om precies het ontwerp te krijgen wat je wil. Sinds de introductie van Online Store 2.0 en de uitbreiding van sectie-functionaliteit hebben meerdere ondernemende app-ontwikkelaars namelijk apps uitgebracht waarmee je keuze hebt uit honderden verschillende secties, en in sommige gevallen ook zelf secties kunt laten ontwerpen. Als je er met de standaard secties van je thema niet helemaal uitkomt, zou dit dus een uitstekende manier kunnen zijn om toch net even dat gedeelte van je site waar je niet 100% tevreden over bent, helemaal zo te krijgen als je voor ogen had. 

 

Aangepaste Gegevens: metavelden en metaobjecten

 

Als we terugdenken aan de vergelijking met een fysieke winkel die we in Deel 1 hebben gemaakt, kan je metavelden en meta-objecten misschien het beste vergelijken met een beeldscherm waarop je verschillende soorten informatie over producten etc. kan tonen die je ergens anders hebt ingevoerd. Net als bij een beeldscherm kan je makkelijk meerdere beeldschermen rond je winkel plaatsen en dezelfde, of speciaal aan het product aangepaste, informatie laten zien. Waar de sjabloonsoorten die we hiervoor hebben besproken vooral bedoeld zijn voor het makkelijker kunnen herhalen van design-opties, zijn metavelden bedoeld om het toevoegen en herhalen van informatie-opties te stroomlijnen. 

 

Het mooie van metavelden en meta-objecten is dat je zelf kunt bepalen wat voor informatieveld je wilt creëren. Een winkel die ijs verkoopt, heeft heel andere soorten velden nodig voor hun productinformatie, dan iemand die rondleidingen in Amsterdam aanbiedt, en met metavelden kunnen beiden precies de soorten velden toevoegen die zij nodig zullen hebben. 

 

Het voorvoegsel “Meta” hier betekent niet zozeer “naar zichzelf verwijzend” zoals het tegenwoordig vaak wordt gebruikt, maar heeft meer de oorspronkelijke Griekse betekenis “naast” of “met” (zoals in “metgezel”). Dit zijn extra velden die je toe kunt voegen naast de standaard velden die Shopify heeft aangemaakt voor alle winkeliers. 

 

Deze video van Ed Codes gaat meer in op het verschil tussen templates en metafields.

 

Metavelden

Waar Shopify voorheen eigenlijk altijd al voor je had bepaald wat voor soort informatie op welke plekken kan worden ingevuld, geven metavelden de mogelijkheid om velden te creëren waar jij zelf kunt aangeven welke soort informatie ingevuld kan worden. De productprijs, de omschrijving, het merk, tags, etc. zijn allemaal standaard velden waar je bijvoorbeeld productinfo in kunt vullen, maar niet alle winkeliers hebben een veld nodig voor ingrediënten, wasinstructies, afmetingen, of info over de producent. Met metavelden kan je zelf aangeven welke soort info waardevol zal zijn om te tonen, en kan je vervolgens zelf in de templates aangeven op welke plek op de site je die informatie wilt kunnen tonen.  

 

De beste manier om dit te tonen, is door het gewoon even te doen. Zo maak ik hieronder bijvoorbeeld een extra veld aan waar klanten wasinstructies zullen kunnen vinden voor de producten die ik verkoop:

 

  1. Ga naar Aangepaste Gegevens > Metavelden > Producten.

Peter_1-1706800963066.png

 

     2. Hier zie je alle product metavelden die momenteel zijn aangemaakt in je winkel. Klik op Definitie toevoegen. Peter_2-1706800965267.png

 

3. Maak een Product metaveld aan. De informatie hier zal niet zichtbaar zijn op uw winkel, maar is meer om metavelden te onderscheiden (A) en om bij het later invullen duidelijk te maken waar dit metaveld voor gebruikt wordt (C). De Naamruimte en sleutel (B) zijn bedoeld voor het vinden van dit metaveld in de achterliggende code. Hier kan je meestal gewoon laten staan wat ons systeem automatisch invult.
De belangrijkste keuze hier is het type metaveld (D). Klik hier voor een uitleg van alle content-typen. In dit geval wil ik een Rich Text veld zodat ik de tekst vervolgens kan opmaken hoe ik het wil. Bij Access (E) kan je tenslotte aangeven op welke verkoopkanalen deze metavelden getoond moeten worden. 

 

Peter_3-1706800963331.png

 

4. Wanneer de metaveld definitie is aangemaakt, gaan we de daadwerkelijke velden toevoegen aan producten. Ga naar Producten in het winkelbeheer (niet de thema editor) en kies een product waar je dit veld wil laten zien op de productpagina. Scroll naar beneden. Hier is nu onderaan een blok met Metavelden te zien. Kies het veld dat u net heeft aangemaakt en vul de specifieke informatie voor dat product in.  Herhaal voor alle producten waar u dit veld zichtbaar wilt hebben.

 

Peter_4-1706800963064.png

 

5. Tenslotte gaan we naar de thema editor. Ga naar het productpagina template wat u voor dit product heeft gekozen (zie deel 1). Kies een sectie en een blok waarin u het metaveld wilt tonen (A en B). Kies het inhoudsveld waar u dit metaveld wilt laten zien en klik op de drie schijfjes (D). Voeg het metaveld toe. Zowel vóór als achter het metaveld kunt u vervolgens ook nog andere tekst toevoegen die dan dus voor alle producten zal gelden die dit product-template gebruiken. Het metaveld fungeert een beetje als een plaatje dat u in de tekst plakt. Als voor een bepaald product dit veld leeg is, zal het leeg blijven (de rest van het blok blijft wel zichtbaar). 

 

Peter_5-1706800963290.png

 

 

Dit is natuurlijk maar één voorbeeld van hoe je metavelden kunt gebruiken. In deze blogpost geeft mijn collega Lee een mooi voorbeeld voor hoe je metavelden kunt gebruiken om kleurfilters toe te voegen aan je collectiepagina’s.

 

Metavelden bewerken in Bulk Editor

 

Één van de andere grote voordelen van metavelden is dat je deze nadat ze zijn opgezet makkelijker verder kan aanpassen en invullen voor andere producten met behulp van onze bulk-editor. Ga naar Producten (A) en selecteer alle producten die je wil bewerken, of selecteer alle producten in één keer (B). Onder aan de pagina verschijnt dan de optie om deze producten in bulk te bewerken. Klik op Bulk edit (C). 

 

Peter_6-1706800963025.png

 

 

Ga naar Kolommen en vink in de lijst de metavelden aan waar je de waarden voor wilt toevoegen:

 

Peter_7-1706800962617.png

 

Vergeet ook hier niet op Opslaan te klikken.

 

Metaobjecten

 

Waar metavelden een enkel extra veld geven waar je meer informatie in kunt vullen, geven metaobjecten de mogelijkheid om meerdere van dit soort velden en andere soorten informatie te combineren in een object. Vooral als je complexere informatie hebt die je op verschillende manieren op verschillende plekken op je website wilt herhalen, kunnen metaobjecten uitkomst bieden. 

 

Belangrijk bij het aanmaken van metaobjecten is om altijd in het achterhoofd te houden hoe en waar je deze wilt gaan gebruiken in je thema. Niet alle soorten informatie bijvoorbeeld kunnen makkelijk worden gelinkt in secties. De meest voorkomende metavelden die je zonder problemen zult kunnen gebruiken zijn de tekstvelden, bestanden (afbeeldingen), URLs, etc. Andere informatievelden die je aan een metaobject definitie toe kan voegen zijn bijvoorbeeld kleuren, gewicht, beoordelingen, cijfers, enz. Hier zijn echter maar zelden velden voor in secties en blokken, waar deze informatie getoond kan worden. Dit soort informatievelden zijn meer geschikt voor andere toepassingen voor metavelden (bijvoorbeeld apps die dit soort info nodig hebben). Wel is het zo dat ook hier de sectie-apps waar ik het hierboven over had uitkomst zouden kunnen bieden en wél manieren zouden kunnen bieden om deze andere vormen van informatie op een mooie manier te tonen. 

 

Aan de slag… Als simpel voorbeeld van wat metaobjecten kunnen doen, gaan we goede doelen toevoegen aan onze producten, met velden voor foto’s, titels, teksten, en links. 

 

  1. Ga naar Aangepaste Gegevens en maak een metaobject definitie aan. 

 

Peter_8-1706800963398.png

 

2. Kies een herkenbare naam (A) en voeg velden toe (B). Deze velden zijn in feite hetzelfde als de metavelden die we hierboven hebben besproken, en hebben dezelfde types. Bedenk wel dat niet alle types standaard te gebruiken zijn in alle thema’s. Bij “Meer acties” kan je nu items toevoegen, maar in plaats daarvan gaan we even Instellingen uit.. 

 

Peter_9-1706800963069.png

 

3. In je normale winkelbeheer ga je naar Content > Metaobjecten (A). Dit is de plek waar je het beste overzicht zal hebben van alle daadwerkelijke inhoud van je metaobjecten. Bij (B) maak je een metaobject item aan. Bij (C) kan je verder ook metaobject definities aanmaken (dit stuurt je terug naar stap 2). Bij (D) kan je kiezen welke items van welke metaobjecten in de lijst worden getoont, wat uiteraard belangrijk zal worden wanneer je meer metaobjecten gaat gebruiken. Klik op Item toevoegen (B).

Peter_10-1706800962402.png

 

4. Maak je eerste item aan. Hier zie je alle velden terug die je hebt gekozen voor het metaobject. Herhaal dit voor alle items die je toe wilt voegen. 

 

Peter_11-1706800962489.png

 

5. Nu de meest verrassende stap. Ga naar Instellingen > Aangepaste Gegevens en maak een metaveld aan. Dit is om het metaobject te kunnen linken aan producten. Bij type selecteer je “Metaobject”. 

 

Peter_12-1706800963062.png

 

6. Voeg deze metavelden toe aan de producten. In de afbeelding laat ik zien hoe dit via bulkbewerking gaat (volledige instructies voor het toevoegen van metavelden staan uiteraard hierboven). Bulkbewerking is sneller natuurlijk. Klik in de Bulkbewerker op Kolommen (A) en voeg onder Metavelden (B) het aangemaakte metaobject-metaveld toe. In de kolom (C) kies je de juiste items.

 

Peter_13-1706800962425.png

 

7. Ga naar de themabewerker en het template waar u de metaobjecten toe wilt voegen. In dit geval voeg ik een “Afbeelding en tekst” sectie toe (A) en in verschillende blokken voeg ik de verschillende velden (uit stap 4) toe (B en C). 

 

Peter_14-1706800962610.png

 

8. Ga naar een ander voorbeeld van hetzelfde template (A). Alle blokken die bij stap 7 waren ingevuld, zijn nu ingevuld met de overeenkomstige velden van de metaobject items die je hebt aangemaakt (B). 

 

Peter_15-1706800963071.png

 

 

Net als bij metavelden is dit maar een tipje van de sluier wat betreft wat er allemaal mogelijk is. Deze youtube video van Ed Codes gaat veel dieper in op de talloze mogelijkheden die metaobjecten bieden, en is zeker een aanrader.

 

Zoals gezegd is deze blog bedoeld om zo veel en zo simpel mogelijk opheldering te geven over hoe Shopify websites in elkaar steken. In Deel 3 gaan we verder in op veelgestelde vragen en tips van ons thema team. Mocht je daarom iets missen in mijn uitleg, of een suggestie hebben, laat het dan zeker weten in de Opmerkingen hieronder!