Makeswift Visual Editor

Makeswift is a fully composable visual editor with a suite of design tools for quickly and easily creating beautiful storefront pages. Makeswift removes the steep learning curve of building your ideal digital experience by allowing developers to build custom components that marketers can use directly in the workspace without ever touching code.

Makeswift is our recommended visual builder for composable storefronts for BigCommerce, as it is deeply integrated with Catalyst, BigCommerce's headless storefront framework. While Makeswift has feature parity with Page Builder, it provides advanced functionality like:

• Multi-user editing
• Localized experiences for different regions
• Integrating with your preferred Content Management System (CMS)
• Instant site rollbacks

For a complete look at what Makeswift can do for your web experience, see their Features page.

Makeswift is a standalone integration that connects with your headless storefront to publish your web page designs. Its site builder is organized into the following structural elements:

• Workspace — the design area where you customize the appearance of each of your headless storefronts
• Site — the instance of your storefront in Makeswift. Your sites have a one-to-one relationship with each storefront domain.
• Page — a single web page on your site with its own URL path. Pages can be created from a template or from scratch.
• Collection — a group of pages presented as a drop-down category in the workspace for ease of access. You can create unlimited collections and nest them within each other.

In your workspace, you can build storefront pages by defining their layout, dragging and dropping components into layout regions, and customizing their content and appearance. While Makeswift provides a variety of built-in components such as buttons, carousels, and forms, developers can build custom components with React and add them to the workspace for use.

The subscription plan on your Makeswift account determines your workspace’s maximum user count, how many times per month you can publish design updates, and which features you can access. The free plan is ideal for trying out Makeswift’s visual builder or for small teams who want to build a simple site, while paid plans are preferable for large, complex storefronts.

• You must connect your Makeswift workspace to a headless storefront framework built on Next.js, such as Catalyst.
• Your Makeswift user account must have the appropriate user role for editing pages, publishing page changes, or managing Makeswift sites.

Go to Makeswift’s signup page to create an account with a free workspace. You will be prompted to select how you want to host your Makeswift instance: either default hosting to start building immediately, or setting up a custom host in order to make the most out of Makeswift’s functionality. See their article on Hosting to learn more.

After selecting a site template, open your workspace to begin designing pages. The workspace has four main sections:

• Navigation — the left side menu where you can select the Makeswift site associated with your Catalyst storefront, open web pages, create new ones, or manage your workspace and site settings
• Toolbar — drag and drop components on the web page you are viewing. Select the move icon to edit and relocate components on the page, or the interact icon to navigate the page as you would on the live storefront.
• Canvas — this is where you add, move, or delete components on the web page you are currently viewing
• Panels — the styling settings for individual components, web pages, and the entire storefront

Visit Makeswift’s Help Center to learn more about using design features and management settings.

How is Makeswift related to Catalyst?

Catalyst is our composable storefront framework, while Makeswift is a visual site builder that supports composable ecommerce. They can be combined into a full composable experience, but you do not need a Catalyst storefront to use Makeswift, or vice versa.

Can I use Makeswift with a Stencil storefront?

While you can integrate your Makeswift builder with any headless storefront, you cannot use it to design native Stencil storefronts.

Where can I get support for using Makeswift?

Makeswift has a robust Help Center with how-to articles and developer-focused technical guides. If you still have questions or you are experiencing issues, click the Help icon at the bottom of the navigation bar in your workspace. Select Get help from the menu for real-time assistance from Makeswift’s chat bot, or select Email support to contact their support team directly.

Can I try out the features found on Makeswift’s paid plans?

If you want to see Makeswift’s full capabilities before purchasing a subscription plan, you can request a demo by filling out this form.