The problem

Jay Friedmann, founder of Stronger eCommerce, has been working with Shopify merchants for years, delivering innovative custom solutions to improve shopping experiences and general operations. One of his clients, Modular Closets, a well-known national brand, faced significant challenges with their online shopping experience, so they turned to Stronger eCommerce to leverage the agency’s expertise.

The brand was using 17squares, a popular third-party system for designing closets. The tool allowed customers to build custom closet layouts and add all of the necessary products to their cart at once. The problem, however, was that the design tool wasn’t a Shopify app. It was embedded in an iframe, which prevented it from interacting directly with Shopify's Ajax API — meaning it was unable to handle cart additions properly.

The main problem arose when customers tried to add their closet designs to their cart. Instead of adding the closet components to the existing cart, 17squares would redirect customers to checkout, overwriting any other items in the cart. If customers had been shopping for any closet accessories before starting their design, those items would be lost when they went to check out.

“It was so frustrating to have customers losing their products. I saw a customer place four separate orders to get four different closets, just to avoid the problem. But nobody wants to do that.” Jay explained. “Customers would just churn.”

Editing an existing closet design was even more complicated. When a customer updated their design, instead of updating the cart with the new components, 17squares would add the entire design again, creating duplicate items in the cart. Since the products weren’t bundled, customers couldn't easily identify which items in their cart were part of their new closet, and which were from the old design.

Between missing items and inconvenient shopping experiences, customers were frustrated and Modular Closets was dealing with lost sales and abandoned carts. Building a fully custom solution wasn’t feasible for the client, as it would be prohibitively expensive, time-consuming, and require more advanced backend development skills than his team had at that time. But to Jay and the Stronger eCommerce team, this was an opportunity to find an innovative way to bridge the gap between 17squares and Shopify, and learn some new skills along the way.

‍

The solution

Jay had previously focused on solving client challenges using custom Liquid code and webhooks with AWS Lambda functions. When he came across a tutorial in the Liquid Weekly newsletter on building a full-stack Shopify app in just 20 minutes using Gadget and ChatGPT, he saw an opportunity to take his solutions to a more sophisticated level. His hope was that with Gadget, he could build on his partnership with Modular Closets and create a solution that exceeded their expectations.

After following one of the Gadget tutorials, Jay was confident he could solve his client’s problem despite never building a Shopify app before. His plan was to create a custom bundling app that seamlessly integrated 17squares with the Shopify cart, while working within the limitations of the iframe.

Gadget’s built-in Shopify connection managed the Shopify API scopes he needed, allowing for easy data syncing, and the platform provided an easy-to-use database for Jay to store any custom data. He even got an auto-generated API to execute his backend logic. Gadget provided tutorials for almost everything, and pair programming was provided to assist with building out the Shopify Cart transform functions.

Jay leveraged line item attributes to clearly identify the individual components, then created a bundle ID to represent each custom closet as one item in the cart. From there, he simply needed a way to pass that data from the iframe to the cart. Since Gadget made it easy to set up custom routes and actions, it was no problem.

He created an event listener that would pass all of the information from a customer’s closet design to the cart. The cart transform function took note of the product IDs for each component in a design, and then used the design ID to create a bundle for each custom closet. That bundle was then passed into the parent element for the iframe, which added it to a customer’s existing cart.

Now, customers can design their closets without worrying about overwriting other items. Because each closet design has a unique ID, if a customer makes any changes to their design, the app can update the bundle with the new list of products, without creating duplicates. It even generates a custom image for each closet design, uploading it to AWS S3 and forwarding it to Shopify to display in the cart.

‍

The results

The entire project was completed in just two months, with the backend logic built in Gadget taking less than two weeks. The remaining time was spent managing the complex design requirements and building with HTML, CSS, and JavaScript directly within Shopify.

The bundling app has had an immediate impact since going live. Customers can now design multiple closets in a single session without losing their cart contents or having to place separate orders. Since implementing the new bundling tool, the Modular Closets team has been collecting customer feedback and tracking any changes in behaviors to monitor the success of the new app. They’ve seen a 62% increase in customer satisfaction that has translated to a 17% increase in revenue.

“With a functional bundling app, there’s a massive increase in customer satisfaction. It also saves the team a lot of headaches when it comes to reporting, managing multiple split orders, advertising metrics, average order values, and customer values. And I couldn’t have done that without Gadget.”

The app also added a more efficient way to handle related orders, and connect orders back to marketing initiatives with enhanced tracking. According to Jay, the team estimates a 56% boost in operational efficiency and a 45% improvement in the accuracy of advertising and reporting since launch.

Now, both customers and staff can easily identify closet bundles in the cart, complete with custom images — a feature that was missing before. Each custom closet is treated as a distinct bundle, so customers can quickly see which closets are in their cart at a glance, with clear details on what each bundle contains.

Moving forward, Jay feels more confident in his skillset, explaining, "Gadget has taken my value to clients and raised it exponentially. With everything I’m now able to do, it's truly multiplied the impact of my work." His agency, Stronger eCommerce, has become even more indispensable to Modular Closets, and the whole experience has strengthened their working relationship.

By leveraging Gadget, Jay was able to build a complex custom app quickly and cost-efficiently solve a critical challenge his client had been struggling with. Since Gadget gave him custom actions and direct access to the bundle API, he was able to create sophisticated cart manipulations that seamlessly integrated with the existing tool his client was using. This approach saved the client the cost of migrating to a new solution, while still solving the challenges they were facing. Thanks to Gadget, he was able to do it all within a timeframe and budget that worked for his client.

“With Gadget, the database, functions, and routes — everything is just such a pleasure to work with."

With the success of the closet bundling app, Jay is now better positioned to take on more complex projects for his clients. He's exploring other ways to leverage Gadget's capabilities to create custom solutions that aren't possible with standard Shopify apps.

‍

About the Agency

Stronger eCommerce is a leading Shopify Agency dedicated to transforming online shopping experiences by partnering with brands across a diverse range of industries. They specialize in crafting custom Shopify themes, optimizing store performance, and delivering seamless integrations, with a focus on helping clients achieve their e-commerce goals with precision and efficiency.

For more than 9 years, the team has partnered with brands, combining cutting-edge technology with a deep understanding of each client’s unique needs to create beautiful storefronts, efficient backend processes, and innovative custom solutions.