Inzicht OXID eShop: ChocQlate.com van webnuts en Netensio

Inzicht OXID eShop: ChocQlate.com van webnuts en Netensio

ChocQlate maakt chocoladeproducten van de pure cacaoboon, die met natuurlijke ingrediënten een krachtpatser van de natuur wordt. De verwerkte cacao is afkomstig van natuurlijke mengculturen in het midden van de jungles van Sri Lanka, Panama en Peru.

Het bijzondere aan ChocQlate zijn, naast de afgewerkte chocoladeproducten, de cadeau-ideeën van chocolade voor doe-het-zelf maken met ingrediënten en vormen.

Het verpakkingsontwerp van het bedrijf heeft al de iF Design Award en de Red Dot Award gewonnen.

De oude site van ChocQlate was een mix van een soort online magazine en winkel. De winkel en zijn navigatie waren strikt gericht op een bepaald winkelproces:

  • 1. ingrediëntenset
  • 2. chocoladevormen
  • 3. toppings
  • 4. snacks

Met de groei van ChocQlate werd het assortiment uitgebreid, wat niet meer in het oorspronkelijke, zeer individuele ontwerp kon worden gereproduceerd. Ook de combinatie van OXID CE 4.6 en Drupal was niet responsief en de Wordpress blog voor recepten bevond zich op een extern domein.

Voor een vlottere afhandeling door de klant is gekozen voor Drupal, waarbij OXID is geïntegreerd in iFrames. Hiervoor werden diepe ingrepen in het OXID-systeem gedaan, zodat de hele winkel niet met nieuwere versies kon worden geüpdatet.

Ansicht des alten Shopaufbau, damals mittels Konfigurator

Het doel van het project was om naast het eten van veel chocolade ook de website volledig te herlanceren zonder dat er gewichtstoename optrad. Aan de volgende algemene criteria moest worden voldaan:

  • Responsive design in lijn met het nieuwe product-, bedrijfs- en merkontwerp
  • Creatie van nieuwe productfoto's en productvideo's
  • Uitbreidbaar met nieuwe categorieën en producten
  • Blog op hetzelfde domein
  • Zoveel mogelijk vrijheid voor de klant om inhoud te creëren

Projectmanagement en verantwoordelijk voor het webdesign en de implementatie van de content was Felix Brodbeck van webnuts. De technische integratie en implementatie van het winkelsysteem werd gedaan door Michael Felber van Netensio.

Het ontwerp van de nieuwe winkel is zo gemaakt dat het overeenkomt met de gewoontes van de gebruikers in termen van bruikbaarheid en zich nog steeds onderscheidt van andere winkels. Het reeds bestaande merkdesign van ChocQlate werd overgenomen om de merkboodschap en het premium-idee van de producten over te brengen naar de digitale wereld.

Omdat chocolade en cacao duidelijk producten zijn die met de zintuigen kunnen worden ervaren, was het essentieel om te werken met grote en sfeervolle productbeelden die stijl en emotie overbrengen.

Dus in een twee weken durende fotoshoot zijn alle producten opnieuw gefotografeerd en zijn er 12 nieuwe productvideo's gemaakt. De foto's zijn genomen door Olga Löffler.

Als kers op de taart is voor de winkel een speciaal iconenlettertype ontwikkeld, dat gebruikt wordt voor de knoppen. De homepage en de overzichtspagina van de winkel tonen de merkwereld van ChocQlate en presenteren de producten in een smakelijke en emotionele wereld van beelden.

Starsteite und Shopstartseite vom Oxid SystemOxid Ansicht der Produkte

Door de snelle ontwikkelingsmogelijkheden en de uitgekiende Responsive karakteristieken is de Bootox - Responsive OXID eShop Template van Netensio geselecteerd. Dit is gebaseerd op de laatste versie van Bootstrap en OXID.

Verder wordt de SEO en Google Merchant Module van Netensio gebruikt en de Google Analytics Module van Suabo voor E-Commerce Tracking.

Artikelpagina's

Omdat de klant zoveel mogelijk vrijheid wil hebben bij het onderhoud van de product- en categoriepagina's en liever met HTML en CSS werkt, zijn de artikelpagina's in de backend voorzien van velden voor CMS Idents.

Het inhoudelijk onderhoud van de productpagina's gebeurt daarom door het maken van individuele CMS-pagina's. De structuur is zoals weergegeven in de volgende figuur.

Oxid Artikel Detail Template

Categorie pagina's

Ook de categoriepagina's van de winkel hebben van een soortgelijke structuur geprofiteerd. In plaats van CMS-pagina's worden hier echter de lange tekstvelden van de categorieën gebruikt, die via de achterkant van de winkel kunnen worden onderhouden. De verdeling van de lange tekstvelden is in de volgende figuur weergegeven.

Oxid Kategorie Struktur

In het afrekenproces van de winkel zorgt de stijlvolle bootstrap validator met real-time validatie ervoor dat de klant merkt of de validatie correct is, zelfs als hij typt. Correcte vermeldingen worden duidelijk gemarkeerd met een groene feedback en incorrecte vermeldingen met een rode feedback.

Oxid Checkout Formular Validator

Om toekomstige A/B-tests bij de kassa mogelijk te maken en de conversiesnelheid te optimaliseren, hebben de sites allemaal hun eigen ID's toegewezen gekregen. Zodat we kunnen werken met Optimizely AB-Testing.

Iedereen die betrokken is bij het project is erg enthousiast over de invloed die de herinrichting van de ChocQlate winkel zal hebben op het toekomstige bedrijf. Ze wachten op statistieken, die gebruikt kunnen worden om in de toekomst een kleine studie te maken om de algemene prestaties van de winkel te verhogen.

Meer informatie

Bezoekers die geïnteresseerd zijn in dit artikel hebben op de volgende pagina's ook nuttige informatie over dit onderwerp gevonden.