Blend content with commerce.

The first visual content builder for e‑commerce that works with Contentful CMS.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Content credits: Atomy

Works with your modern front-end stack.

react.jsnext.jsgatsby.js

A visual building experience inside Contentful CMS.

Shopstory is the first app for Contentful that adds a new field type — visual content builder. Precisely decide which part of your e‑commerce can be build visually and enable it within minutes.

Keep your content model

Shopstory is just a CMS field, it can be added anywhere within your content model.

Keep your 3rd party tools

Under the hood Shopstory data is standard CMS data so all the 3rd party tools for A/B testing, translations etc. will work with Shopstory content.

Keep your API and CDN

Shopstory data is stored within CMS data as standard CMS fields, therefore it’s available via Contentful ultrafast APIs and CDNs.

Keep your media

Shopstory uses native CMS media picker, keep all media in one place.

Shopstory offloads developers and gives superpowers to marketing teams.

Your marketing team can build content blocks in any place of e‑commerce without falling into long development cycles.

Developers are now offloaded from marketing requests. They can focus on core features like performance, integrations or tests.

World’s best e‑commerce content blocks. Out of the box.

At Shopstory we are inspired by world’s best and most beautiful e‑commerce stores. We provide hundreds of content blocks your marketing team always wanted to have, but there was never good time to develop.

Content credits: noo.ma and Sept

Keep your brand unique and consistent with design tokens.

Shopstory content blocks adapt to your brand. All you need to do is to define your unique design tokens (fonts, colors, buttons, product cards). Shopstory will adjust the look across hundreds of content blocks automatically. You can still fine tune each one individually.

Your custom-coded components inside a visual builder.

Sometimes components are too complex or too custom for a no-code tool and must be coded by developers. You can still use them in Shopstory.

Imagine custom-coded <ProductCard> . All you need to do is to define the schema of its properties and export the component to Shopstory with a single command.

// shopstory.config.js
import MyCustomProductCard from "./src/ProductCard";
export default {
  components: [
    //...
    {
      id: "ProductCard",
      type: "card"
      component: MyCustomProductCard,
      schema: [
        {
          prop: "product",
          type: "product"
        },
        {
          prop: "mode",
          type: "select",
          options: ["default", "slider"]
        }
        {
          prop: "hasQuickBuy",
          type: "boolean"
        },
        {
          prop: "colorVariants",
          type: "boolean",
        }
      ]
    }
  ]
};

Integrates with your e‑commerce platform.

Easily apply data from product catalogue in the content blocks. We integrated with all the major e-commerce platforms so that the experience is seamless no matter which one you use.
‍
Developers can provide custom fetch and map functions so that they keep full control over product data format and the way it’s fetched to the storefront.

Pre-build integrations:

Seamlessly integrated into developer’s workflow.

We provide a simple and high‑performance SDK to render Shopstory content in all the modern front-end frameworks like next.js or Gatsby.

Tiny bundle size and great rendering performance
Lazy loading — we always load only the content that is used.
Compatible with static sites and incremental static regeneration.
No layout shift.
Non-intrusive. Shopstory content is very tightly "sandboxed" so that it doesn't affect how your current code works.

next.js example

function CampaignPage(props) {
  // render Shopstory content
  return <Shopstory src={props.compiledContent} />;
}
CampaignPage.getStaticProps = async (ctx) => {
  // fetch a Campaign entry from your headless CMS
  let campaign = await fetchCampaign(ctx.query.id);
  // convert content managed by Shopstory into renderable format
  let compiledContent = await ShopstoryAPI.compileConfig(campaign.content)
  return { compiledContent }
};
export default CampaignPage;
react.jsnext.jsgatsby.js

In case you missed anything.

How does it actually work with Contentful?

Contentful allows developers to write custom applications that works inside of the Contentful. To do this, they must use Contentful App Framework described here https://www.contentful.com/app-framework/. Shopstory is just a Contentful app that adds a new field type - a visual builder.

Where is Shopstory content stored?

Inside of the Contentful data. We don't have our own servers or CDNs. You can fetch Shopstory managed data with standard Contentful API calls in the way way as you would fetch any other Contentful data.

How is content rendered in the storefront?

The algorithm is pretty simple:

  1. You fetch the Shopstory managed data via Contentful API (in the same way you would fetch any other Contentful data).
  2. The data you obtained must be compiled with our Shopstory SDK. It's just a single function call. Compilation phase transforms the configuration data into the format that is suitable for super-fast rendering performance. In static site approach (like next.js or Gatsby) this step and the previous one should be be done in a build phase (or regeneration phase)
  3. Pass compiled data into <Shopstory /> component provided in our SDK.
  4. Voila, the data is rendered.

How is this different from coding content blocks, building schemas and using them in a repeater field or via Compose app?

With Shopstory in use most cases you won't have to code content blocks at all. Around 80-90% of content needs can be covered with our out-of-the-box library. We believe this is a game changer. From now on content team can add new content blocks, add variants, make modifications without falling into development cycle at all. This helps developers too, they have more time to focus on other stuff and less code to maintain.

Is Shopstory visually flexible enough? Template-driven solution almost always fall short in terms of customisation when real-world requirements appear.

We know this one very well, as an ecommerce agency we had this issue all the time.

  1. Our out-of-the-box content blocks are extremely customisable in terms of appearance. They're not like "here are 3 variants of this component". When we build a new content block, we sweep the database of over 500 top-level ecommerce stores to look for this content block and see what can be the variants of this block. Every property is carefully thought out and there are literally hundreds of combinations of the same component.
  2. Design tokens. You can use your own custom fonts, colors, spacings, buttons, product cards, etc. in our content blocks. We think this is fundamental to keeping your ecommerce unique. The extra advantage of this approach is visual consistency.
  3. Custom-coded components. This is probably the most important thing. We don't think that no-code tool can cover 100% of custom needs. Maybe in the future but it's not the reality in 2021. Sometimes developers need to code stuff manually because it's so custom. Our thinking is like this: we want to cover 80-90% of most common use cases without code. But if anything is very custom then developers can still code it in a standard coding process. Custom-coded components can be exported to Shopstory so that content editor doesn't see a difference between custom coded component and Shopstory component. We believe that future is neither fully code nor fully no-code. It's a mix of both.

I worry about my Web Vitals. Won't Shopstory affect weight and performance of my storefront?

We know how important are Web Vitals for modern web. Shopstory won't affect them negatively and actually in many cases it can make the score even higher.

Although Shopstory provides hundreds of content blocks out-of-the-box, they aren't kept in your JS bundle. The only thing that stays in the bundle is Shopstory renderer. The renderer itself is extremely lean and takes as little KBs as possible. Every more complex logic is lazy loaded so it won't affect your Web Vitals. For example if we provide slider with custom swipe logic, this logic doesn't load during the first paint. It will be lazy loaded after all the most important stuff loaded so it won't affect Web Vitals.

The content blocks that editor picked for a specific page are not kept in your bundle. They're loaded dynamically so that you load only the ones that are used and nothing more. For example in next.js it means that all the info about specific content blocks is passed via getInitialProps or getStaticProps.

As for rendering performance, it's close to pure HTML + static CSS, the overhead is close to zero.

Actually, we believe that in most cases using Shopstory content blocks will make Web Vitals better. The reason for this is that we can build very complex optimisations that are hard to build for ecommerce business because of time and budget constraints.

We’re currently in private alpha. Sign up for Early Access and be the first to get an invite.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Interested?
Talk to Simon.

simon@shopstory.app

Find me on Linkedin

© 2021 Shopstory.