Booking Projects Now for December

Headless Shopify, when separating your front end from your back end, actually makes sense.

Luke Green
Written by
Luke Green
May 19, 2020

Learn more about why & how we chose this route for Cadline.

Read Post
Headless Shopify shouldn’t blow your mind, it’s actually a very simple and powerful concept for the right project.
Headless Shopify shouldn’t blow your mind, it’s actually a very simple and powerful concept for the right project.

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6

The rich text element allows you to create and format headings, this is bold text paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
  • This is a list item
  • This is a list item that spans over multiple lines because somebody wrote a lot of content into a list
  • This is a list item
  1. This is a list item
  2. This is a list item that spans over multiple lines because somebody wrote a lot of content into a list
  3. this is a list item

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a caption

and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create conte

This is a caption

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What the heck is ‘headless’ Shopify?

Headless is the term used when the front end of a website is effectively separated from the platform that contains its content. Within the context of Shopify that means all product data could be within your normal Shopify admin area, but the storefront effectively runs outside of Shopify’s servers and theme admin area.

What are the advantages?

Whilst Shopify provides a world-class theming system and super-fast hosting via its content distribution network (CDN), it’s effectively a black box for developers wanting to tweak the innards of how the store is deployed.

By taking the headless approach, developers can regain control over the finer details of the technology behind how a store front loads into the browser. It opens up the flexibility and possibilities of leveraging forward-thinking platforms such as front-end frameworks like VueStorefront or a CMS like Contentful or Prismic.

For teams with the right technical skills, this can be very advantageous, allowing significant and very specific adjustments that are just not possible via a Standard Shopify set up.

For example, you could create a highly optimised Progressive Web Application, that only returns to Shopify servers at checkout and pushes the marketing and content management to a different service entirely. In practicality, this would allow a team to easily assign roles of responsibility internally to each portion of the site and provide tools that are highly specialised for their purpose.

What are the disadvantages?

Whilst headless Shopify is becoming more mainstream, it must be evaluated carefully on a case by case basis. Anytime you start to move to more customised solutions, you need to consider what you might lose in standard Shopify functionality, how comfortable you are with a potential agency or team lock-in and of course, the additional complexity around ongoing maintenance.

However regardless of the platforms you choose, the team you choose both internally and as suppliers is arguably, most critical. It’s vitally important to make sure to have a capable and specialised team with good client-side project management in place and a broad spectrum of experience. In doing so you will almost certainly remove many of the negatives mentioned above.

How we’ve delivered headless Shopify for Cadline.

We first began working with Cadline in March 2015 to deliver their initial store on Shopify. It was a resounding success, providing much-needed simplicity to their Autodesk reseller operations.

Cadline then returned to work with us to bring their full UK online operations into focus.

Headless allowed us to provide a globally consistent cart experience across five sites.

After a detailed consultative approach we selected Shopify to power products and purchases partnered with Wordpress for the content management, to create an easy to manage headless implementation.

Specifically for Cadline, it allowed our team to create a contextually relevant site for each of their five business units. Allowing us to use separate subdomains for SEO performance whilst also deploying global search and add to cart functionality from anywhere within the Cadline network to create a simple easy to understand experience for anyone visiting.

Secondly, because it clearly splits the business into units, it provides Cadline operations with all the advantages of Shopify’s commerce management alongside Wordpress’s suitability and familiarity for content management.

Fully responsive headless delivery for Cadline using the Shopify Buy SDK, Wordpress, Prerender and GraphQL

Lessons & takeaways.

Some of the biggest challenges revolved around changes externally to the project, such as updates to the Shopify Buy SDK during development.

Managing a sane version control process with a production site and a live site for each of the five business units was also a challenge but ultimately largely improved our versioning process for both Headless and standard Shopify builds.

We also found it was also vitally important to write clear and easy to reference handover documentation, which included simple screen share handoffs for basic functionality on how to use the system. Depending on your client's capabilities it’s important to pitch this just right and can be the difference between a project that’s adopted or rejected within the wider team.

Despite the inevitable challenges, the end result was a net gain for Cadline, and for us as a team, allowing them to sensibly manage internal ops easily and when the time came, to expand to Holland at a significant cost-benefit.

Thanks for Reading, we’re Inspira Digital.

11 years ago we created the 123rd ever store on the Shopify platform, today we are one of the most experienced Shopify Experts in the world, delivering industry-leading Shopify services for fast-growing ambitious brands. We have helped build 100s of successful stores and have delivered 1000s of individual projects for Shopify and Shopify Plus clients globally.

Clients that work with us know we work passionately, to make sense of your commerce business, so if you want to talk to a team of experts about how best to take advantage of the Shopify platform, then let's talk.

Inspira Digital — High volume commerce handled beautifully.

Get in touch

Let chat today about achieving your goals on Shopify.

Get in Touch