Fast, flawless & headless: Migrating Yummygums from WooCommerce to Shopify

Yummygums who?

But first, a little introduction. Yummygums provides you with your daily dose of vitamins in the form of delicious gummies. The Dutch brand launched in 2017 with one multivitamin and by now they offer 16 different vitamin gummies, from energy to sleep, from mothers to kids.

Proof of concept

Their original website for the Dutch market was built on WooCommerce. It was hard and expensive to maintain, not to mention the terrible loading speed. The plans to move to the UK were the perfect opportunity for them to create a proof of concept, so they came to us with the request to start building. The main requirements were speed and scalability. In order to achieve that, we decided to partner up with Instant Commerce and Storyblok to create a headless website connected to a Shopify back-end.

Why this tech stack?

Headless storefronts are websites that are created using a separate front-end that is connected to a content management system (CMS) and a back-end to supply the input for the website. In this case, the back-end consists of Shopify and Storyblok, the back-end is built with Instant Commerce.

The back-end

Let’s start off with the back-end. In Shopify we have all the product info, discounts, customer info etc, in Storyblok we have all the content. One of the main reasons Shopify is considered to be better than WooCommerce, is their ecosystem. Why?

A first main difference is hosting. With WooCommerce's self-hosted infrastructure, merchants are responsible for security, performance and maintenance. Shopify has managed hosting, what exempts merchants from all these issues.

A second gap is plugins vs apps. While the overload of plugins WooCommerce essentially shares the same goal as Shopify apps (upgrading and customising), the narrative is completely different. WooCommerce plugins are often conflicted, need continuous manual updating, slow down performance, and introduce security risks.Shopify, on the other hand, thoroughly checks app compatibility to ensure they don’t disrupt your store. Additionally, they simplify app management with a centralised app platform.

The front-end

Over to the front-end, which is made with Instant. Instant Commerce is a visual, no-code Shopify page builder. This headless SaaS solution allows you to easily create a headless frontend and connect it to your back-end. The advantage of working with Instant Commerce is that they take care of your hosting and the connections to Shopify and Storyblok.

A headless storefront not only allows you to create an attractive website but also ensures it runs quickly. Instant Commerce works with statically generated pages. As opposed to normal websites that load dynamically, Instant will pre-build pages that contain 90 to 95% of the same components. Only 5 to 10% will be dynamic content. This makes the website insanely performant.

If you want to see it for yourselves, have a look at the comparison we made between the new and old website.

The result

The result is a beautiful and high-performance website. We often use it as a reference to showcase how high brands can set the bar. Their conversion rate jumped up, due to the extra work on the card and checkout page optimisation we did. With their current tech stack, Yummygums is ready to scale even more.

To summarise:

• - Passed status on Core Web Vitals for optimal SEO

• - Scalable infrastructure, no hosting costs nor headaches about CDNs, traffic spikes, etc

• - No outdated plugins that can bring the whole setup down

• - Easy-to-use customiser to add new products, blogposts, pages, etc

• - High conversion and fast checkout with customisable one-page-checkout

Sounds good?