How Ace & Tate adopted no-code page building to increase speed and reduce developer dependency. Watch the Webinar

Build content visually.
In your CMS.

Available for

Shopstory empowers designers and marketers to build new content visually without waiting for developers.  All inside your favourite CMS and compatible with your front-end code.

Get a Demo
See Shopstory in action

Used by World-class
Teams

View Showcase
Visit Site
Visit Site
Visit Site
Visit Site
Visit Site
Visit Site
Visit Site
Visit Site
Visit Site
Visit Site

Stop waiting, start storytelling.

With visual builder, marketing teams can finally accelerate. Build new content in homepage, campaigns, landings, collection or product pages without constantly waiting for devs.

Keep your CMS.

Don’t change your CMS to get the power of visual. Shopstory works as extension to existing content management systems — it’s just a new type of field. Keep everything in one place and avoid replatforming hassle.

Keep one system, no replatforming
Keep your publishing workflows
Keep your media
Keep your CMS apps
Keep your data model

If your CMS is not listed or you want to use Shopstory in custom-made content system, we have a good news - it’s possible. Let us know

Developers

Works with your front-end.

Shopstory is designed to work with any React front-end, like next.js or Gatsby. For developers everything stays as it was but certain “marketing parts” of pages that change most often can be now built visually.

1.

Add Shopstory field anywhere within your CMS data model. You decide if the field represents content for a entire page, single section, card, popup, etc.

2.

Fetch the field content via CMS API.

3.

Use our SDK to render the content anywhere within your front-end.

Great rendering performance
Compatible with SSR
Low bundle size
No layout shift
Read the Docs
const CampaignPage: NextPage = ({ content, meta }) => {
  return 
}

export const getStaticProps: 
  GetStaticProps = async (context) => {
  
  let { preview, locale = 'en-US', params } = context

  if (!params) {
    return { notFound: true }
  }

  const entry = await fetchEntryById(params.id, locale, preview ?? false);

  const shopstoryClient = new ShopstoryClient(
    shopstoryConfig, 
    { locale, contentful: { preview } }
  );
  
  const content = shopstoryClient.add(entry.fields.config);
  const meta = await shopstoryClient.fetch();

  return {
    props: { content, meta },
  }
}

Use your custom components.

Shopstory allows for embedding custom-coded components.

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.

Now your content team can use them inside no-code layouts.

Why do you need Shopstory

Magic happens when you unlock your team with a visual builder.

Designers creativity is thriving. They now have superpowers to turn their ideas into reality — in hours, not weeks.

Marketers are finally unlocked, they can now experiment, measure and repeat.

Developers, while staying in controll, are now free to focus on core features, integrations, and performance.

“Last year we partnered with Shopstory to do a pilot on their new Contentful plug-in and it has really been a game changer for us. It's taken a huge load off developers and made it much faster for designers & editors to build new pages. Also gives us way more flexibility between devices so we can create much stronger experiences on mobile which then lead to better conversion.”

Sheri Kruzel
Head of Product at Ace & Tate

Start Building Visually

Get a Demo