Make yourself an avatar
Creating your own distinctive character from a variety of themes and 'body parts' is central to the Toxic Fox offer. The avatar created can then be printed on a huge range of products from mugs to beach towels.Customising hair styles, accessories, colour options…
As part of their brand launch in America, the Toxic Fox character builder required functionality that further enhanced the options a user could make. These new features would give the user more choices over the existing model and allow for multiple feature choices.
As the existing character builder was linear – all characters were built in the same manner – it would have been challenging and counterproductive to try and shoehorn new functionality.
So Carpe Diem developed the concept a component-based design, to allow each character to have their own individual builder, put together with existing base components.
With this approach we not only added the new functionality, more simply, but added value by providing a sustainable model without impacting on the existing codebase for other characters.
Due to the component format and the addition of a theming system, Toxic Fox can quickly iterate new character builders as and when required.
As the existing system was built using React, we decided to use the same language and utilised Next.js as a framework to remove most of the boilerplate code from the existing builder, and to create each builder as a page, that can then be deployed statically to be served into the site via Amazon S3.
As part of the project, the eCommerce site was also moving from Magento to a Shopify instance. This meant applying their brand to their template and, crucially, integrating the new builder into the Shopify system.
As the builders are now individual static pages, these can be served into the product pages with an iFrame, allowing users’ choices to be saved against the products in their basket.