Early Access

Extending Contentful CMS with a no-code visual builder:
Ace & Tate case study

Background

Brand that revolutionised the eyewear industry in Europe

Founded in 2013, Ace & Tate offers high-quality, thoughtfully designed eyewear at a fair price. Today, with 70+ physical stores across Europe, the Dutch eyewear brand is hugely successful, leading the industry to be more sustainable and tech-advanced.

In late 2021, Ace & Tate joined the Shopstory Pilot Program, to be among the first users of Shopstory no-code visual builder. Since then their cross-disciplinary product team is working closely with the Shopstory core team on shaping the future of no-code builders for e-commerce.

“Some good news from us. The Frame for Every Face landing was our best converting campaign page ever. So I think I speak for everyone when I say: thank you for making Shopstory!”

Nils Westhoff

Front-end Developer

Challenge

Traditional content management in Contentful wasn’t enough

It is no longer enough to build landing pages or articles disconnected from the shopping path.

To drive more engagement across different types of customers, product teams need a way to incorporate content into multiple user journeys.

To meet the demand Ace & Tate originally built a set of custom-coded blocks they could compose into pages with the Contentful CMS. What at first seemed to be a perfect solution, shortly became a limiting factor for the editors and a headache for the developers.

Firstly, it wasn’t scaling up. With every new campaign, the development requested more custom-coded building blocks. These had to go through the full code process, overwhelming developers with marketing requests and slowing down the campaign delivery. Moreover, this development bottleneck resulted in many creative ideas being halved or never happening.

Standard form-based Contentful CMS interface didn't have visual building capabilities.

Secondly, the standard form-based Contentful CMS interface, while being an extremely flexible tool for managing site navigation or collections, didn't have visual building capabilities.

Creatives expected a more natural way of building, with room to play.

Solution

Giving the power of building web visually

With Shopstory, Ace & Tate designers and editors are now empowered to build ecommerce visually. Contentful CMS is still the single, centralised hub for all the structured content. However, now it is extended with a no-code builder.

The new editing experience with Shopstory - building the Frame for Every Face campaign page.

Development is no longer a roadblock and productivity increased, without adding new resources. Ace & Tate can now create new pages in hours, not weeks. The new way of building created space for optimising content and a data-driven creative culture. In fact, one of the first campaigns they published was “the best converting campaign ever”.

“Last year we partnered with Shopstory to do a pilot on their new Contentful app and it has really been a game-changer for us. It has taken a huge load off developers and made it much faster for designers & editors to build new pages. It 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

Spring-Summer 2022 campaign built with Shopstory.

Solution

Beyond the campaign pages – add ‘content bites’ anywhere on your store

With Shopstory’s flexible architecture, Ace & Tate developers can inject no-code sections anywhere within their structure – as full-page elements, in Product Listing Page grids, Product Details Page, search results or modals.

One of the key elements was to extend collection pages (PLP). Shopstory allowed Ace & Tate to add small content blocks (we call “content bites”) right in their product grid. These could serve many purposes from giving their product more context by placing lookbook photos or exposing their audience to premium lenses offering. This is a common use case in the ecommerce space, yet with generic tools, it’s hard to build it as it should be. Shopstory, by being e-commerce specific, makes it a no brainer.

Extending Colour Crushin' Product Landing Page with custom cards.

Solution

Finding the right balance – code and no-code combined

Ace & Tate already had a pretty sophisticated product card component with features like color picker, wishlist or different gender variants on hover. With very low effort, their dev team was able to connect their custom react component to Shopstory and provide a simple UI for editors.

Editing a custom-coded product card component inside Shopstory.

In Shopstory a custom-coded React component is a first-class citizen and can be easily blended into no-code layouts. This is what we strongly believe in - neither code nor no-code is solely a future, but a combination of both.

Thanks to Shopstory open architecture, Ace & Tate can now place any kind of react component - from buttons and sign up forms to custom sections. To make it editable developers just build a UI right in their react code.

Technology

How Shopstory fit into existing headless architecture

Contentful CMS

Shopstory doesn’t require any breaking changes in your current Contentful data model. This is an extremely powerful feature because you can add visual building capabilities without any major architectural changes. In Ace & Tate's case, all they had to do was install the Shopstory app and add Shopstory fields to the existing Landing Page and Collection content types. That’s it. Content editors could still build content exactly as they did before, but now they got the visual builder as an alternative. Shopstory uses the Contentful media library, so all the media uploaded for years could be accessed immediately.

next.js storefront

Ace & Tate built a modern and powerful storefront using React, next.js and Vercel. This combination brings a lot of advantages in terms of performance and scalability. It’s typical to think that no-code tools that inject code into custom front-end could easily ruin this. Historically these tend to generate a massive amount of bloat, drastically reducing performance, conversions and SEO ratings. Happily, none of those happens with Shopstory, because it’s designed from the ground up to prevent the above issues:

“Shopstory seamlessly integrates with our existing Next.js frontend. Our team can now export even complex components within seconds and make them available to content creators. This allows our engineers to stay focused on the code and moves the composition layer to a powerful visual editor directly in Contentful. All while keeping our javascript bundle size small and without introducing overhead to our build time.”

Tobias Guse

Tech Lead

Ecommerce platform

Ace & Tate uses quite a rare and non-typical ecommerce platform - Solidus. Thanks to the super-flexible architecture of Shopstory, integration with Solidus took just a couple of hours. Shopstory keeps the external resources such as products just as their id. No product info is kept inside of Shopstory data. Thanks to this, it is project developers who decide how to fetch product data into the storefront. This level of flexibility is extremely powerful. Developers can use any API they want, GraphQL, REST or other. They can do any optimisation they want. They can fetch data directly from the ecommerce platform, from caching services or from the CMS. Shopstory doesn’t make any assumption on any of those things. Thanks to such an architecture it is very easy to integrate Shopstory with almost any existing front-end tech stack.

What's next

Personalised experiences

The next big thing for Q2 2022 will be A/B testing, regionalisation and personalisation. Shopstory will keep its open approach by allowing integration with any personalisation engine of your choice (Optimizely, Dynamic Yield, Ninetailed or Nosto).

Coming soon - adding variations.

Apply

Pilot program

We’re looking for more Pilot Program Partners to join! If you feel like Shopstory would be a great add-on to your existing stack please apply.

Apply for Pilot Program

Be among the first to use Shopstory

Start using Shopstory before it’s publicly available for other e-commerce stores.

Shaping product roadmap to meet your needs

During this free 3 months period, we'll be listening to your challenges, brainstorming how we can improve your workflow and iterating our product to meet your expectations.

Completely free for 3 months, then highly discounted monthly charge

3-months Pilot Program is out of charge. If you’d like to continue that’s great and we’ll be happy to offer a reduced fee.

Questions? Contact Simon:

simon@shopstory.app