Medusa - Contentstack connector

Integrating Contentstack with a Medusa store

4.10.25

Niket Ashesh & Cameron Isiminger

At Alpha, we have worked on numerous ecommerce projects, and one thing we can say confidently is that ecommerce websites benefit greatly from integrating a Content Management System (CMS) for several reasons:

 

  1. Content Flexibility: A CMS allows for easy creation and management of various types of content, such as blog posts, product descriptions, and landing pages, without needing extensive technical knowledge.
  2. Marketing Efficiency: Marketers can quickly update and optimize content to improve SEO, run promotions, and create engaging landing pages, all without relying on developers.
  3. Consistent Branding: A CMS helps maintain a consistent look and feel across the site by using templates and themes, ensuring that all content aligns with the brand's identity.
  4. Enhanced User Experience: By regularly updating content and adding new features, a CMS helps keep the site fresh and engaging for users, which can lead to higher customer satisfaction and retention.
  5. Page Builder/Visual Building tools: Many modern CMSs feature low-code or no-code page builders, which significantly speed up the time to market.

In almost every project, we are tasked with integrating a CMS with an ecommerce platform. Some integrations have been simple and limited, while others have been tightly coupled. A common thread is the integration of visual page builders, even in headless implementations. This is because making simple additions and changes to a website should be straightforward and not require development.

 

When it comes to headless solutions, we have found that most headless platforms also provide starter sites, whether it's a CMS starter site or an ecommerce starter site. These starter sites are a great way to get the core functionality up and running quickly.

 

Our approach is always to take the ecommerce starter sites and build upon them. The simple reason is that ecommerce starter sites have the core commerce functionality built-in, saving a lot of development time.

 

 

Achievements with Medusa and Contentstack

 

  1. Contentstack’s Visual Builder Integration: We integrated Contentstack’s Visual Builder with Medusa’s storefront, allowing users to:
    • Create and manage sections of the site in Contentstack.
    • Leverage the visual builder tools to drag and drop blocks, edit, and preview in the CMS.
  2. Medusa App Integration: With the Medusa app for Contentstack, users can search and fetch products from Medusa and display them in a field in their content type.

 

 

Medusa app for Contentstack

 

We have developed a Medusa app for Contentstack. With this app, users can search for and fetch products from Medusa, displaying them in a field within any content type.

 

By using a Contentstack Custom Field, we can integrate the Medusa app into our content types, allowing us to select products and categories via Medusa APIs. This app enables content managers to choose a product or category as the input value for that field.

 

Here are a few screenshots from the app:

 

Custom Field: Medusa app product selector

Custom Field: Medusa app product selector

 

Custom Field: product selector modal

Custom Field: product selector modal

 

Custom Field: selected product view

Custom field: selected product view

 

Contentstack editing controls on the site

Figure 1 Contentstack editing controls on the site

Editing a page in Contentstack

Figure 2 Editing a page in Contentstack

Editing product content. Showing the original description from the e-commerce system

Figure 3 Editing product content. Showing the original description from the e-commerce system

Editing product content showing the original description overridden by one in Contentstack

Figure 4 Editing product content showing the original description overridden by one in Contentstack

Product page outside of Contentstack with the overridden content

Figure 5 Product page outside of Contentstack with the overridden content

Medusa B2B Starter Homepage with hero banner image controlled by Contentstack

Figure 6 Medusa B2B Starter Homepage with hero banner image controlled by Contentstack