Insight Oxid eShop: ChocQlate.com from webnuts and Netensio

ChocQlate creates chocolate products from the pure cocoa bean, which, with natural ingredients, become a powerhouse of nature. The processed cocoa comes from natural mixed cultures in the middle of the jungle areas of Sri Lanka, Panama and Peru.

The special thing about ChocQlate, apart from the finished chocolate products, are the do-it-yourself chocolate gift ideas with ingredients and moulds.

The company’s packaging design has already won the iF Design Award and the Red Dot Award.

The old site of ChocQlate was a mixture of a kind of online magazine and shop. The shop and its navigation were strictly geared to a certain shopping process:

  • 1. ingredient set
  • 2. chocolate moulds
  • 3. toppings
  • 4. snacks

With the growth of ChocQlates, the product range expanded, which could no longer be reproduced in the original, very individual design. Also, the combination of Oxide CE 4.6 and Drupal was not responsive and the WordPress blog for recipes was located on an external domain.

For easier handling by the customer, Drupal was chosen for the content, in which oxide was integrated into iFrames. For this purpose, deep interventions were made in the Oxid system, which meant that the entire shop could no longer be updated with newer versions.


View of the old shop structure, at that time using the configurator

The aim of the project was to completely relaunch the website in addition to eating a lot of chocolate without gaining weight. The following framework criteria were to be fulfilled:

  • Responsive design in line with the new product, corporate and brand design
  • creation of new product photos and product videos
  • Can be expanded with new categories and products as required
  • Blog on same domain
  • Maximum freedom for the customer to create content

Project management and responsible for the web design and the implementation of the content was Felix Brodbeck from webnuts. The technical integration and implementation of the shop system was carried out by Michael Felber from Netensio.

The design of the new shop was created in order to correspond to the usability and habits of the users and still stand out from other shops. The already existing brand design of ChocQlate was taken up in order to transfer the brand message and the premium idea of the products into the digital world.

Since chocolate and cocoa are clearly products that you experience with your senses, it was essential to work with large and atmospheric product images that convey style and emotion.

As the icing on the cake, a special icon font was developed for the shop, which is used for the buttons.
The start page and the overview page of the shop show the brand world of ChocQlate and present the products in a tasty and emotional world of images.

Starsteite und Shopstartseite vom Oxid System

oxide view of the products

Due to the fast development possibilities and the well thought-out Responsive properties the Bootox – Responsive Oxid eShop Template from Netensio was chosen. This is based on the most current version of Bootstrap and Oxid.

The SEO and Google Merchant Module from Netensio and the Google Analytics Module from Suabo for e-commerce tracking are also used.

Article pages

Since the customer wants to have as much freedom as possible in the maintenance of the product and category pages and prefers to work with HTML and CSS, the article pages were provided with fields for CMS Idents in the backend.

The content maintenance of the product pages is therefore done by creating individual CMS pages. The structure is as shown in the following figure.


oxide article detail template

Category pages

The category pages of the shop also benefited from a similar structure. Instead of CMS pages, the long text fields of the categories are used here, which can be maintained via the backend of the shop. The distribution of the long text fields is shown in the following figure.


oxide category structure

In the checkout process of the shop, the smart Bootstrap Validator with real-time validation ensures that the customer notices during the checkout process whether the validation is correct. Correct entries are clearly marked with a green feedback and incorrect entries with a red feedback.

.

Oxid Checkout Form Validator

To enable future checkout A/B tests and to optimise the conversion rate, the sites have all been given their own IDs. So that we can operate with Optimizely AB-Testing.

Everyone involved in the project is very excited to see how the redesign of the ChocQlate shop will affect the future business.
They are waiting for statistics, which will then be used in the future to make a small study to increase the overall performance of the shop.