Overview
The Millshop Online is a leading UK seller of upholstery fabrics, who also offer a bespoke made-to-measure service. Users can enter their measurements for curtains or blinds, choose various options and add-ons, and get a customised price.
We helped to migrate the site over from Magento to Shopify to give their team and their customers a better shopping experience. However, Shopify can be limited to what can be done via the theme and with no way to create a made-to-measure tool inside a Shopify theme we looked to Laravel to build an M2M Shopify app. The app can calculate everything required to purchase made-to-measure curtains or blinds, as well as generating a price and adding the bespoke product to the Shopify cart.
Database Planning
We begin by planning out the database structure. This was an important task, to begin with, because there are many options for a single made-to-measure order, such as width, height, fabric type, lining type, heading type, pleat style, finish type, and heading size. To name but a few.
This meant creating various different tables to contain all of this information. Each option used its own database table, so we could easily create relationships between each variable and query them efficiently.
API for Calculating Prices
Once we had the structure and all the data in place, we created a bunch of API endpoints for the data to be accessed, with two primary endpoints for the API, calculation and bespoke product creation.
The first endpoint, calculation, required us to create a class which housed all logic for generating the price the user will pay.
The second endpoint, bespoke product creation, required us to create a class which connected to the store via the Shopify admin API. Once the connection is established, we create a variant of the current fabric product, which has the measurements and price for the bespoke made-to-measure product.
Shopify Theme Integration
The fun didn’t stop there. Once the functionality was built, we had to integrate the API visually into the custom Shopify theme we’d already built.
This involved pulling Vue into our theme and creating a “configurator” Vue app. Within this Vue app, we handle all the states for the made-to-measure interface that customers will see, as well as consume our own custom API for both calculating prices and adding the bespoke made-to-measure product to the cart.
The result
Customers can now easily, and in only a couple of steps, create their own custom-made to-measure curtains or roman blinds, add them to the cart and purchase them quickly.
