Headless Shopify for a sustainable Norwegian footwear brand

The challenge

Kastel came to us wanting to make their Shopify store headless.

The main reasons for wanting to switch were to increase performance and to make their storefront stand out from the basic Shopify theme look

In addition to having all all the standard ecommerce functionality that you expect, Kastel also has an initiative called Nature Lab.

In Nature Lab, Kastel comes up with ideas, produces pilot products and finds innovations that help them make shoes in a sustainable way.

The goal for this part of the website was to make it look and feel different from the rest of the website.

Here you have the regular product page.

The main focus was to show the product, showcase the product USP's and make it easy for the user to buy.

Nature Lab pilot products

So whilst wanting to keep the same look and feel as the rest of the website, we wanted to make the Nature Lab section stand out.

Much of the same information, but different branding.

With a pilot product, you're also able to pre-order the product in the beginning stages and there is a set limit on how many shoes can be purchased.

We show all of this above the fold to make sure the user understands this.

The need for speed

One of the biggest benefits of going headless is the increase in conversions that come from all your pages loading faster.

Performance on mobile is most important since more and more people shop from their phone – And because it's the easiest to mess up.

Google PageSpeed Insights gives you some good indicators of how your site will perform. But is is a simulated test.

You need to see how real-world users are experiencing your site to find out the truth.

We use Vercel Speed Insights to monitor the actual performance.

Beautiful.

Editor experience

Luisa, Kastel's ecommerce manager day-to-day job involves a lot of editing.

Updating product info, updating collections and moving things around.

We wanted to make her job as easy as possible.

One way we did this was by introducing the concept of "Models"

Here you can see a screenshot from inside of Sanity, our CMS.

In this "page", or document as it's called you can set information that is shared across multiple products. In this case all colorways of the Madla Winter shoe type.

Size charts, tags, titles, cross sell products, faqs. Anything you can think of.

Then, when editing a specific colorway, in this instance the Madla Winter WR Deep Black you can see the tags that were set on the model.

These tags will automatically be set on this colorway without her having to do anything.

She only needed to add the Black tag for this color and the rest of the tags came from the model.

Unique interactions and mobile-first

We wanted the mobile experience to feel like a native app and to have some fun interactions that set them apart from the standard Shopify theme storefront.

The first video shows you how we grouped cookie settings, support chat and the loyalty club into one bottom menu instead of cluttering the screen with widgets

The second video shows you the filtering, sorting and settings that we added to collections. The menu slides up from the bottom to be closer to the user's thumb.

The last video shows you the gendered gallery that we implemented on product pages. You can if you want to see mood images of males or females

Dealing with multiple markets

One of the struggles of using Shopify in Norway is that Shopify Markets is not available.

This forces merchants to have to set up a Shopify store for each market they want to serve.

This leads to a lot of back-and-forth between different Shopify stores to manage content, products and collections.

We wanted to make it easier for Luisa to manage all of this.

We did this by making Sanity the source of truth for products. You make a product in Sanity and then you can sync it into however many Shopify stores you need.

(Coming soon). We're making an article explaining how we solved this problem.

You've come this fast. How about you...