Shopify Webshop Durex | Studio Wassink

Durex

Projectdetails:

DETAILS

Wereldwijd actief
Online shops

GEBRUIKTE SOFTWARE

Shopify
Sublime
Photoshop

Ontwikkeling

2018

Portfolio Tags:

Shopify Maatwerk

Shopify Themes

Shopify Expert

Shopify Ontwikkelaar

Mijn werkzaamheden:

‣ Theme ontwikkeling
‣ App integraties
‣ Custom Sections

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.

Na te zijn begonnen met een meer standaardoplossing, raakte mijn klant overtuigd van de potentie ervan in de retailmarkt en paste een aantal dingen aan waarvan gebleken was dat die beter konden. Een maatwerk thema was onderdeel daarvan en hiervoor werd contact gezocht met Studio Wassink. De insteek van een nieuw thema was 2-voudig: 1) een uniek en professioneel design en 2) alles moet heel snel laden.

Deze webshop is niet (meer) te bezoeken

Ontwikkeling keuzes

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.
Maatwerk Sections

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.
Resultaat

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.

Technieken
gebruikt
voor de
ontwikkeling...

e-commerce

Online verkoop van goederen in een webshop

shopify

Webshop ontwikkeld met het SaaS pakket van Shopify

design

Het design omzetten naar een Shopify Theme

24/7 aanpassingen

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

Custom Data

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

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

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

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.