How To Build A Shopify Headless eCommerce Storefront

What is headless eCommerce?

Most of eCommerce websites are built on platforms that power the back-end and front-end at the same time. This is a simple solution that allows a cost effective and time saving maintenance of the website and any changes can be easily done.

However, more and more eCommerce platforms require a high level of performance and choose the headless approach. Going headless means to decouple platform’s front-end from the back-end. That means the user experience, content and design are controlled by the front-end. A headless approach gives freedom not only for the design team but also the marketing team, which is no longer limited by the platform’s capabilities.

Among the most popular solutions for headless eCommerce is Shopify, on which you can read more in our article Shopify Pros and Cons.

By default, Shopify handles both the frontend and backend of the site. It is a great solution for merchants who require basic functionalities for their stores.

Since headless commerce decouples the frontend (or the “head”) of the store from the backend functionality (e.g. inventory allocation, content management, fulfillment capabilities) Shopify can be combined with different content management system (CMS) to serve the content of the store.

If you are curious about which online shopping websites use headless Shopify, head to our article Headless Shopify — 25 Amazing Examples.

Benefits of headless eCommerce

Headless eCommerce has a lot of advantages that help your website behind the scenes. Here are some of them:

Increased flexibility and development speed

• By decoupling the frontend and the backend, headless eCommerce allows making whatever modifications you want, without the fear that your website will slow down.
• Since the frontend and the backend of the headless eCommerce site are independent of each other, development team can apply new functionalities and integrations faster. Development speed is increasing because many changes of the user interface do not have to be done on the backend.
• Flexibility of development allows amazing UX / UI which have a positive influence on the conversion rate.

Better SEO performance

• SEO is the process of improving your rank in search engines to help potential customers find your marketplace. With headless Shopify you have full control over your SEO tactics. A high position in search engine has a major impact on the number of visitors.
• One of the most important things is your site speed. Google has indicated it as one of the factors used by their algorithm to rank pages. With a headless solution you can fix performance issues that cannot be solved while using standard Shopify storefront.

Progressive Web Application Capabilities

• By 2021, analysts estimate 53.9% of all eCommerce sales will happen on mobile devices. (source)
• PWA is set for mobile web application development techniques that allows building apps looking like native ones.
• PWA has numerous key features that make them different from traditional web applications. For example, it allows using the application in an offline mode and sending push notifications to customers’ mobile devices. It also creates app-like icon on the mobile device, which facilitates access to the store.
• With the default Shopify storefront building Progressive Web Application is difficult and requires third party extensions.

Internationalization

• If you want to expand your store to multiple countries with different pricing, you will need to create multiple Shopify accounts and use separate subdomain for each country(e.g. au.storename.com and uk.storename.com). This means that you will have to pay separately for each account.
• You can use a plugin that also will increase the monthly cost of your store.
• URL structure does not affect UX or SEO (according to this video from Google), but if you prefer keeping internationalised sites in subfolders (e.g. storename.com/au and storename.com/uk) rather than subdomains, you can do this with headless Shopify.

Before we dive deeper, it is crucial to explain what is Storefront API. Storefront API provides access to customers, checkouts, product info, and other store resources that you can use to build your headless Shopify solution.

What should you consider before going headless?

• Theme and rich text editor — Theme customization that was possible while using Shopify storefront will not be available anymore. The same applies to the rich text editor, which allows you to format and style text that appears on your online store. However, it is possible to achieve similar functionality using custom content management system.
• Shopify App Store — Shopify applications and plugins that allows you to quickly add new functionalities to the front-end of your store will no longer be working. Some of them will require additional integrations, but the rest will be incompatible with your shop. However, you can still use applications that operate on the backend.
• Customer accounts — while using headless Shopify solution, customer accounts will not be available anymore. However, with Shopify Admin API you can a create custom solution.

How to build a Shopify headless store?

1. Choose technology for your storefront
2. Generate an access token
3. Build your custom storefront

• In choosing a technology for your UI, there are many aspects to consider. At least you must take into account: skillset of your development team and the ability of this specific technology to meet the technical and design requirements of your project.
• Shopify team built example custom storefront applications that use Shopify Storefront API. Most examples were created using React.js and Ember, so you should consider one of those technologies.
• You should also consider using static site generator framework like GatsbyJS or Next.js. Server side rendering (SSR) can improve your SEO and lower TTI (Time to Interactive).
• Another thing to take into consideration is using headless CMS like Prismic or Contentful to shorten development time and improve performance.

2. Get familiar with Shopify Storefront API

• Storefront API is available with GraphQL. If you are not familiar with GraphQL, it is good to start with GraphQL guide created by Shopify team. After reading it you can head to the “Getting started” page of the Storefront API and view the examples, which will help you to understand how it works.

3. Generate an access token

a. From your Shopify admin, select Apps section.

b. Click on Manage private apps.

c. Click on the button Create a new private app.

d. Type app name and email.

e. In the Storefront API section, select Allow this app to access your storefront data using the Storefront API.

f. Select which types of data you want to expose to your app.

g. Click Save.

After you save the app, you can find the generated storefront access token in the Storefront API section, at the bottom of the page.

4. Build your custom storefront

• It is good to start by familiarizing yourself with one of the Shopify’s custom storefront example applications. If you have chosen React.js as the technology for your project, you can check react-js-buy repository.
• Next step is starting building your custom storefront. To make React.js application work with Shopify Storefront API, you should follow these steps:
• Install Javascript Buy SDK module using NPM: npm install --save shopify-buy or if you prefer Yarn: yarn add shopify-buy
• Import Client from Javascript Buy SDK in your index.jsfile: import Client from 'shopify-buy'; and provide following client object to your application:

const client = Client.buildClient({ storefrontAccessToken: 'your-access-token', domain: 'your-store-name.myshopify.com' });

• With initialized Client you can start making requests to the Storefront API. Check out Javascript Buy SDK docs and the oficial API documentation on Shopify's website to see what data is available.

Summary

Headless eCommerce means separating your front-end from the back-end and create them using different technologies best suited for your needs.

Building a Shopify headless eCommerce Storefront allows your visitors to browse, search and select products without the need to go to your Shopify store. Apart from that it allows you to have your own codebase and use tour own templates.

If you want to build your own Shopify headless eCommerce Storefront, reach out to our team of expert developers that will handle the project from start to finish!

Originally published at https://selleo.com.