Happy Lights

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.

Let’s see how a product builder helps Happy Lights’ customers to create their own light string step by step:

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.

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.

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.

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.

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.

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.

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.