Introductie tot Shopify thema’s, deel 3: Tips van ons Thema Team
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 drieën. Het eerste deel bekijkt de algemene structuur van Shopify webdesign, en gaat dieper in op Thema’s en Templates. Deel Twee gaat verder met Secties, en de nieuwste toevoeging aan onze gereedschapskist, Metavelden en Meta-objecten. In Deel Drie sluiten we af met tips van onze collega’s uit het Thema Supportteam.
“De links in je winkels werken prima. Je hebt het pagina-template dat je hebt gebouwd voor je ene pagina toegewezen aan meerdere pagina’s.”
Waarschijnlijk gaat het hier om je Default Pagina template, maar we zien het ook weleens met andere standaard templates zoals FAQ, en Contact. Ik heb deze vraag uitgebreid besproken in Deel 1, klik hier voor de link naar de paragraaf waarin ik hier verder op in ga.
“Als je contact opneemt met Shopify Support, vooral over thema’s, voeg dan altijd zoveel mogelijk screenshots en screenrecordings toe, met notities van hoe je het wel wil.”
Dit is een logische maar belangrijke tip. Screenshots hebben extra contextuele informatie die voor ons van onschatbare waarde is. Screenrecordings met uitleg zijn nog waardevoller.
“Niet alle teksten kunnen in de thema-editor worden aangepast.”
We hebben in deel 1 en 2 besproken hoe sommige teksten en gegevens uit productinformatie, pagina’s en meta-informatie worden ingevuld in je thema, zodat je niet zelf je pagina’s één voor één hoeft te herontwerpen. Maar sommige informatie staat niet op die plekken, en kan ook niet in de thema editor worden aangepast. Dit zijn de standaard zinnetjes zoals “Op voorraad”, “Uitverkocht”, “Je winkelwagen is leeg”, maar bijvoorbeeld ook alle teksten in je checkout omgeving. Om deze aan te passen ga je naar “Content van standaardthema bewerken”.
Vervolgens kan je hier alle standaardcontent aanpassen zodat je je website precies die feel kan geven die je wilt.
Ook voor andere informatie zoals bijvoorbeeld meldingen in je checkout over ophaalpunten, informatie over betaalmethodes, etc. zijn deze standaardvelden vaak de beste oplossing.
“Je koopknop is niet kwijt, maar gewoon dezelfde kleur als je achtergrond.”
Ik heb in dit screenshot de koopknop nog-nét-zichtbaar-donker-groen gemaakt, maar met verrassende regelmaat zien wij dat winkeliers de koopknop en de tekst dezelfde kleur maken als hun achtergrond.
Om de kleuren van je thema aan te passen ga je naar thema instellingen (1) > Kleuren (2) en kijk welk kleurschema hier van toepassing is (3, dit is vaak een van de struikelblokken). Bij 4 zien we dan vaak dat de Knopachtergrond dezelfde kleur is gemaakt. Vaak komt dit doordat op de homepagina secties waren waar de achtergrondkleur werd omgekeerd, zodat de knop er juist wel goed uitzag. De oplossing is om aan die sectie op de homepagina, en deze sectie op de productpagina, andere kleurschema’s toe te wijzen.
“Je kan nu content toevoegen per markt."
Dit is geweldig nieuws voor winkeliers die hun winkels aan willen passen aan hun markten (1), maar kan ook wel voor verwarring zorgen. Belangrijk om te onthouden is dat aanpassen in een bepaalde markt ervoor zullen zorgen dat aanpassingen daarna in de Standaard versie van uw website thema niet meer zullen gelden in de aangepaste markt. Om de aangepaste markt weer in lijn te brengen met de rest van de website, klik je op het “refresh logo” bovenaan de lijst met secties (2).
“Als het in de ene taal wel werkt en in de andere niet, controleer dan je vertaal-app.”
Verschillende vertaal-apps werken op verschillende manieren. Onze Translate & Adapt app gebruikt de thema-content en verdere informatie die in de vertaal CSV staat (zoals product informatie, etc.) om te bepalen wat te vertalen. Dit betekent dat sommige informatie die op de site wordt getoont maar die op bijzondere manieren worden toegevoegd (zoals via bepaalde apps) niet altijd vertaald kan worden. In dat geval zou het kunnen dat sommige andere vertaal-apps, die op andere manieren werken, misschien betere resultaten behalen. Als u hierover specifieke vragen heeft dan zal onze support afdeling hierbij verder kunnen helpen.
“Nee, niet alle links verwijzen naar dezelfde collectie-pagina. Je hebt het productraster verborgen en een uitgelichte collectie toegevoegd, zodat alle collectie-pagina’s dezelfde uitgelichte collectie laten zien.”
Dit komt regelmatig voor wanneer winkeliers collectiepagina’s proberen aan te passen. De templates voor collectiepagina’s (4) werken precies hetzelfde als normale pagina’s (zie vraag 1 hierboven) maar in plaats van de “pagina” sectie is het het “productraster” (1) dat wordt ingevuld binnen het template. Andere secties, zoals de Uitgelichte Collectie (2), worden herhaald op elke pagina die het template gebruikt (3). Wanneer je dus het productraster verborgen houdt (1), zien alle collectiepagina’s er hetzelfde uit.
“Templates zijn alleen van toepassing op het Live-thema.”
Dit is een vraag die wij wel vaker krijgen: “ik heb de templates aangemaakt in een nieuw thema dat ik nieuw aan het ontwerpen ben, maar ik kan de pagina niet toewijzen want ik zie de naam van de template niet in de lijst van beschikbare templates staan.” Dit is inderdaad verwacht gedrag. Ik bespreek dit in deel 1 van deze serie.
“Tekst op een afbeeldingsachtergrond is moeilijk te lezen. Gebruik containers of een overlay om het leesbaarder te maken.”
In mijn voorbeeld is de onleesbaarheid bewust een beetje overtrokken, maar toch zien wij met meer regelmaat dan je zou verwachten dat tekst onleesbaar is doordat de afbeelding die de winkelier heeft gekozen precies dezelfde kleuren heeft als de tekst zelf.
Belangrijk hierbij is te onthouden dat we bij het ontwerpen van websites niet uit moeten gaan van wat wijzelf kunnen lezen. Wij weten wat er moet staan, en over het algemeen bekijken wij bij het ontwerpen de website onder de best mogelijke omstandigheden. Maar onze bezoekers bekijken de website op hun mobiel, of in slechte belichting, of nog belangrijker, hebben gezichtsbeperkingen of bijvoorbeeld dyslexie waardoor ze zelfs onder de beste omstandigheden een minimale hoeveelheid contrast nodig hebben om teksten goed te kunnen lezen.
“Lijn tekst niet gecentreerd uit, dat maakt het veel moeilijker om te lezen.”
In dezelfde trant als de vraag hierboven, maakt het centreren van tekst het veel moeilijker om deze te lezen, vooral voor mensen met leerproblemen zoals dyslexie. Deze blog van Mike Bifulco maakt op een heel effectieve manier inzichtelijk hoeveel moeilijker tekst te lezen wordt wanneer je deze centreert. Check zeker ook deze website van UX movement waar ze niet alleen ingaan op het centreren van tekst, maar ook op talloze andere aspecten van webdesign met het oog op User Experience (UX), zoals dit artikel met verdere tips over het dyslexie-vriendelijk maken van tekst.
