Mavi approached We Make Websites for a re-platform from Magento and to be delivered in a record time for the industry.

View website

Progressive technical stack

Mavi marked an important milestone for the company. We were able to deliver a website redesign and re-platform onto Shopify under a month. As a bonus, we were also able to make drastic reforms in our technical stack that would drive the framework which all our future websites will be built on.

The legacy

With no sugar coating, the frameworks we had available for custom theme building internally was restrictive and provided a poor development experience. By the time we launched websites, they were already out of date to the modern front-end developer. The options provided by Shopify were no longer supported or completely dropped *cough*Timber*cough*.

There would be so much design friction and technical debt in the initial setup, that working on the projects afterwards would prove inefficient and would not offer the best value for both parties.

The solution

So knowing that the deadline of a month was non-negotiable and to avoid development fatigue from using an unintuitive stack - and being a solo developer assigned on the project - we introduced Gulp into the theme environment and using Laravel Mix as the wrapper. This allowed us to SCSS modules and ES6 which compiled into single bundles. Although it doesn't seem that spectacular - but at the time it was and still is ahead of what Shopify provide theme developers out of the box.

With just these two small tweaks to the theme development experience, we were able to develop with cross-browser support with unprecedented speed - all the while maintaining modern coding techniques built for scale - and allowed us to be feature rich in the coming future.

This would set the path for the company's new frameworks, which I will try to write a post about in the near future.

Options selector

One of the more standout features on Mavi was the interface to allow customers to select variant options with labelled buttons with different states. By default, Shopify offers a dropdown form element to select their size options - although this may meet the requirements for most Shopify vendors - it didn't for Mavi.

On the surface, this seems like a simple solution and has been done countless times in other websites - and it has but not to this extent. The true problem lies when you remove a default selection, introduce 3 tiers of variants, live stock levels on size selection and updating available options for sizes when certain size combinations do not exist.

For example, waist 24 and length 34 does not exist as a variant. When a user selects a waist 24, the length 34 option should not be available and vice-versa.

How was it achieved?

In very simplistic dot point summary, this was the approach that was taken:

  • Output a list of radio elements for all possible values for each variant option

    • For example:

      • Waist - 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34

      • Length: 27, 29

  • For each list item, ensure the following:

    • A form label with for value corresponding to the radio element id

    • Data attribute containing the value

    • Data attribute containing the availability

  • Visually hide the radio element itself, and style the label to appear like a button

    • Style button with disabled, hover, out of stock and active states

  • Assign a data attribute storing the availability for each item which will be updated on load, and whenever a selection is made

  • Create a JS object via Liquid that outputs the product availability on a variant level

  • When a selection is made, get the selected values and cross check against the variant availability object - and find stock levels and run your logic