ArticleIntroductionText

Setting up ButterCMS is just the first step. Now, it’s time to put it to work. With Nimara’s CMS integration, you can manage content without digging into the code whenever something needs updating. 

Text

This guide walks you through adding content, structuring navigation, and setting up static pages so everything runs smoothly from day one.

<h2>Understanding Content Types in ButterCMS</h2>

In <a href="https://nimara.store/?utm_campaign=article&amp;utm_medium=external_link&amp;utm_source=how-to-add-manage-content-buttercms-nimara-storefront" rel="noopener noreferrer nofollow" target="_blank">Nimara</a>, everything managed through ButterCMS falls into two main content types, ensuring a structured and flexible setup:
<ul>
 <li>Collections — Ideal for structured, reusable content like navigation menus and menu items.</li>
 <li>Page Types — Used for static pages (such as About Us or Contact) and dynamic homepages.</li>
</ul>
With this setup, you can keep your content organized and make updates without touching the code.

It all starts with the Navigation Menu collection. The name of an entry determines whether it is used for the main navigation or the footer.<ul><li>An entry named Navbar is treated as the main navigation.</li><li>An entry named Footer is treated as the footer.</li></ul>This simple naming convention allows Nimara to automatically map content to the correct place — no extra configuration is needed.

<h2>How Does the Navigation Menu Work?</h2>

Each Navigation Menu entry references a list of Navigation Menu Items, which are the actual clickable links shown in the menu.The relationship between the Navigation Menu and the Navigation Menu Item is one-to-many, meaning each navigation can have several items.Each Navigation Menu Item can also reference Navigation Menu Item Second Level entries, allowing you to define nested (dropdown) menus.&nbsp;This creates a flexible two-level structure, perfect for product categories with subcategories or sections with deeper navigation.Here’s a diagram showing how the pieces fit together for a Navbar with two levels:

<h2>Guide to Creating a Two-Level Navbar</h2>

Now that you understand how navigation in Nimara is structured, it's time to build it out.&nbsp;Since the menu supports both top-level and nested links, you must set up collections defining these relationships.

Image

Nimara Storefront: Diagram illustrating the structure of a two-level Navbar

<h3>Step 1 — Create a Second-Level Navigation Collection&nbsp;</h3>

If your navigation includes dropdown menus, you’ll need a second-level collection to handle nested items. This keeps your submenus structured, organized, and easy to manage.In Nimara, second-level menu items (the ones that appear inside dropdown menus under a top-level link) are stored in the Navigation Menu Item Second Level collection.Before adding entries, you need to set up the collection with the fields shown in the graphic below.

Creating a Second-Level Navigation Collection in ButterCMS for Nimara Storefront

Here's what each field means:<ul><li>Name – The text that appears in the navigation menu.</li><li>URL – A direct link to any page.</li><li>Category slug – Links to a specific Saleor category.</li><li>Collection slug – Links to a Saleor collection.</li><li>Page slug – Links to a static page.</li><li>Description – Extra text for promotion or additional context.</li><li>Image – Useful for promotion banners in mega menus.</li></ul>

<h3>Step 2 — Create the Navigation Menu Item Collection&nbsp;</h3>

Now that the second-level structure is in place, it’s time to set up the top-level navigation.&nbsp;The Navigation Menu Item collection defines first-level menu items in Nimara’s navigation, whether they belong to the main Navbar or the Footer.This step is quite similar to the second-level setup but with a key difference: instead of being nested under another menu item, these entries serve as the main menu links. They can also reference second-level collections if dropdowns are needed.Before adding entries, you must again set up this collection with fields like Name, Page (for static pages), URL, and a reference to second-level items. This ensures each top-level menu item can link to the correct destination while optionally supporting submenus.

Creating a Navigation Menu Item Collection  in ButterCMS for Nimara Storefront

What Each Field Does:<ul><li>Name – The label that appears in the navigation menu.</li><li>Page – Links to a static page.</li><li>URL – A direct link to any destination.</li><li>Category – Reference to a product category from your commerce platform (this is just a collection named Category with Name property).</li><li>Navigation Menu Second Level – Holds submenu items for dropdowns.</li></ul>

<h3>Step 3 — Create the Navigation Menu Collection&nbsp;</h3>

The Navigation Menu collection is the top-level container that defines whether the menu is the main site navigation (Navbar) or the footer (Footer).&nbsp;This collection doesn’t hold individual links itself. Instead, it references the Navigation Menu Items you’ve already created.Before adding entries, you’ll first need to set up the collection with these fields:

Create the Navigation Menu Collection in ButterCMS for Nimara Storefront

Once your Navigation Menu, Navigation Menu Item, and Navigation Menu Item Second Level collections are set up and linked together, all that’s left is to add the actual data:<ul><li>Populate the collections with categories, pages, and links.</li><li>Ensure everything is correctly linked for seamless navigation.</li></ul>And boom - your shiny new navbar (or footer) is ready to roll in Nimara!

<h2>Guide to Defining Homepage and Static Pages</h2>

The Homepage and Static Page are Page Types in ButterCMS.&nbsp;Unlike collections (like Navigation Menu), you can use Page Types to define the structure of individual pages -&nbsp; in this case, the Homepage and the Static Pages.

<h3>Step 1 — Set Up Page Types for the Homepage / Static Pages</h3>

The Page Type must be created under Content Types &gt; Page Types in Butter CMS before you can add actual homepage content.The homepage should contain the following fields:

Here’s how it looks on the front:

<h4>Disclaimer – How Carousel Products Work</h4>

The Carousel Products field in ButterCMS doesn’t store full product details like name, price, or images. Instead, it acts as a collection of product references. Each entry includes:<ul><li>Name – Used for identifying the product in ButterCMS.</li><li>ID – Matches the product’s actual ID in Saleor.</li></ul>

Nimara Storefront and Butter CMS: How carousel product work

When Nimara renders the homepage, it uses these Saleor product IDs to fetch the actual product data directly from Saleor’s API.This allows Butter CMS to act as a lightweight content manager while Saleor remains the single source of truth for product data.Static Page should contain the following field:

Nimara Storefront and Butter CMS: How carousel product work - static page

<h3>Step 2 — Populate the Homepage / Static Page with Data</h3>

Go to Pages &gt; New Page in Butter CMS, and select the Homepage / Static Page type.Whether you’re populating the Homepage or creating a new Static Page, the process is pretty much the same — you get complete control over the content directly from Butter CMS.

<h2>Managing Content Without Developers Help</h2>

Once the initial setup is complete, non-technical teams can handle most of the content management right inside ButterCMS.Need to update the navigation, swap out a homepage banner, or add a new static page? No problem. Marketing and business teams can do it all without waiting on developers.By keeping CMS integration structured and flexible, Nimara lets developers focus on building features and allows content teams to manage updates easily.

Columns

How to Add and Manage Content in ButterCMS for Nimara Storefront?

If you’re working with Nimara Storefront, you probably already know it’s built to be flexible. One of the key features is its CMS-agnostic setup. So you can choose which content management system powers different parts of your storefront. 

Currently, <a href="https://nimara.store/?utm_campaign=article&amp;utm_medium=external_link&amp;utm_source=getting-started-buttercms" rel="noopener noreferrer nofollow" target="_blank">Nimara</a> supports <a href="https://buttercms.com/" rel="noopener noreferrer" target="_blank">ButterCMS</a> and <a href="https://saleor.io/" rel="noopener noreferrer nofollow" target="_blank">Saleor CMS</a>. Switching between them is surprisingly simple — but more on that in a moment.

<h2>How to Switch to ButterCMS in the Nimara Storefront?</h2>

Switching to ButterCMS in Nimara Storefront is designed to be as simple as possible. Below, we’ll walk you through the steps to get everything up and running smoothly.Once you're set up, learn <a href="https://mirumee.com/blog/how-to-add-manage-content-buttercms-nimara-storefront?utm_campaign=article&amp;utm_medium=internal_link&amp;utm_source=getting_started_buttercms" rel="noopener noreferrer" target="_blank">how to add and manage content in ButterCMS for Nimara Storefront.</a>

<h3>Step 1 — Connect ButterCMS to Nimara Storefront</h3>

First things first: if you want Nimara to pull content from Butter CMS, it needs permission.&nbsp;That means you must grab your API key, which you can easily find in the ButterCMS dashboard under Settings:

Api Key to Connect ButterCMS to Nimara Storefront

Once you have it, add this to your environment variables:

CodeBlock

No key, no content. It’s that simple.

<h3>Step 2 — Tell Nimara You Want Butter (Not Saleor)</h3>

Nimara’s flexibility comes from its CMS service abstraction layer. It means you can choose your content source using a simple environment variable.&nbsp;To use Butter CMS, you just need to set the following in your Vercel project’s Environment Variables (under Settings):

Setting Up ButterCMS Environment Variables in Vercel for Nimara Storefront

When you get it, add this to your environment variables (just for local testing):

This tells the storefront: "Hey, all my content should come from Butter CMS."

Whenever you change <code style="color: rgb(24, 128, 56);">CMS_SERVICE</code>, you must redeploy your Vercel project and make sure the new provider is fully applied.&nbsp;This step is crucial for making the integration work seamlessly, as it updates the environment with the latest CMS configuration.

<h2>What You Can Handle with ButterCMS in Nimara?</h2>

Once you connect ButterCMS, you can manage several key parts of your storefront directly from the ButterCMS dashboard — no code changes are required.Currently, Butter CMS Powers No-Code Content Updates within:<ol><li>Navigation - Main menu with categories, collections, or custom links.</li><li>Footer - All those useful (and sometimes legally required) links at the bottom.</li><li>Homepage - Key sections like product carousels, banners, and promotional sections.</li></ol>This makes it easy for non-technical teams to update critical parts of the storefront without asking developers for help — and that’s always a win.

<h3>Why the Freedom to Switch CMSs Matters?</h3>

The beauty of Nimara’s setup is that you’re not locked into a single CMS.&nbsp;Whether your project starts with Saleor’s built-in CMS or you decide to switch to ButterCMS later, the process is smooth.&nbsp;You just need to update your environment variables and redeploy - and your content source switches seamlessly.

<h3>How to Customize Your CMS Setup?</h3>

If you want to get fancy or are in one of those "we're migrating, but not all at once" situations, you can mix and match your CMS sources directly in the code.You’ll find Nimara’s provider setup in the same file where <code>cmsPageService </code>and <code>cmsMenuService</code> are defined:

It loads either Saleor or Butter services by default based on the <code style="color: rgb(24, 128, 56);">CMS_SERVICE</code> environment variable.&nbsp;But if you need more control, you can override this logic and hardcode different providers for specific parts of the storefront.&nbsp;This is how you get homepage from Butter CMS and navigation &amp; footer form Saleor:

<h3>What’s Possible with a Modular CMS Setup?</h3>

<ul><li>You can pull navigation and the footer from Saleor&nbsp;</li><li>While using ButterCMS for the homepage, banners, and static pages.</li><li>Or… flip it around if you enjoy giving your future self a headache. </li></ul>

<h2>How Nimara Uses Serialization to Make ButterCMS (and Any CMS) Work Seamlessly?</h2>

By default, Nimara Storefront ships with Saleor CMS baked in. That’s the natural pairing since Saleor handles products, categories, collections, and pages directly.&nbsp;But what happens when you want more flexibility — maybe a marketing team-friendly system like ButterCMS for content management?The key to making this work is serialization.

<h3>Why Serialization Exists (and Why You Should Care)</h3>

You know the pain if you've ever tried plugging two completely different systems into the same frontend. Each platform has its own:<ul><li>data structure,</li><li>naming conventions,</li><li>relationship models (or lack thereof).</li></ul>Without serialization, every component in Nimara would need to know exactly which CMS is in use and handle both data structures with a bunch of ugly<code style="color: rgb(24, 128, 56);">if (cms === "butter")</code>checks.That’s not how we roll.Instead, Nimara forces every CMS (Saleor, Butter, or whatever’s next) to speak the same language. The frontend never knows (or cares) where the data came from.

<h3>Butter CMS — Flexible, but Needs Structure</h3>

ButterCMS is a powerful general-purpose CMS that allows you to structure content your way. Since it doesn't enforce a standard "menu concept", Nimara builds the main navigation by combining:<ul><li>a collection for top-level items (main navigation);</li><li>a second collection for second-level items (submenus).</li></ul>These two collections aren’t automatically linked in Butter CMS — that’s Nimara’s job. The Butter CMS menu infrastructure layer:<ul><li>fetches both collections;</li><li>matches submenus to their parent items;</li><li>passes everything through a serializer that normalizes it into Nimara’s standard menu format.</li></ul>When the data reaches the frontend, it's just a standard menu tree with items, labels, URLs, and optional children — the same as if it came from Saleor.

<h3>Saleor — The Default, but Not the Only One</h3>

Since Saleor CMS is product-focused, it ships with a menu system that knows about categories, collections, and pages. That’s why Nimara defaults to Saleor.But even Saleor's menus get serialized because Saleor's idea of a "menu item" isn't quite the same as Butter's — and Nimara wants every menu to look precisely the same by the time it hits the component.

Whether your menu comes from ButterCMS or Saleor, the component always gets the same shape:

No CMS-specific quirks.&nbsp;No conditionals.&nbsp;Just clean, predictable data.

<h2>Serialization Is a Must - Raw Data Won’t Work</h2>

This is a non-negotiable rule in Nimara. No raw Butter CMS data. No raw Saleor responses.Everything gets:<ul><li>fetched by the infrastructure layer;</li><li>transformed by a serializer;</li><li>delivered to the component in the standard shape.</li></ul>This approach follows clean architecture principles, separating concerns at each layer:

Clean Architecture: Layered Approach to Separating Concerns

This is how Nimara stays CMS-agnostic and why switching between Saleor and ButterCMS (or back) doesn’t require rewriting your components.With serialization, Nimara stays flexible, future-proof, and CMS-agnostic.

<h2>Switching CMSs Should Be Easy — So We Made It That Way</h2>

At the end of the day, Nimara’s goal is to give you flexibility without the usual integration headaches. We’ve done the hard part for you — building a CMS-agnostic system, normalizing data, and handling serialization.&nbsp;That means you don’t have to spend hours wrangling inconsistent APIs or rewriting components. Just set your environment variables, redeploy, and you’re good to go.

m-zine

Author

Sonia Klimas

Articles

How to Add and Manage Content in ButterCMS for Nimara Storefront?

Getting Started with ButterCMS in Nimara Storefront: A Step-by-Step Guide for Developers

Author

Articles

Sonia Klimas

How to Add and Manage Content in ButterCMS for Nimara Storefront?

Getting Started with ButterCMS in Nimara Storefront: A Step-by-Step Guide for Developers

Let’s engineer great products and systems together