Composable Integration Series: Catalyst X Contentstack

Katie Hoesley

Welcome back to the next installment of the Composable Integration Series! In this guide, we’ll walk through implementing Contentstack into your existing Catalyst storefront. 

A huge benefit of Catalyst is that you can integrate whichever CMS you want and whichever works best for your business. We picked Contentstack for this example because we’re attending ContentCon in Austin this week! Let’s dive into Contentstack and how to integrate with Catalyst.

What is Contentstack? 

Contentstack is a headless CMS that offers a scalable, API-first platform that easily integrates with your ecommerce tools and technologies, letting you create personalized, omnichannel experiences for your customers.

With Contentstack, you get modular content management, advanced content modeling, and a solid asset management system. Plus, it comes with powerful collaboration tools, workflow management, and localization support to make sure your content delivery is smooth and efficient. Its architecture makes deploying content changes quick and easy, helping your team stay agile and responsive.

Why Contentstack? 

Here’s why you might pick Contentstack for your ecommerce projects:

  • Seamless Integration: Contentstack's API-first approach makes it easy to connect with your ecommerce platform and other technologies, ensuring everything works together smoothly for a great customer experience.

  • Agility and Flexibility: With modular content management and advanced content modeling, you can quickly tweak and scale your content strategy to keep up with the fast-paced ecommerce world.

  • Enhanced Collaboration: The platform comes with great collaboration tools and workflow management, making teamwork a breeze and speeding up content creation and deployment.

  • Global Content Management: Contentstack's strong localization support lets you manage and deliver content across different regions effortlessly, perfect for reaching a global audience.

  • Rapid Deployment: Its architecture allows for quick and efficient content changes, so your team can stay agile and respond quickly to market demands and new opportunities.

Localization with Contentstack & Catalyst

Integrating Contentstack with Catalyst unlocks two major areas of functionality key to ecommerce developers and merchants: multi-language and multi-geo.

Contentstack's sophisticated multilingual content capability enables you to create and publish entries in multiple languages, featuring over 200 pre-configured locales and language codes and the option to add more.

If you want to sell your products in different places, Contentstack also allows you to leverage our Multi-geo functionality and customize your BigCommerce product visibility, payment methods, pricing, and more for each region you sell in.

In the video below, you can see how we've integrated Contentstack into a Catalyst storefront, enabling multi-lang - a huge bonus of using Contentstack in this storefront. Check out how seamless it is:

Integrating Contentstack with Catalyst 

Prerequisites

Integration steps 

1. Clone this repository 

git clone git@github.com:bigcommerce-labs/catalyst-contentstack.git && cd catalyst-contentstack

2. Use corepack to enable pnpm, then use pnpm to install project dependencies

corepack enable pnpm && pnpm install

3. Set up your environment variables. You can find documentation for each field in the .env.local file, described in .env.example. 

cp .env.example .env.local

4. Start the development server

pnpm dev 

What’s next? 

That’s it! 

You’re ready to get started with your Catalyst <> Contentstack integration! We’d love for you to give this a shot and let us know what you think and whether you run into any issues. 

If you have questions, feedback, or issues implementing, please reach out to our DevRel team or join our Developer Community TODAY!