MelioraWeb's creative solutions have been impressive, allowing the client to utilize all of Shopify's features. The team has a solid project management process, and they're transparent about their progress. They're also determined to achieve the client's goals in a timely and cost-effective manner.

Al Harris Founder & CEO, Home & Commercial Building Company

Plans are nothing. Planning is everything.

This project had many key features and pages to implement such as a 3D product configurator, getting a quote functionality and IP-based filtering. We created a plan for each feature which led us through the process of rapid implementation, resulting in an MVP-ready product with all needed functions - it worked great!

We kicked off with:

  • Breaking the deliverables into Epics and User stories in Jira. Each epic corresponded to a page, and its stories were the FE/BE tasks breakdown.
  • Determined the communication base - we used BaseCamp for the PM tool and scheduled weekly meetings with the client and the 3rd-parties involved in the project.
  • Creating a Gantt chart containing all the epics and user stories.
  • Creating the low-fidelity interaction designs of the priority pages, for which we used Adobe XD. This not just allowed us to start the development work immediately after. Still, our client could provide real-time feedback of which we would start work ASAP and not waste time and effort implementing something, which is changed later.

We saved the end customer an enormous amount of money for shipping fees by developing smart filtering. We even developed a custom application to make the user experience exceptional.

We started out the development process with the Product Listing page because it’s crucial for the store and its conversions. 

When there are many available products, it’s crucial for the filter to be as user-friendly as possible. No customer will stay on a website for more than a few minutes if they can’t easily find the thing they are looking for or keep scrolling and not find the wanted product. So, for the initial containers show, we used customers’ IP addresses. This way, the customer could check the containers as close to him as possible and save from a shipping fee. Imagine a 50ft container shipping fee!

Every container has its unique characteristics, and we had to implement the filtering, considering them to be easy and fast to be maintained at the same time. Each container had a unique size, price, type, condition, and door configuration. So, we used the power of Shopify product tags and developed a custom application, which integrated with the storefront API. Based on the product’s available tags, it was either shown or not on the Listing page. This way, we killed two birds with one stone - we used native Shopify functionality, and thanks to the bulk product import, tags were easily maintained.

Using the product tags, we even displayed on the container cards if they had modifications available. This way it was super easy for the customer to check whether a container could be modified or not without any effort.

We made a real-time map view of the available products!

The map showed numbered pins with all available containers per location. Once a customer clicks on a, a container card pops up with all its characteristics leading to the product page. So, two clicks, and the customer is already on the product page of their exact desired container! Google Maps API gave us a tough time playing with it, but eventually, we conquered it.

The map view had to be identical to the list view, so we also made the filtering work there. By zooming in/out, the customer could see available containers depending on their location.

3D custom container configurator - challenge accepted!

So, each container card led the customer to its product page, where the true magic happened! By clicking a button, the customer was opening a 3D implementation of a container with its actual dimensions and the possibility to add modifications, such as windows, doors, different colors, door locks, and roofs. The changes themselves could be adjusted, too, and previewed in real-time. We made the modifications more effortless and intuitive with a drag and drop option. We also made rules for the modifications: depending on the container size, let's say 50ft, the customer could add no more than four windows as they would not fit into the container. The customer also had the option to twist the container to view all its sides. In addition, all modification prices were real-time calculated and added to the container's worth, so we also displayed a summary price. For example, for the colors, we showed the color's price per square meter, calculated the whole amount considering the container's size, and added the amount to the summary price. Whenever the customer chose different colors, they applied to the container to preview what it would look like. There was also a modification removal option before the completion. 

We used WebGL and JavaScript for the container configurator and developed a custom application, which integrated the configurator with the Shopify storefront. 

After the customer hit the Done button, they were led back to the container's product page, where we put a real-time preview of the modified container in an iframe. The customer could also check the container's details, such as surface scuffs, rubber seals, lockboxes, and even real-time opening doors, showing the container flooring. For that, we over-used the product tags again. So, each container's detail was a product tag on Shopify, allowing the bulk edit option again. 

We wanted to centralize the container's edit process so it would be super easy to maintain the hundreds of products. 

In the iframe preview, we added the container's specifications, also. Imagine a container blueprint with dimensions, weight, floor space, and equivalent. Because the containers had different specifications, we again used the product tags to display each container's ones.

Along with the preview, the customer had a list view of the modifications they added to a container with the option to edit them. 

We made the product page displaying all the essential information about a container with a no-scroll view. We developed an option to change the delivery location and the shipping fee calculating immediately depending on the customer's chosen delivery option.

We also developed a custom application that we integrated with the Acorn app and displayed different options for deferred payment.

For a primarily b2b-oriented business like this, a crucial part was for the potential customers to get a quote for one or more containers. So, once the customer had configured the container they wanted, they had the option to get a quote for it. How did we do that? We developed a “Get a quote” page, where the configured container with all its modifications and price was displayed along with the option to edit, remove or change its quantity. The cost would be re-calculated accordingly. 

We made the delivery address section almost automatically filled. We took the zip code based on the customer’s IP address, and if they had a profile in the store, their address was automatically pre-filled. Along with the address, the customer had the option to change the delivery option, and the estimated delivery would re-calculate. 

We integrated the customer information with the storefront API, so whenever a customer requested a quote, they were saved as “customer” in the Shopify admin panel along with the details they provided. So, it was super easy to reach them out afterward.

Again, the most common case for the business was a b2b sale. We needed to implement the “Get a quote” functionality to be as automated as possible. Here’s what we did. 

Once a customer filled in all the required fields and hit the send button, a draft order was automatically created in the Shopify admin panel containing all the information needed, including the custom questions we had asked in the form. The customer also received an email with a CTA to complete the order in one step. We developed a custom application for the custom delivery options and integrated it with the checkout page. Once the customers clicked the CTA button, it led them to the checkout page, where all the delivery information was pre-filled, and they were pretty much one step away from completing the order. We made it that easy! Impressive, right?

We did not just make the site super usable. We made it like you were there!

First impressions are everything, and even though the site was full of super user-friendly-developed functionalities, we needed to bring the customers’ attention at first glance. So, we made the homepage look like the customer is in the shipping yard. We simulated a 3D environment so the customer would understand what a container would look like. And not just that, they could “take a walk” in the yard with an almost 360° panorama view.

We also made each container type pop up a modal with the predefined available sizes for that type. Once a customer had selected once or more, the product listing page would open up with the sizes pre-applied as filters. We made the maintenance of those pop-ups super easy to use with the help of the Shopify customization panel. We implemented custom fields on the homepage where it could be fully edited without a code need.

So, it was an incredible, challenging, and learning experience for a wrap-up. We gained so much knowledge of how the Shopify APIs work. We are proud of the development level we gained from this project and believe there’s no such currently on the web!

We spent almost a year from the project kick-off to the final handover, complete with so much brainstorming and improvements, making the site as it is.

Growth achieved

Growth achieved

Next project
Haven Tents

Haven Tents

Shopify Stores

Growth icon


Increase in Y2Y Revenue

Growth icon


Increase in Returning Customers

View Full Case Study
Start Chat Scroll to top