7 pros and cons of headless eCommerce with Shopify

According to Yotta’s 2020 e-commerce report, more than 60% of retailers plan to take their stores headless. Like them, you might be considering taking your Shopify store headless. But before you do this, you need to be fully aware of what you might be gaining and losing.

Going headless with Shopify means detaching your Shopify website’s back-end architecture from its front end, providing more flexibility and control over the website's front end. In this piece, we discuss the most important things to keep in mind as you consider taking your Shopify store headless.

Pros of going headless with Shopify

There are several benefits to taking your Shopify store headless, including:

1. URL customization

Taking your Shopify store headless enables you to customize the site’s URLs as you deem fit. You can capture specific product details in your store's URLs, providing more visibility for different website pages on Google SERPs.

When you go headless, your site's back end is paired with a more flexible content management system that allows you to directly set and modify the slugs of different website product pages with little or no restrictions—and often without writing any code.

Shopify’s native URL structure can be limiting. For example, the admin functionality doesn't allow you to set a parent or child URL collection, which means you can't reflect subdirectories on your site. Shopify changes all subdirectories like /lamps/desk/traditional to a flat URL structure like /lamps-desk-traditional. A flat URL structure can affect the SEO of a website with multiple pages because your keywords and links are scattered across multiple domains. Google will index each domain separately, making it difficult to build up your website's domain authority.

2. Improved website load time

Website load time is one of the core metrics for measuring page experience, and page experience is important for SEO. And apart from SEO, fast website load time also improves website conversions.

According to Unbounce’s 2019 Page Speed Report, “nearly 70% of consumers admit that page speed impacts their willingness to buy from an online retailer.” Oskar Nowik, head of SEO at Bonsai, also says,“A slow website could spell the end of your online store. In e-commerce, quickness equals sales. Once your company grows in size, the excess code will begin to overwhelm your site and slow down download rates. So you go headless, and because your front end will function independently of your back end, it will not slow down your site.”

Switching to headless eCommerce improves your website’s load time because it simplifies your site’s architecture. You can implement changes to your front-end architecture directly, such as integrating new functions, without adding third-party plugins to the back end. Also, your site’s front end pulls data from the back end via an API instead of relying on resources like CSS and JavaScript files. This removes the burden of excess code that can slow down your website and affect its performance.

3. Unlimited omnichannel capabilities

Streamlined content management helps you deliver an omnichannel experience to customers. An omnichannel experience is one that creates a consistent customer experience no matter where or how a client interacts with your brand. Zach Goldstein, CEO and founder of PublicRec, a clothing brand, says, “Our move to headless was really about having the easiest access to play with our content so that our customers have the best experience possible.”

With a headless CMS attached to your Shopify back end, you can publish the same content to any device and channel. A headless content management system organizes your content assets—text and media (audio, images, videos)—in hubs that are reusable and distributed. This makes it easy for you to add, delete, update, modify, and distribute all your content from a central location without writing any code.

4. More design flexibility

When you take your Shopify store headless, you are no longer restricted to Shopify’s themes, apps, and integrations, giving you full control over your site’s layout and user experience. Your software development team can leverage your preferred tech stacks to create a custom front end that's better aligned with your brand. Christian Velitchkov, co-founder of Twiz.io, says, “By going headless with Shopify, you have the freedom to build a complete custom cart. It also allows you to use your website in whatever language you want as long as it could talk to Shopify's storefront API.”

You can also make real-time adjustments to your site's layout that directly affect your site’s front end without writing any code or making core changes to the back end architecture. This also leads to faster time-to-market because your marketing team can create landing and product pages for campaigns directly in the headless CMS content editor.

5. No-hustle localization and translation

If your eCommerce project is hosted on Shopify, you'll need to configure the Liquid Shopify storefront for each market. This leads to multiple complications as you get separate codebases for each country, increasing the amount of work and introducing consistency issues. All of your apps and extensions will need to be replicated for each region. 

Meanwhile, working with a headless CMS, the code is stored in one place, and you can easily manage all locales from one central hub. At the same time, it's much more effective to translate and adapt the content for each market using specialized integrations or the built-in translating capabilities of CMS such as Storyblok. 

Cons of going headless with Shopify

Going headless with Shopify isn’t without its challenges, despite its numerous benefits.

1. You will lose access to some Shopify apps and themes

Going headless means you no longer use Shopify’s theming engine or app proxy, limiting your access to Shopify’s inbuilt themes and apps and the add-ons that rely on Shopify themes.

In this case, your developers have to create custom themes from scratch for your website's front end, which can be a complex and time-consuming process. You also have to rely on third-party apps and integrations that the Shopify storefront API might not recognize, which can affect your site's functions and performance level.

2. Additional complexity due to customization

Going headless with Shopify requires lots of customization—from features and themes to layered navigation—and this can make your site's architecture more complex and difficult to manage. Hanah Alexander, head developer and managing editor at Today Testing, says, “Going headless with Shopify is a great long-term solution—but you have to understand that it can be time-consuming and costly to set up. And this requires a great deal of technical knowledge, both to build and maintain. So unless you have the development chops or plan on keeping someone around who does, I don't recommend it.”

Switching to headless eCommerce is worth it—with the right help

If you decide to make the move to go headless with Shopify, then Storyblok can help you make the process as seamless as possible. Storyblok is the easiest way to go headless with Shopify. You can connect your store to our headless CMS via the e-commerce plugin and start delivering personalized experiences to your customers seamlessly.

See how you can take your Shopify store headless with Storyblok.