Sanity x Shopify

Introduction

Having set the bar for helping merchants create beautiful, seamless buying experiences for over 15 years, global leader Shopify were turning their attention to the future of e–commerce: content.

As the premium content editing platform on the market, Sanity were the natural choice for Shopify to create remarkable shopping experiences powered by authentic stories.

Their collaboration was announced in 2022, with Sanity receiving investment to become Shopify’s official, and only, CMS partner on the Hydrogen app store upon release.

See the demo here

Companion came on board to bring this integration to life, in the form of a demo site that would show merchants what would now be possible on their custom Shopify storefronts using Sanity’s storytelling functionality. As an example of the potential combined power of the two platforms, the site needed to speak to two audiences; the people choosing this kind of software, and the people using it. We wanted to spotlight the integration in such a way that would inspire e–commerce business owners, and at the same time show to a developer audience that they could easily customise the demo to serve their own needs.

Challenge

Often such demo projects are entirely fictional, based on things like fake snowboarding stores, making them difficult to market, and easy to dismiss. Sanity wanted to go a step further and create a store that looked and felt real. We worked with them to build a site based on real life homeware products created by designer Ewa Lefmann to create a compelling use case. Approaching it this way really brought the collaboration alive, gave us a great photography library to work with and enabled us to support a talented independent designer too.

Our primary focus was to show off how Shopify’s world class commerce functionality could combine with Sanity’s editorial control to create a more highly customisable, tailor made storefront and workflow. The demo site needed to profile the types of features only possible when you bring the two together, empowering designers and developers to get creative with editorial commerce.

Approach

We used Ewa’s vibrant homeware as a basis to inspire a compelling demo based on a fictional brand called ‘AKVA’. Playing with tongue in cheek phrases and a bold colour palette, we purposefully led with an opinionated design to show that the best demo sites kindle the user’s creativity, rather than trying to be as unimposing as possible. We wanted an inspiring and colourful slate for people to start with, not a blank one. Leveraging this basis for the visual direction of the site ensured the demo was distinctive to the non–technical eyes that would be sizing up the app.

For developers, we needed them to see that the project is friendly to pick up and hack away at as required. This meant iterating on the integration to make it as streamlined as powerful as possible, which would free us up to spotlight the functionality.

Features

Features such as the shoppable hotspot images – something many tools cannot do out of the box – showcased the extraordinary functional power of the app and the opportunity for enhanced e–commerce experiences. The ability to synchronise your Shopify product and collection data with Sanity is a novel feature too, allowing users to easily reference products and collections in things like links within text, hot spots and shoppable banners. Seeking to tie together content and commerce as closely as possible, we used pop up tips and links to commerce opportunities whenever there was a mention of a product or the brand values within the editorial content.

This is a largely unexplored space and one that few brands are getting right because they are restricted either from their commerce platform in how they can make editorial, or they’ve got an editorially focused platform that lacks commerce features. It can be expensive to customise either of those to make one great place to do both, so Sanity and Shopify provide an easy, affordable way to do it with this integration.
With this and many other features built out within the app, we focused on showing off its full functionality to e–commerce owners, developers and designers alike. The design of the demo site largely came about by using these features as much as possible, in a way that felt intuitive and striking.

Outcome

The AKVA demo shows that you really can take the two tools anywhere to generate editorially powered commerce. Merchants can design and build custom components tailor–made to their storefront and workflow, giving them more customisation and editorial control than ever before. Shopify products are synchronised with Sanity collection data to generate easy product and collection referencing. The collaboration between two of the most innovative companies in the digital space has been reinforced to the merit of the e–commerce sector; now a shining example of what happens when shopping and storytelling come together.

The AKVA demo source code and custom studio is publicly available on GitHub for any developer or company to use as a base to start their journey with Shopify & Sanity.