Going Headless with Shopify - The road to our Headless Shopify Starter "Fill"

Going Headless with Shopify - The road to our Headless Shopify Starter "Fill"

After being a proud Shopify partner for more than 2 years we worked for numerous digital native startups and established companies aiming to conquer the digital space. We've gained extensive knowledge of the Shopify platform and learned about the power that the Shopify platform offers. We are confident to say that Shopify is the best SaaS e-commerce solution around, but even the best platform has its drawbacks.

The problem

Similar to a lot of agencies that develop custom themes for Shopify, we started out by developing themes based on the Timber framework. 2 years ago Shopify stopped supporting this framework and replaced it with Slate, a Shopify toolkit for developing Shopify themes. Slate was a lot more advanced than Timber and had a  more modern approach to the Shopify theme development. Unfortunately, Shopify announced recently that they won't be maintaining the Slate project for the coming 6 months.

At Ask Phill, we have been brainstorming about starting our own Shopify starting theme/setup for the last year. The end of Slate made our choice definite, and we decided to build our own Ask Phill starting theme.

The next questions which arose; how do we do that? What would be the purpose of our starting theme? What problems do we want to tackle, which we encountered in the process of making Shopify themes historically with Slate and Timber? We first needed to answer these questions before we could even start with developing our own Shopify starter setup.

So, first things first. The motivation of starting our Shopify starter theme for Shopify was to:

  • Guarantee our clients can give the best online experience to their customers (short loading times, flexibility and PWA possibilities)
  • Set our own innovative development standards and efficient development workflows
  • There are no supported alternatives online which are up to Ask Phill standards
  • We wanted more flexibility while developing Shopify themes

 

headless shopify plus ecommerce 

The research

Before we started the development of this starter theme we made sure that the most important stakeholder in this process would be our customer. Clients first, developers second, we need to make sure that our future client was always in mind during the development process and we didn’t make it a too technical developers party.The next step was to create a list of pros and cons of the Shopify platform.

What are the features of Shopify our client's love?

  • A user-friendly backend that doesn't need to be updated and hosted by the client
  • Proper analytics and easy marketing pixel integrations
  • Multichannel sales through Instagram with one click
  • Easy to adjust themes on the front end with the use of the customizer

What is the biggest downfall of Shopify for our customers

  • Shopify doesn't support native multilingual support without using multiple storefronts (and backends)
  • Shopify doesn’t support native multi-currency
  • The overall speed of the Shopify websites

Most of the clients that switch to Shopify are really happy with the overall experience and possibilities the Shopify platform gives them. The limited possibilities for good multilingual support are, without doubt, the biggest downfall of Shopify users which are expanding in Europe.

Yes, you can translate your website with plugins like Langify but that’s more a hack that negatively affects site speed and SEO. The solution we used to advise is to set up a Shopify store for every language/currency combination. This approach offers more flexibility, but on the other side request more effort from the client. Using this setup clients need to maintain multiple Shopify backends and this results in a subdomain structure with URLs like nl.nameofclient.com and de.nameofclient.com instead of nameofclient.com/nl and nameofclient.com/de.

We decided that we needed a starter setup to tackle this problem and come up with a better and more customer friendly alternative. 

Headless Shopify at Ask Phill Office

The trend is your friend 

If take a broader look at the current online environment and trends in the web development and e-commerce space we see three major trends: digital flagship stores, progressive web apps (PWA's) and headless commerce.

Digital Flagship stores

If we compare online stores to offline stores we see that most brands invest a large amount of money in making beautiful offline customer experiences. Stores feel luxurious and provide a real brand experience. Interiors are changed every week to keep the store feeling fresh and relevant. With the increase in online spending, a growing number of brands understand that it's becoming more important to invest in an outstanding digital brand experience online. This is why we've seen a tremendous growth in the creation of Digital Flagships Stores; an online store that feels like a unique online experience and is tailor-made for the brand. In order to create a digital flagship store, our developers and the development processes are pushed to their boundaries because most of the unique digital experiences rely heavily on high-quality media content: images, videos (a growing trend) and animations. 

PWA’s

A progressive web app (commonly referred to as PWA) is a web application that allows for faster and more native-like browser experiences that feel like an app. Mobile traffic is still growing and becoming more and more important. Because of the rise in mobile traffic and a shorter attention span of the consumer, speed of a website is becoming more essential. We see that the speed of websites nowadays influences conversion, SEO ranking, and customer experience. Talking about PWA's is quite a technical topic but the most important features to remember are increased speed and extended functionality on mobile devices.

Major features of using a PWA are:

  • Extremely fast web performance
  • Sending push notifications to users
  • Offline mode
  • Add PWA's like an app on mobile phone

Headless commerce

Over the last  2 years, we've see a huge increase in the popularity of headless e-commerce for digital native brands that are heavily content focused. Currently, top brands like Ace & Tate, Glossier, Harry’s, Ritual and Hims use this development approach. But what does it mean, headless commerce?

Headless commerce means that the front-end of the website is de-coupled from the backend. By separating the front-end (the part that the customer sees) form the back-end companies have more flexibilities to customize their online experience without needing to rely on the restrictions of the platform that is used for the commerce. This trend is made possible by the enormous popularity of frameworks like React, Angular and Vue. And a lot of wel documented open source PWA frameworks like Gatsby, Vuepress, etc. But also because most of the big commerce platforms like Shopify, Magneto, Big commerce and Moltin acknowledge the trend and made there platform "open" with the use of extensive API’s. As a result, most of the functionalities of the platform can be used in a ‘de-coupled’ way. 

 

Going Headless!

After investigating the challenges our customers face and the trends within the e-commerce environment we've concluded that decoupling the front-end from Shopify will help us fix most of the current challenges our clients encounter when selling multi-market with Shopify. This is why we are going Headless with Shopify for larger clients which have the ambition to sell multi-market, multi-language and multi-currency! 

To summarize, we like Shopify headless because of the:

  • Multilingual possibilities with 1 store backend!  We only separate stores for different currencies. Multi-currency is in Beta by Shopify with Shopify Payments but still needs work.
  • Possibility to make the website a PWA,  something that won’t be possible if we use Shopify for the front-end. Since we can make the website a PWA we have additional advantages
    • More flexibility in optimising the speed of the website
    • Making the website offline available
    • Send push notifications to clients
  • Easily extendible with more functionalities (for example recurring payments)
  • Using an alternative CMS that is designed for content management. This enables us to use a higher resolution, next-generation images and video’s

But as indicated at the start, all the winners have their weaknesses. When choosing this setup you need to keep in mind certain restrictions, and this is the tradeoff you will need to make.

  • Loss of Shopify theme customizer -  by decoupling the front-end from the Shopify backend, merchants won’t be able to customise the theme with the Shopify theme editor.  We made sure customers can still edit content but this will be done in the headless CMS (we work with Contentful or Prismic). 
  • Loss of some of the Shopify front-end apps functionalities - by decoupling the front-end from the Shopify backend the installation of Apps that influence the front end won’t be as simple and would require API capabilities to work. Popular apps like Yotpo still work properly with our headless approach since they provide API integrations.
  • Maintaining two different systems – a headless approach means having the possibility to add another CMS. Nevertheless, it would require to use two different systems instead of one.

 

The Fill Starter

Our headless Shopify starter theme is called "Fill"  and is currently in ALPHA. We are currently working on more than 5 headless projects and have already successfully launched 2 (Stox Energy Sock and Carine Roitfeld).

The goal and ambition of Ask Phill with this starter theme project are to open source the project so everyone can use our starter to built headless Shopify experiences.

Some core functionality of our starter:

  • Full multilingual possibilities with 1 Shopify (Plus) backend. We translate all content and product information in a separate CMS that even translates the checkout (only front-end part that stays on Shopify) and shows payments options based on IP. Clients can now use the multilingual URL extension like nameofclient.com/nl or nameofclient.com/de and only need 1 Shopify backend for all languages.
  • PWA Functionality - Out of the box PWA,  that means: extremely fast, offline mode and better SEO ranking.
  • Higher content quality - make use of next-gen images (WEBP) and video’s to create a better customer experience and not stuck to the max 20mp content size Shopify supports.
  • Easily scaleable - since we use new web standards like Gatsby, React and API driven CMS we can extend functionalities that are not part of Shopify.

 

To conclude

Are you a brand, or working for a brand that is planning to launch their digital flagship store in multiple countries with multiple currencies and is Shopify your preferred platform? Go headless.

 

*This was the first part of our 2 part story about our "Fill" Starter. The next article will go more into depth about the frameworks used and workflow for customers.

Any questions? Just send a message to phill@askphill.com.


Need help?

Get in touch to discuss your e-commerce ambitions and we’ll help you get there.