- Custom web development
- Custom eCommerce functionality
Our long-time client Cyberjammies wanted to add premium giftboxing options to their product portfolio, as their products are often purchased as presents or gifts. Although simple on paper, implementing this functionality onto their website would be a much more complex affair than most would initially think.
Every gift box needed to consider, not only, how many items were to go in the box, but to determine whether an order would fit in a gift box or not. Put simply, there were a lot of moving parts, and all of this needed to be streamlined for the brand’s fulfilment operation, and displayed visually so that the customer could make sense of what was happening with their order too.
The Challenge
The primary challenge actually had nothing to do with the website; it was simply figuring out what combination of products would fit in which box. Figuring this out required a lot of communication with Cyberjammies and their third parties, as to ensure that the orders would actually get fulfilled. There were two gift boxes for customers to choose from, a standard gift box and a luxury gift box, each with a predetermined height value. Additionally the standard gift box was available in two different sizes, depending on the size of the order however the price remained the same.
From here we identified a number of different hurdles that we would have to overcome from both a logistical and coding perspective.
- Once an order was placed, it needed to be easy for Cyberjammies fulfilment centres to decipher and pack, as one order could include a gift box with a set number of products and a personalised message, and a number of additional products. As a gift box is only listed as a product, the fulfilment centres would have no way of knowing what products a gift box did and didn’t contain, let alone the issues they would face when an order contained more than one gift box.
- Everything needed to be easy for a customer to understand, as all of our hard work would be rendered moot if the functionality wasn’t actually used frequently.
- The functionality needed to be just as easy for Cyberjammies to manage if and when they needed to make changes in the future.
Finally, as the initial scoping of this project was being laid out, it became clear that we needed to have an increased level of control over the code being used in this project. So instead of using a Javascript library such as React Native, which typically speeds up the construction of these functionalities a fair amount, we instead decided to primarily use vanilla Javascript, with additional sections of code being written in HTML and Liquid. This would allow us to optimise the performance of the functionality as React can inherently slow sites down, but would require an increased amount of code, and increase the likelihood of problems potentially arising.
- Web development
- UI design
- UX design
The Solution
That initial hurdle of determining product sizes was relatively simple to overcome. Cyberjammies were extremely accommodating, and went through the arduous process of measuring the “height” of each product once it was folded. This “height” statistic was then listed against each product in the back end of Shopify, as was the height of the two standard gift boxes and the premium gift box. This meant that we could compare the cumulative height of the products being added to the gift box with the height of the gift box itself, and display to the customer whether or not their products of choice would fit in a single box, and for the Standard gift box we would automatically detect whether the order would fit into the smaller size, required a larger one, or wouldn’t fit in to either.
Those subsequent challenges were a bit harder to manage, but we did overcome them.
Firstly, the process of accurately relaying to the fulfilment centres how an order was to be structured if it contained a gift box was quite a complex challenge in and of itself. But we also had to ensure we could accurately relay this info whilst working through the channels of Cyberjammies’ existing tech stack. All orders would pull through to their retail operating system, Brightpearl, and from there into their fulfilment system, Synergy, which is what staff would use to know what products went into what order.
The main issue was that, once an order was in Brightpearl we had no control over it. So, we needed to ensure that an order entered into Brightpearl in the correct format so that Synergy would understand it correctly. Achieving this was a two pronged task. Firstly, every gift box would get assigned with the associated variant ID’s of the products within the gift box, which was also useful for displaying to customers which products were in what gift boxes when they were checking out on the site. From here, orders were translated into code before going into Brightpearl, which in and of itself wouldn’t achieve anything. However, once Synergy pulled that code from Brightpearl, it would display it in such a way that the order structure made sense, and that the staff working at the fulfilment centres could pack the orders correctly.
The challenges of visually relaying everything to the customer was more of a UI design and customer usability challenge than anything else. We worked heavily alongside our design team to ensure that, to a new user everything made sense, with Cyberjammies keeping a handle on the messaging. This also brought with it the challenge of letting people edit the gift box once it was in the cart, as typically you can only add or remove products. We knew that an edit functionality was essential to not frustrate customers. We eventually built out an “edit box” option that took customers back to the gift box selection tab. Here, they could reassign which products in the cart would be contained within the gift box, or take products out of a gift box and have them just be bought separately. Again, the gift box would then indicate whether or not the chosen combination of products would fit within the height parameters of the box itself.
Finally, using Shopify’s stylised UI framework, Polaris, we gave Cyberjammies themselves the ability to edit this functionality from their Shopify customiser page. This not only meant they could change the messaging surrounding the gift box function but, if they ever needed to make changes to the functionality in the future, they could easily do so. For example, if they ever changed the height of the gift box, they simply needed to input a new height value and everything would work within the existing parameters. This capability was almost immediately put to use, as not long after the introduction of the new functionality Cyberjammies released some products that were too large to fit into any gift box. And so new messaging was implemented that would inform the customer that said “product was too large to be placed into a gift box,” if they tried to add one of these products into a gift box.
The Outcome
The gift boxes have been a huge success amongst Cyberjammies’ customers since their introduction in 2022, they have sold more than 12,000 units and have made up over 10% of all orders.
The finished functionality provided an enhanced gifting experience, just in time for Christmas 2022, but the functionality saw use all year round, as the products make for great gifts for anniversaries, birthdays and other events throughout the whole year.
Want to implement a custom functionality foryour eCommerce business? Contact us to find out how we can help.
Every great relationship starts with a conversation. We’d love to talk with you about your next project and answer any questions you might have about Shopify. But be warned… once we get talking about this stuff, it’s hard to shut us up!
.png)
.png)
