Shopify Stylesheet (CSS) aanpassingen
Lees je in mijn artikelen over dingen waarover je een persoonlijk advies zou willen m.b.t. jouw webshop of plannen daartoe? Zijn er onderdelen die voor jou specifiek gemaakt zouden moeten worden? Heb je het idee dat mijn input jouw webshop kan helpen? Neem dan gerust contact op met mij, dan bekijken we samen wat Studio Wassink zou kunnen doen om je te helpen.
0630155506
stefan@studiowassink.nl
Mogelijk heb je de melding al in beeld gekregen toen je in Shopify bezig was, of heeft iemand die wat aan je thema heeft aangepast er al een opmerking over gemaakt. Het is natuurlijk ook mogelijk dat de CSS aanpassing, die al speelt sinds november 2020, nog nieuw voor je is. Maar hoe dan ook, Shopify wil af van de huidige geavanceerde Stylesheet-technieken, die al veelvuldig zijn ingezet. Waarom?
Als je de term Stylesheet (CSS) niet al kent, is het wel van belang je er nu kort in te verdiepen. Daarom bij deze een korte uitleg, die je binnen een paar minuten bijspijkert over wat het is, waarom aanpassing nodig is en wat je kunt doen om problemen te voorkomen. Interesseert die inhoudelijke kennis je niet, klik dan hier om meteen naar de oplossing te gaan, maar ik raad je aan om nu eerst wat basiskennis op te doen.
Heb je hulp nodig bij werkzaamheden in je Shopify-webshop? Ik werk dagelijks voor een gevarieerde klantenkring aan zowel grote als kleine projecten, designs, aanpassingen en oplossingen op maat. Neem vrijblijvend contact met mij op als je wil weten of ik ook jou kan helpen bij een probleem of bij het laten groeien van jouw e-commerce businesses.
Waarschuwing! Na dit artikel wil je de komende 24 uur het woord Stylesheet niet meer lezen of horen. Daar gaan we dan:
Wat is een Stylesheet (CSS)?
Je weet mogelijk al dat een webpagina in principe een reeks codes is, die door een browser (Chrome, Safari, Edge) wordt ontvangen en omgezet naar wat we op het scherm zien. Veel van deze codes zijn geschreven in de bekendste web-taal, HTML. We beperken ons hier even tot die taal en tot de Stylesheet, maar in de praktijk zijn er in je webshop veel meer. Daarin is bijvoorbeeld vastgelegd dat een onderdeel wordt opgedeeld in 4 vlakken, die ieder een unieke tekst, afbeelding en link bevatten.
Deze HTMLs werken, door ze aan elkaar te lussen, samen met een Stylesheet die ze op basis van referenties voorziet van opmaak. Ik zet bijv. in de HTML dat een afbeelding ingeladen moet worden en daarbij plaats ik dus een referentie naar een onderdeel in de Stylesheet, zo’n onderdeel noemen we een 'class'.
Op het moment dat je een enkele pagina laadt, kan het zomaar zijn dat er 200 van die referenties moeten worden uitgelezen en opgebouwd.
Het wordt dus bijvoorbeeld afbeelding "product-vooraanzicht.jpg" in de HTML, die samenwerkt met de class "homepage-uitgelicht-product" in de Stylesheet.
In de Stylesheet staat dat die ‘class’ de volle breedte moet pakken, maar niet meer dan 250 pixels hoog mag zijn en dat er een lichte schaduw onder komt. Zo kun je ook teksten, links, lijsten, interacties en nog veel meer definiëren in hun eigen 'classes'.
Op het moment dat je een enkele pagina laadt, kan het zomaar zijn dat er 200 van die referenties moeten worden uitgelezen en opgebouwd. Dus de volgende keer dat zoiets langer dan een seconde duurt, weet dan dat het eigenlijk al een wonder van de techniek is dat het niet 10 minuten duurt.
Heb ik je aandacht nog? Mooi, maar we zijn er nog niet helemaal...
Omdat een webshop (of uitgebreide website) zomaar honderden tot duizenden van die referenties nodig heeft, is het erg veel herhaling wat je schrijft. Daarom zijn in de loop van de jaren trucs bedacht waarmee je zulke herhalingen weer kunt refereren in de Stylesheet zelf en ze kunt opdelen voor een beter overzicht.
Wil je nadien toch overal de schaduw minder duidelijk, dan pas je ook dat éénmaal aan en alle referenties pakken de aanpassing direct op. Super dus om mee te werken!
Stel dat je in 20 verschillende elementen steeds dezelfde schaduw, hoekafronding, witte achtergrond en blauwe tekst wil zien, voor een consistente stijl. Dan zet je voor die 4 onderdelen maar éénmaal de gewenste opmaak klaar. In de 20 elementen zet je de referentie en daarnaast de unieke eigenschappen er ook bij. Dat scheelt je het 19 keer moeten herhalen van dezelfde informatie en het houdt je codering dus ook veel overzichtelijker. Door de hele site komt dit gerust tientallen tot honderden keren voor. Wil je nadien toch overal de schaduw minder duidelijk, dan pas je ook dat éénmaal aan en alle referenties pakken de aanpassing direct op. Super dus om mee te werken!
Terugkijkend: we refereren in de HTML aan de Stylesheet, in de Stylesheet aan de toepasselijke classes en in de ‘classes’ aan een of meerdere vooraf klaargezette ‘toevoegingen’.
Dus in conclusie, ze gaan deze technieken om te kunnen herhaling te voorkomen NIET meer ondersteunen!
Achter de schermen altijd nog de oude techniek
Dus i.p.v. 10.000.000 acties per minuut zijn het er dan ineens 15.000.000.
En nu je hierboven las dat dit sneller en netter is EN dat webontwikkelaars hier ook veel liever mee werken, waarom zou dit dan verdwijnen, dat slaat toch nergens op? Toch heeft Shopify hiervoor wel een goede reden. Achter de schermen wordt de code namelijk nog altijd omgezet naar de uitgebreide weergave voordat het getoond kan worden. En die extra stap van het omzetten alvorens te kunnen weergeven, dat is het grote probleem.
Dat heeft een enorme impact op wat er van de servers van Shopify wordt gevraagd als je een pagina oproept. Iedere keer dat een bezoeker klikt op een link, dus miljoenen keren per minuut, moet niet alleen de server de HTML en Stylesheet uitlezen, maar moet die OOK in de Stylesheet eerst nog jouw interne referenties inlezen en omzetten naar die uitgebreide weergave. Dus i.p.v. 10.000.000 acties per minuut zijn het er dan ineens 15.000.000. Ik zet er met opzet even alle nullen bij om de impact duidelijk te maken. En dan gebruik ik m.i. ook nog heel lage getallen. Ze maken ons het leven er niet makkelijker mee, maar doen dat wel met een heel goede reden als je even in alle redelijkheid meedenkt.
Wat moet ik nu doen om niet in de problemen te komen?
Hiervoor moeten we even 2 scenario's bekijken:
1. Je hebt een thema gekocht voor je webshop en je gebruikt dat zonder eigen aanpassingen in de codering.
Dan moet je kijken of er intussen niet een update klaar staat die de nieuwe opzet bevat. Thema-ontwikkelaars zijn op de hoogte gesteld zodat ze hieraan kunnen werken voor hun klanten. Als je een thema hebt dat nog ondersteund wordt met updates hoef je die alleen maar te downloaden en te activeren in je webshop. Heeft je thema niet meer zulke ondersteuning, dan moet je mogelijk op zoek gaan naar een alternatief thema.
TIP: zet nooit zomaar een ge-update versie online. Je kunt die in je shop uploaden en dan eerst in de preview modus bekijken of alles nog naar behoren werkt. En maak ALTIJD eerst een backup van je huidige data vóór je een dergelijke actie onderneemt.
2. Je hebt aanpassingen laten doen in de opzet van je thema of een maatwerk thema.
In dat geval moeten de stukken maatwerk ook voorzien worden van maatwerk, als ze niet conform de eisen zijn opgezet. In welke omvang dat moet hangt af van de opzet, maar dit vraagt uiteraard wel meer aandacht dan het alleen online plaatsen van een kant-en-klare update.
Er zijn nog onduidelijkheden
Het is nog onduidelijk vanaf wanneer de huidige opzet niet meer ondersteund zal worden. Dat is nog niet aangekondigd en ik acht het eigenlijk uitgesloten dat als dat wel gebeurt er niet ook een fatsoenlijke reparatieperiode bij hoort. Wel moet je bedenken dat deze aanpassing nu al ruim een half jaar geleden bekend is gemaakt, dus heel veel tijd zal er nou ook weer niet meer worden gegeven. Ik wil dus aanraden om het nu al als een serieus actiepunt te zien.
