Skip to content
Dec 14th - Learn how Tecovas roped in success with Sanity and Shopify 🤠
Sanity
    • Platform

      Sanity Studio

      Flexible editing environment

      APIs

      Connect to anything

      Content Lake

      Real-time database

      Try product demo

      Features

      Real-time collaboration

      Fearlessly work with content

      Precise content querying

      Treat content as data with GROQ

      Localization

      Coherent messaging across territories

    • Use cases

      E-commerce

      Richer shopping experiences

      Marketing sites

      Control your story

      Products & services

      Innovate and automate

      Mobile apps

      Content backend for every OS

      View all

      Integrations

      Shopify
      Mux
      Vercel
      Netlify
      Algolia
      Cloudinary
      BigCommerce
      Commerce Layer
      Smartling
      Transifex
      View all
    • Learn

      Documentation
      Studio API Reference
      API reference
      Guides
      GROQ cheat sheet
      Sanity UI
      Get started

      Build and share

      Templates
      Tools and plugins
      Schemas and snippets
      Project showcase
      Share your work
      Browse Exchange

      Frameworks

      React
      Vue
      Next.js
      Nuxt.js
      Svelte
      Remix
      Gatsby
      Astro
      Angular
      Eleventy
      View all
    • Discover

      Blog
      Resource library
      Glossary
      Agency partners
      Become a partner
      Technical support
      Talk to sales

      Case studies

      Puma

      Source of truth for global markets

      Aether

      Unique digital shopping experience

      Morning Brew

      Omnichannel media distribution

      InVision

      Delivering exceptional customer experiences

      View all

      Popular guides

      Headless CMS
      Structured content
      Content modeling
      Headless SEO
      Static websites
      View all
    • Enterprise
    • Pricing
    • Log in
    • Contact sales
    • Get started
Contact salesGet started
  1. Resources
  2. Composable commerce
  3. 5 Tips for Better Storytelling on Your E-commerce Website

Published May 25th 2023

5 Tips for Better Storytelling on Your E-commerce Website

  • Sarah Beldo

    Head of Content Marketing and Communications at Sanity.io

We talk a lot about creating a remarkable shopping experience, but how do you get actually get started? How should you think about your content, design, and tech in order to tell a standout story?

Sanity co-founder and CTO Simen Svale recently spoke with Eli Gancena and Kerrin Meek from Half Helix and We Make Websites, two agencies that create e-commerce sites for some of the world’s most successful brands. Eli and Kerrin shared best practices and helpful tips.

Check them out below, or watch the full webinar:

Weave storytelling throughout the customer journey

Eli and Kerrin see this mistake all the time: a client is laser-focused on selling their product rather than telling a story. But potential buyers respond better to a narrative than to a sales pitch. Instead of putting the sale first, think about how to communicate who you are and what you offer, weaving visuals and copy into a narrative that can be referenced at every stage of the customer journey.

For example, Eli’s agency Half Helix works with shoe brand Rothy’s. Eli says Rothy’s aims to communicate their commitment to sustainability while showcasing the premium materials that make up their products. But they also want to replicate the in-store shopping experience by translating it into a digital space. To tell stories that drive sales, it’s important for Rothy’s to have the agility and freedom to tell those various stories in the form of pages, components, color wheels, full-page spreads, and so on.

Think components, not pages

If you want to communicate a story in multiple places on your website, you'll build flexibility into content design. Instead of focusing on what you want to put on a specific page, think about your content in terms of components—which can be used and reused in different contexts, across different pages.

For instance, a home page might include a hero, product carousel, technology section, and so on. Instead of treating the page like a hard, fixed template, divide the page up into individual components. This saves time and money. Instead of scrapping a page that isn’t reaching customers, you can experiment with components as necessary: moving the product carousel, adding a CTA, playing with colors, and so on.

Iterate, iterate, iterate

When clients go to Eli and Kerrin with their development goals, they often want everything all at once. They have a vision for the site, and their expectation is that this vision will emerge fully-formed on the internet. While that desire is understandable, it’s not quite realistic. Instead of trying to put everything on the site at once, it’s a lot easier to start by building a bare-bones website and iterating. That way, you don’t have to reinvent the wheel every time you decide to make a change.

Component-driven thinking puts you in a good position to iterate. Once you start playing with components, you can plug these pieces into different places across the site. This is a good way to conserve resources and protect your time. You can reuse components that perform well and test out components as you scale.

Let content drive collaboration

Teams often get in each other’s way as they work to stand up a website. When content has to wait for developers, and when a few representatives from each team act as gatekeepers, the content itself suffers. Content writers lack the agility to respond to changes in the market by spinning up new content or testing components. Collaboration is all about putting out fires rather than optimizing content.

It shouldn’t be that way. Instead, content should drive collaboration. Both Eli and Kerrin say that a structured content approach lends itself best to this dynamic. Structured content provides a common language that design, dev, and content teams can understand. It’s a Rosetta Stone that sets teams up to cohere rather than clash. Content teams don’t have to wait for development resources, so everyone gets to own a piece of the process. With a platform like Sanity Studio, each user has full control over the content, empowering them with the tools they need to test and deploy content on their own terms.

Users want to have a varied, rich experience. When developers are the only ones optimizing the site, they’re not experimenting with content; that’s not their area of expertise. It makes much more sense to have content creators and marketers own more of the performance and customization of the site.

Be strategic, backed by analytics

New website designers often feel overwhelmed. They have big goals and a large pool of resources, which makes it impossible to decide how much to spend on what.

Analytics can help take the pressure off. Both market-wide and industry-specific metrics can help you figure out how to optimize spend on various components. Again, this is where component-specific thinking really helps. Too often, Eli and Kerrin see their clients spending too much on a page only to find that the page isn’t performing well—and that they have no resources left to make changes.

Eli likes to tie analytics to specific components so that clients can see how different versions of, say, the homepage hero performed. Analytics help answer critical questions like: What can you better communicate? How can you improve the UX through content or features that drive conversion rates? Armed with answers, you can tweak different product pages, brand storylines, and journeys to find the best approach.

Thinking about the site like Lego bricks, with metrics tied to each brick, enables you to approach development strategically and avoid getting overwhelmed.

Join PUMA, Skims, and other top retail brands

Find out how you can use Sanity's modern content platform to create personalized, consistent, and remarkable customer experiences across all of your channels and touchpoints.

Get a demo

Page content

    • Weave storytelling throughout the customer journey
    • Think components, not pages
    • Iterate, iterate, iterate
    • Let content drive collaboration
    • Be strategic, backed by analytics

Categorized in

  • Composable commerce

More on this topic

  • PUMA and Sanity logos, against the backdrop of a runner

    Case study

    PUMA moves fast and gets global teams in sync with Sanity

  • What Is Headless Commerce? From Beginner to Expert

    Article

    What Is Headless Commerce? From Beginner to Expert

  • 5 Ways to Make Your E-commerce Product Pages Pop

    Article

    5 Ways to Make Your E-commerce Product Pages Pop

Product

Sanity StudioAPIsContent LakeSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

DocumentationBlogResource libraryCase Studies
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Making a PWA
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
  • Next.js blog
  • Next.js personal website
  • Clean Next.js + Sanity app
  • Clean Remix + Sanity app
  • Clean SvelteKit + Sanity app
  • All Templates
  • Agency partners
  • Technology partners
  • Headless CMS 101
  • Static Sites 101
  • Headless Commerce 101
  • CMS for enterprise
  • Headless SEO
  • Localization
  • Content as a Service
  • What is a DXP?
  • Typescript 101
  • Ecommerce SEO
  • What is a Composable DXP?
  • What is an API?
  • GraphQL vs REST
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • API-first CMS
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS
  • Nuxt CMS
  • SvelteKit CMS
  • Agile CMS
  • Eleventy CMS
  • Multisite CMS

Company

Contact SalesEnterpriseCareersTerms of ServicePrivacy PolicyAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023