Product
Volledig Shopify Thema

Klant
Durex

Werkzaamheden
Realisatie van Front-end werkzaamheden

Case Study

DETAILS Durex

Wereldwijd actief
Online shops

SOFTWARE

Photoshop
Shopify
Sublime

Wanneer

2018

Shopify Webshop/

Durex

Het nieuwe thema staat nog niet online dus kan ik deze nog niet inhoudelijk tonen. De ontwikkeling is wel afgerond

Durex was toe aan een facelift in de webshop en had de keuze gemaakt om met het Shopify pakket te gaan werken. Zij vroegen aan ModusLink, die mij inhuurde als Front-end ontwikkelaar voor deze webshops, om deze te ontwikkelen. Omdat het hier om een groot merk gaat moest natuurlijk alles ook als custom design opgezet worden en het was belangrijk dat ze zelf ook controle hadden m.b.t. het aanpassen van de inhoud op de verschillende pagina’s. Een uitgebreide maar prachtige opdracht die alle facetten met zich meebracht.

Omdat alles naar eigen wens gemaakt moest worden ben ik gestart met een thema waar eigenlijk niks in zit behalve een paar standaard stukjes code om alvast wat producten aan te roepen. Een andere keuze is om een uitgewerkt thema te pakken en die aan te passen, maar dan blijf je achter met veel onderdelen die je helemaal niet in gaat zetten en dit gaat de hele webshop onnodig vertragen. Ik heb dus alle onderdelen opgezet in HTML5, CSS3, Javascript en wat JQuery.

Om het mogelijk te maken de inhoud op ieder moment aan te passen hebben we eerst besproken welke onderdelen hierin belangrijk waren. Dit waren er nogal veel, maar het kon allemaal wel dus daar gingen we voor. In Shopify heten deze onderdelen “Sections” en in die secties kon ik dus opgeven wat er allemaal aan te passen moest zijn. Teksten, links en afbeeldingen moesten op ieder moment realtime aangepast kunnen worden dus dat heb ik ingebouwd. Wanneer deze onderdelen aangepast worden zullen ze automatisch de vooraf ingebouwde stijlen overnemen zodat het altijd past binnen de huisstijl.

Dit project was met groot recht een uitdaging te noemen. Naast de besproken onderdelen waren er nog zaken als custom field per product, SEO voorwaarden en nog veel meer waar allemaal rekening mee is gehouden. Een prachtig project met een net zo mooi eindresultaat.

Durex Shopify Webshop

Technieken

e-commerce

Online verkoop van goederen in een Webshop

Shopify

Webshop ontwikkeld met het SaaS pakket van Shopify

Front-end development

Het design omzetten van een ontwerp naar werkende webshop met HTML/CSS/JS/JQUERY

Custom fields

Voor extra product info zijn er custom field toegevoegd die per product aangepast kunnen worden

branding

Alles moest in de huisstijl dus dat is op iedere pagina ingebouwd

24/7 aanpassingen

De shop zit vol met custom sections zodat de inhoud zonder enige programmeer kennis 24/7 kan worden bewerkt

Timalux Shopify Webhop banner

Design

Alles in de huisstijl, ALLES!

Omdat we te maken hebben met een grote speler was er niet de wens om alles in de eigen stijl te hebben, dit was de eis. Het thema waar ik mee begon bestond uit een witte achtergrond met wat zwarte tekst. Meer was er niet en dat is de beste basis als alles naar eigen hand gezet moet worden!

Ik begin graag met het instellen van de basis waarden zoals het kleurenpallet, de fonts en indeling van de pagina's. Daarna wordt alles ingevuld qua vlakken en daarna de details per vlak. Zo kan de klant ook de voortgang prima volgens en als het nodig is deze met mij bespreken voor alles al gedaan is.

24/7 aanpasbaar

Sections en nog meer sections

Met behulp van Shopify's eigen code, de LIQUID variant, kan ik onderdelen definiëren die op ieder moment aanpasbaar moeten zijn vanuit de standaard shopify menu's. Vaak zijn 1 of 2 plaatsen waar dit kan voldoende, maar in deze shop moesten er bijna 10 klaargezet worden zodat de inhoud ten alle tijden aangepast kont worden door iedereen, ook zonder programmeerkennis dus!

HTML | CSS | JS | LIQUID

Een krachtige combo die toch overzichtelijk is

Er komen heel wat soorten code kijken bij de realisatie van een dergelijke opzet. Alles moet premium werken en aanvoelen en dan ook op alles formaten schermen en dus ook met gebruik van de vingers. Een combinatie van in totaal 6 soorten code hebben dit thema gemaakt tot wat het is geworden. Allemaal zo ingedeeld dat de verschillende modulen zeer snel op te zoeken en aan te passen zijn mocht dit een noodzaak worden.

Custom velden

Naast sections meer vrijheid nog

Sections zijn onderdelen die niet productspecifiek zijn. Ze kunnen wel (met tags) zo ingesteld worden dat ze bij bepaalde producten worden getoond, maar in principe zijn deze voor de meer algemene onderdelen. Er zijn ook mogelijkheden om per product extra informatie te tonen met tekst, links en afbeeldingen. Dit is ook in deze shop toegevoegd zodat dit makkelijk aangepast kan worden en voor de SEO kan worden geoptimaliseerd wanneer er nieuwe inzichten zijn.