Trend-setter and premium ready-to-wear brand Maison Kitsuné has been around since the early 2000s. Following the technical innovations of our world, the e-commerce industry didn’t fail to interest the brand and thus marked its arrival on the web.

The fox: an ‘ever changing face’.

After several years of good service, the 2017 Magento instance was starting to show its age; due to both the multiple agencies who worked on the project and by more and more features being implemented on unstable grounds, thus creating a noticeable technical debt.

Alas, as a glow in the night, as a light in the middle of the sea: Hyvä crashed the Magento party with its blazing fast theme using brand new technologies. Goodbye jQuery, hello AlpineJS! Time to leave SASS behind and build new horizons with TailwindCSS. 

From a performance standpoint, it appeared quite clearly as the perfect opportunity for the shop to start anew. Hence, having to build again from scratch would also mean getting rid of a huge chunk of the technical dept.

Ah, but a journey wouldn’t be so epic if there weren’t any challenge. Since 2019, a previous agency had an early glimpse at a new contender in the vast battleground of search engines for Magento: Algolia. First used as the autocomplete engine, one of many Blackbird Agency’s projects was to implement it as a listing, cross-sell, up-sell and recommend products engine; the overall project went live by 2021. 

How did the transition go? What were the benefits of doing so? Is Algolia Hyvä-friendly? And why does this article’s introduction sound like a movie trailer? Let’s find out!

From Hyvä to the Moon (and back)

The least we could say is that we reached our goals. I know, I’ve spoiled the whole thing literally in the first sentence, but it doesn’t take away from the epic journey that led to this achievement!

Inside the tinkerer’s workshop

In fact, in a small matter of 6 months, the project was baked, done and delivered live. The easy-to-use promise made by Hyvä was in fact a just-add-water kind of a deal; but truth be said there wasn’t any doubt since it wasn’t our first ride on this sky-rocketing technology at all. Yet, the amount of features and external dependencies tightly knitted together to be redone from scratch or freshly adapted to Hyvä was quite the handful.

What has been delivered is what was already there, and more. A little overview of the features: a fully customizable homepage using a block strategy (but dodging the dreadful PageBuilder), over-the-top search engine customization and automatization, header search with instant results, search area marketing push, listing page marketing push, video product pages, cross-sell, up-sell, recommended products, complete-the-look up-sell; you name it – we have it. 

Mobile search area marketing push

Mobile quick shop

While it would have been the perfect opportunity to implement Hyvä Checkout, the needs were already satisfied by another partner providing us with a checkout process, dynamic price conversions, store switcher and dynamic banners per country.

One of the star-features that made a comeback is the custom product tile component. Using either Algolia’s InstantSearch or Recommend modules, it provides a picture slider, quick shop with AJAX, product labels and (soon) a back-in-stock alert pop up form. Many face the eternal question of feature added-value versus performances. It did occur to us, close to release, that such a greedy component had its downsides performance-wise.

I want one in every colour! Product tiles and hover effect (middle)

Chasing performances, one millisecond at a time

But thanks to the full documentation, the Hyvä community and the straightforwardness of AlpineJS, such challenges were beaten without almost no compromises, neither for the client nor the end-user. The key objective was performance and two strong indicators were sufficient: a great range of WebVitals score and a full analysis of a before/after by our performance analysis partner. 

WebVitals are interesting. First, because as developers it faces us with our greatest fear: not understanding what is going on. So many aspects, acronyms, good practises and accuracy has to be mastered to raise to the level, especially in the e-commerce domain, since it can directly lead to visitors leaving the website. Truth be told, previous WebVitals were cataclysmic to say the least.

For instance, on the homepage, performance-wise the website was reaching between 5 and 10 on mobile, and 15 at most on desktop. Now, we have a constant 50+ on mobile and 80+ on desktop, and that’s not all: SEO, Best Practices and Accessibility all raised through the roof to reach almost 100 (80+ at least for the weakest) throughout the website.

New heights for the WebVitals!

Pleasing the Vitals is one thing, but loading times and end-user experience is another. We’re quite keen on our end to say it was a successful goal for our team. A full performance analysis is run multiple times a day from multiple Internet providers to gather a complete spectrum of the current state of the website. The catch-up call with our partner was the cherry on the top: loading times on every page are groundbreaking, being cut by (almost) 3. A complete scenario (homepage through checkout, step by step) was taking 52 seconds on average on Luma. On Hyvä, we’re just around 20 seconds. 

Don’t mind the gap, nothing to see there…

Some pages load faster than others, obviously, but we notice at least half the previous loading time everywhere. A huge step forward, that wasn’t only achieved thanks to Hyvä but also by our partner, Algolia.

Algolia’s AI guide to glory (novel not included)

Our first intuition was the correct one: it wasn’t the neat little features here and there that was our biggest question mark, but the compatibility yet to come of Algolia in a Hyvä context. At the time of the first steps of development, only a small compatibility module was available on the Hyvä Community GitLab, providing us with a glimpse of the Algolia API Client. 

What’s our stack, you ask. Well, obviously the core module Algolia_AlgoliaSearch is installed. For our listing, searching and product push needs we use the Algolia InstantSearch UI library with vanilla JavaScript. And finally, a massive part of the cross-sell/up-sell is done so using Algolia Recommend. 

Needles in a haystack

The scariest thing about starting a compatibility module from scratch is that we never truly know if we’re going in the right direction. As we started the early development for InstantSearch, it was mandatory for it to work soon, and work well. First of all, the website’s listing is handled by Algolia; its lightning loading times and filtering truly makes it effortless to browse countless sweatshirts in the correct sizing right away.

The cornerstone of InstantSearch resides in its dependencies, thus leading us into finding a new way to dynamically load external resources cleverly. With a bit of time, we ended up into the next step: reading properly all the Algolia configurations set from the back office. Dear reader, if you are considering jumping into the wonderful world of Algolia, please rest assured: everything is customizable. Formidable feat, yes, but a dreaded one for us!

Algolia’s best added-value is truly its way of making everything your own. From how the results may be filtered, to visual merchandising, facet weights – it’s just all grand. Fortunately, AlpineJS made things quite a bit easier by allowing us to declare custom objects and interact with PHP seamlessly, we managed to get it run. But what for? Well, a listing page with instant response time, and live filtering!

Now don’t come and tell me you didn’t find anything in your size!

Technically, every product matched by Algolia represents a hit, a single template. Its purpose is incredibly important, because this saves a lot of development time, by being re-used inside the search engine and on the homepage/product page.

While we could have used the Autocomplete module from Algolia, Maison Kitsuné asked us to be bold and go further: to find a way to implement multiple InstantSearch instances in order to have live filtering directly into the search header results (a feature that isn’t shipped in Autocomplete). Such a feat was done, and even if it cost us a tiny bit of time to find the correct tune to make it work, we significantly saved some other by basically having almost everything ready on the get-go.

Well if pink isn’t your colour, go ahead and try it yourself!

Last but not least, every fashion mogul has asked themselves ‘Oh I’m dying for this look but I’ll never find every item!’  – and Maison Kitsuné heard them. Using Algolia’s InstantSearch technology, products can be linked to one another to form a complete look made up of 4 products. Said look will then be prompted on every relevant product page. Close to but not entirely related, the product selection from the homepage comes from the same idea.

Do you or do you not feel bonita? I feel bonita.

But wait, there’s more! With the rising popularity of cross-selling, both the cart page and minicart panel have their own cross-sell section. With the help of custom configurations, Maison Kitsuné’s team can pick specific products from Algolia, with pricing rules, to be displayed in said regions. Even more interesting, even if the products don’t look exactly the same, it is still being generated from the same hit template, drafting another welcomed shortcut for the developers.

Truth be said, we always need a tote bag.

But wait, there’s… nothing more on this subject. The point is this: InstantSearch + Hyvä compatibility module makes dreams come true. It’s intuitive, easy to use, and the reusability is through the roof. Yes – there is a learning curve to be passed but afterwards it’s just for funsies.

To cross or to up, sell me more 

InstantSearch is full of wonders, but it doesn’t mean Recommend cannot shine on its own either. This feature straight from Algolia’s AI creates dynamic links between products and end-user profiles, thus feeding a tailored-fit product selection. Two very distinct models (out of the three available) are currently used: Related product (hereby named ‘Similar products’) and Frequently bought together (enticingly renamed ‘You might also like’). 

The first one invites users to have a glance at products close to the one currently viewed; for instance a tee-shirt product page will generate similar tee-shirts in fit and styles. The second one is closer to a dynamic cross-sell: using navigation data from end-users’ behaviour, it pushes products that other buyers had when they converted their cart. It is then more likely to catch the eye of the wanderer.

Top-notch suggestions to improve your style – and your cart total

Recommend wasn’t the easiest to translate to a Hyvä context given its very JavaScript-y nature. Also featuring a brand new and contemporary template engine, it does need a getting used to that do pay off afterwards by its recycling properties. Because of the client’s context, there was no need for us to use the native Recommend cross-sell, that could have easily replace the cart and minicart one’s, detailed above.

It does seem odd to not go on about enthralling conflicts or issues, but there wasn’t truly any more development to do. Algolia is a plug-and-play solution, onced linked to our Magento, and a few ‘undefined is not a function’ later, products came around like a carousel!

And they worked together happily ever after

Web development sometimes feels like magic, from the technical results we get, to the excitement of a dear client who had their needs met, along with the joy around building crazy things for a living. It is, though, no fairytale mystery that led to such state-of-the-art partners and technical solutions around us. Hyvä had a dream and its dark wizards put Magento’s frontend theming on its head. Algolia craved an all-seeing crystal ball full of recommendation and lightspeed index.

What was left for us to do was combining those two forces together, blending them as seamlessly as possible and thus providing a new e-commerce experience for Maison Kitsuné and its clients. Nonetheless, sharing is caring in this great community that is Hyvä, and that is why we are now working on providing our compatibility modules as standalones. It does take a speck of time untangling the custom needs from our black magic, but stay tuned and soon enjoy the best of those both worlds!

Thus they were, fantastic and four.

Well, if you don’t take our word for it, take a look at Vinai’s feedback on this integration:

It is truly wonderful to see differentiating shopping experiences such as Maison Kitsuné realised with Hyvä Themes.

Blackbird did an outstanding job bringing their customer’s ideas and edgy brand identity to life: congratulations to their team!

Integrating third-party services like Algolia naively is easy, but doing it without compromising performance and customer experience requires a deep understanding of the utilized technologies and solving complex problems.

We believe Hyvä’s simplicity is the ideal base for building the sophisticated customer experiences required by innovative and high profile brands like Maison Kitsuné.”

– Vinai Kopp, Technical Director and Partner at Hyvä