Myster, a German company with the motto: “Sorgenfrei renovieren” (translating to “renovate worry-free”), allowed its customers just that – the ability to renovate their homes or offices without worrying about which expert to contact and if it is going to be completed in time because Myster handled that for them.
By using its established network of handymen and experts in the fields of painting, window and floor set-up, Myster was able to provide its customers with the guarantee that their house renovation is going to be perfect and on time.
Initially, the idea was to use Shopify fully, creating a new storefront and adding all necessary logic to it and keeping everything on Shopify’s side.
The store would need to have an app embedded in it that would allow the user to customize their cart (which is basic Shopify functionality), but, it should only render products based on user data provided by Myster’s home-building partners, automatically add services based on the product the user chose, and automatically choose the quantity of supplies needed on a room-by-room basis, and many more things.
With these conditions set-up, we set out to find Shopify approved apps that we could connect with the store and handle all these features.
Unfortunately, the applications available weren’t really capable of handling a lot of these requirements. While there are calculators that will give a result based on area parameters, there wasn’t any support for product variants, and while the store’s Liquid theme can be edited to suit the design and Myster’s CI, giving it the functionality it needs is a completely different story, as it would then need an embedded application that would override some of Shopify’s functionality with our own.
For that reason, we decided to use a different approach.
The Shopify store remained, and it was used as a gateway to a React application.
We still used Shopify’s backend for products, for storing customers’ personal data and billing/invoicing.
On our own backend, we stored building data that would be displayed to the customers (paired to the Shopify backend by using the customer’s Shopify ID as a common value).
On the frontend, we displayed all the functionality that we couldn’t do on the Shopify store and more.
First off, an Admin page was created, that allowed Myster employees to choose which users to grant access to the website.
Secondly, registration and callback pages were created for new customers and old customers who want to make changes.
Once the customer was cleared, they were able to choose products for each room in their new house on a floor-by-floor basis in a sleek and responsive UI.
While the project diverted from its initial idea of a Shopify store with connected applications for functionality into a React application interconnected with Myster and Shopify backend, it really shows that with the right combination of technologies a wide variety of things can be achieved.