BigCommerce now provides Catalyst, a Next.js reference headless storefront implementation. This aims for feature parity with hosted, Stencil based storefronts but will all the flexibility that comes with using modern developer tooling.
Makeswift is a visual page builder for Next.js. It was acquired by BigCommerce in 2023 and is now provided as a recommended way of managing content in a Catalyst-powered storefront.
As we look to provide Catalyst & Makeswift support for our storefront apps like Store Locator and Mega Menu, we thought it would be a useful exercise to build out our own page in Makeswift.
Makeswift Components
Makeswift comes with quite a few built-in components and templates to make building a page as quick as possible. These can quickly be added to the page by drag and drop.
The other benefit of its tight integration with Next.js is that any React component can easily be packaged up as a Makeswift component. This means marketers can re-use custom-developed components and drag and drop to any page.
Managing the page layout
One of our first questions when evaluating a visual page builder is how does it allow you to manage the layout of the page. The most common approach is to consider each page to be broken up into multiple horizontal blocks, or rows, or slices. Within these rows, most page builder will then provide slightly different mechanisms to snap components into a grid. This helps to keep the page design consistent.
Makeswift implements rows using “boxes” and then these can be dragged and resized – snapping to a grid.
Additionally, it provides some further layout flexibility by adding margin and padding where needed.
Multiplayer mode
A common frustration with BigCommerce PageBuilder for stencil stores is that you can run into problems when multiple people edit a page at the same time. Makeswift brings content editing to the 21st century with built-in support for collaboration so that you can a colleague can tag team and get edits made quickly.
Global Components
In a single click, you can convert a component to a global component and then re-use it on other pages. Then, when you make an edit to this component, it will automatically be updated in all instances of this component. Perfect for updating a promotional block without the headache of finding every instance of it and updating manually.
Forms & Integrations
While we didn’t dive too deep into this area, you can create a form with any fields that you like and add it to a page. Any submissions will be visible within Makeswift but these can also easily be sent to another tool through Makeswift’s integration with Zapier.
Scheduling
While there’s no support for scheduling content at this stage, it has been announced as on the roadmap.
While it’s early days of Catalyst & Makeswift, we’re excited by what’s already possible and look forward to seeing how they continue to push the product forward.
