- Custom theme development
- Home furnishing
Tech Lead, Senior Full Stack Developer, Mid-Level Developer,
HTML5, CSS, JS, Canvas, jQuery,
Liquid, GraphQL, Shopify API
Create a highly customizable product builder.
About the business
Happy Lights is a Belgian handmade lighting brand founded in 2010. Its unique business model allows people to not only buy the pre-made combinations but also create their own custom lights. From the number of lights to the type of cord, everything in the light string is customizable — customers can even set the specific color for each light ball in the string if they like!
A unique business model requires unique functionality, so the client contacted us to build a solution that would make it possible. It had to both make it easy for the customers to create and buy custom strings and keep the number of steps before the checkout as low as possible.
Challenges and solutions
The client already had several websites created for different purposes on other platforms and wanted to have one online store that would combine them all. Because of the big number of customizable product options, the back-end functionality had to be very complex and combine many interdependent elements. At the same time, we needed to make it simple and easy to use for the customers on the front end of the store.
From both the business and the technical point of view, the best solution was to create a new B2C Shopify store with a custom product builder functionality where all customizable product options could be set up on one page.
How you can benefit
If you need custom functionality that is nowhere to be found, check out our Custom theme development page to see how we can solve your business challenge!
Custom product builders
There were three types of products that required the custom builder functionality:
- Indoor light strings
- Ceiling and table lamps
- Outdoor light strings
The functionality of a builder is more or less the same for each product — there are just some minor differences with the types of cotton balls or the availability of the LED USB cord for some models.
Indoor light strings builder
Let’s see how a product builder helps Happy Lights’ customers to create their own light string step by step:
Select the number of lights
It can be 20, 35, or 50, and when the customer chooses their desired amount of lights, the length of the string on the interactive element in the top-left corner of the page enlarges proportionally. This way, customers always have a clear image of what the final product will look like.
Choose the cord
There are two types of cords available — Silver LED or Silver LED USB — although the USB cord is available only for the 20 and 50 light strings. If the customer chooses the USB option, a drop-down appears where they can add a plug and a power bank to their order. When these items are added to the cart, the total price is automatically updated right on the page. This functionality was additionally designed and implemented within the builder itself.
Choose the color
We also developed the functionality that makes it easy for customers to choose colors for each specific light ball in the string. The color of a ball can be set in two ways: manually for each one or in bulk via the autofill option.
Picking colors manually
Customers need to select a ball on the interactive string, choose a color from the color palette and then repeat these two actions until all the balls on the string are colored.
This functionality makes it quick and easy to create a string of up to 50 unique lights in a unique order.
If the customer does not want to manually select the color for each ball, they can use the autofill functionality and choose colors for just 5 lights. After pressing the Autofill button, the whole string will be colored using the same pattern.
At the end of the builder page, there is an option of adding the assembly service to the order. All the separate details would be properly put together and connected — the price for the service also automatically adds to the final price on the same page.
The ceiling and table lamp builder
This builder is for a different type of product. Although its structure is almost the same, there are some changes — customers first need to select the type of lamp and the size of the cotton balls. Like in other product builders, the interactive element with the image of the final product changes according to the selected type, also showing the length of the string.
Customizing the cart
To prevent customers from choosing the lights that have run out of stock, we needed to track the inventory of every single light ball. It would not be possible for a standard Shopify store because the colors of a product are typically set just as product options and are not individually tracked. For this purpose, every color option of a light ball within the Happy Lights’ Shopify store is not a product option but a separate product, which has its stock and is tracked individually. This functionality prevents customers from buying items that are not currently available and helps to avoid any kind of unpleasant situations both for the business and for its clients.
This solution which is crucial for the proper functioning of the store created yet another challenge. A typical Shopify cart consists of all products bought in a store, and when a color option of a light ball is set as a separate product, a standard Shopify cart, in this case, would be a total mess consisting of all the balls, cords, and plugs. This way, customers would feel that they are buying several random messy items instead of a single custom light string, which would make the customer experience in the store significantly worse. To fix this, we customized the cart, and now customers see just the final product they buy, not all its separate parts.
Calculating the price
Another tricky part was calculating the price.
As Happy Lights is a European-based business, they have to add VAT to their sales. Many details and conditions should be considered while calculating this tax, so the business required two final prices for their customers to choose from — with and without VAT.
To calculate the cost without VAT, the client was using a third-party app. Our task was to create and integrate into the product builder the functionality that would calculate the final price with the added VAT. This was challenging, but now the final price with and without VAT is automatically calculated right on the page and changes in real-time while the string is being customized.
The same item can be bought in the Happy Lights store in two ways — as a separate product and a part of the string. The prices in these two cases are different, and we needed to take that into account to perform the correct calculations. The Draft Order API is typically used for this, but at the same time, it also significantly restricts the usage of discount codes and automatic discounts. To avoid these limitations, which are not suitable for an online store, we managed to get the desired functionality by using the Shopify Buy SDK on top of it.
Therefore, we had to build a complex development solution so that the discount codes could be applied to the cart, making it possible to buy one product for two different prices within the same store.
In the end, the client got the solution that solved their business challenges and fit their unique business model, making the shopping experience for their customers comfortable and fast. To see the client’s feedback about our work, please check the client review section in our Clutch profile.