Structured content patterns for e-commerce

Doing commerce online involves handling a lot of product information and marketing and informational content. Products need correct and up-to-date information. Your customer journey involves a lot of content to get people interested in the products. Product listings need to be connected to marketing content, return policies, customer service, and more. To provide a user-friendly and reliable customer experience, you need to surface the product information in many different contexts and make sure it’s consistent and up to date. In other words: Content in commerce wants to be connected. And you want to have this content as a single source of truth.

Maybe you have tried out our Sanity Connect for Shopify app and our commerce studio. Or maybe you’re planning to level up your online store and build a more customized experience. Either way, this guide will unpack some common content model patterns that have proven useful. If you want to have a practical example to go along with this guide, you can set up a demo store with Shopify and Sanity here.

Before we dive into the specifics, we want to point out that we’re talking about content modeling here. Content modeling is something you do either you know it or not, and it has ramifications for how easy (or hard) it is to maintain and evolve your project. It ties in with design and how components can be realized, it defines what editors can and can’t do, and it has implications for the data model you’ll be building against through the APIs.

Ideally, you should treat content modeling as its own phase in your project, and depending on your setup, you should have a process and make sure you involve the right people in it. Maybe you’re lucky enough to have a content strategist on the team that can facilitate building out a content model. Or maybe you’re on your own. The sure thing is: It’s infinitely better to have thought about it upfront and revisit it throughout your project as opposed to making it ad hoc. If you want to learn more about content modeling, you can visit our introduction series.

The content model for your products is often determined by the Product Information Management (PIM) software. Typically you’ll find properties like title and description. Maybe you also have fields for vendors, to make it part of collections, tags, and so on. A lot of online commerce software will give you a practical set of fields that will get you started and that cover common use cases.

However, it’s not uncommon that you’ll find that you have needs that go beyond what these systems give you. Maybe you want to add more rich media, such as videos, images with captions, augmented reality (AR) models, or block content instead of simple rich text for the description.

It’s easy to forget that the product listing on a website isn’t the only place product information will appear. People also need to find your product, and a lot of them do that through search. Adding “thicker” content is a way to increase findability and to tell a more elaborate story around your products.

In our reference studio for Shopify, you’ll find that the product type has fields for image gallery, as well as fields for sections, and a block content field for detailed and rich product descriptions. You’ll also find dedicated fields for SEO that lets you optimize for search engine result page (SERP) listings or if you want to be able to experiment with product content while keeping the search listings stable.

A lot of products come in variants, it can be of different sizes, colors, materials, you name it. Not only can variants have their own story to tell, but you often need to keep track of them and their availability. While variants tend to be out-of-the-box functionality in PIMs and online commerce software, you will also need to represent them in your content platform.

You can model product variants in different ways with Sanity Content Lake. The simplest way to do it is to add variants as an array of objects inside a product document. The data model will then be pretty simple and as long as your product doesn’t come with a lot of variants, it will be easy to manage for editors as well. Although perfectly doable, it can be a bit harder to find variant SKUs and keep them up to date this way

If you start having a lot of variants or want to make it easier to query and keep them up to date, then modeling them as their own documents with references to the default product variant is the way to go. This scales very well and makes it tenable to have practically as many variants as you want. References in the Sanity Content Lake are indexed bi-directionally and will keep referential integrity per default. That means you can add an array of references to variants to the product type, and get a warning if you try to delete a variant that exists as a reference inside a product. Not only will references make it easier for you to query and build with this content, they will also make it harder for editors to accidentally delete content that other content depends on.

Often you want to bundle products together to run marketing campaigns, have special offers, support personalization, and so on. In our reference studio for Shopify, you’ll find a collection document type with a fairly simple model. It contains title, slug, image, an array of product references, and SEO fields.

A common way to bring attention to your products and your store is to provide useful content that’s relevant to your business. The best content marketing manages to answer some problems that people are looking for the solution to while putting your product in a good light. If you want your content marketing to convert, you should make sure that the friction to actually checking out your product and putting it in the cart is as low as possible.

With modern frontend technologies, it’s possible to make user-friendly and accessible affordances that let people quickly add something to a cart while they take in your content.

Of course, you can get by adding simple links in a rich text editor, but this comes with a lot of pitfalls. It’s not a great editor experience either, meaning your content creators need to spend time finding the correct links, and if the link were to change, they would need to replace them all.

Rich text typically lets you format text, add simple lists, and sometimes embed images.

Block content provides a richer set of options that let you insert content structures both between paragraphs of text, but also as annotations and inline. At Sanity, we authored an open specification for block content called Portable Text.

It may seem like this is a lot to consider and plan for. It is. But the investment upfront pays dividends for a long time into the future, increasing the return on investment (ROI) for years to come. It may seem that all this structure keeps you locked into something but the opposite is true. By following logical patterns in your product structure, you create the freedom to constantly change how you present your products and connect them to content throughout your ecosystem as well as to any other system that wants to help you sell your products.

The structure breaks information into manageable parts, thus increasing content velocity. Product content managers can update or make new products or variants available faster through predictable and consistent patterns as well as a repeatable process for updating or adding items to your inventory.  With the right metadata, the new or updated products can connect to designated related content immediately and algorithmically, no human intervention is necessary unless desired.

New signals coming from signals from customers or the market? Need to pivot quickly to meet demand? No problem with the appropriate structure and connections! Because your product content is data, you can make changes only where needed--and only in one place. The changes can be published and immediately available for consumption by any API that is set up.

Structured content is expandable, too. When things are going great and you need to scale up your inventory, add product lines, or introduce new collections, you are ready! Add or remove some fields, adjust the metadata, and populate with an import of data to meet new distribution or publishing needs. That new channel won’t require a new team to make content for it, only some adjustments to existing structure and data. You become limited only by your imagination.

Shopify and Sanity have come together to bring the best practices in e-commerce and structured content to every e-commerce store. You bring your vision for products, we help you bring that vision to your customers. Build beyond your expectations!

Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.