Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required



Get StartedLogin






Made in Builder

Creating a blog in

Powering your blog with Builder empowers your editors to build exciting blog articles easily and visually.


If you don't have one already, go create an account over at

In this example we are also assuming you are a developer and will be hooking up this blog to a custom website or app

Create a Blog Article model

First, we need to make a model for our blog articles. To do this, go to and hit + Create Model and choose Section

Now let's add our fields. We recommend adding the following fields:




This will be the article title when listing articles and for the page <title> tag for SEO. E.g. "Announcing our new product line"



This will be the URL handle, e.g. new-product-line



This will be the main image for the blog post (e.g. when listing articles) as well as the og:image for previewing on social media sites like Facebook



This will be the date for displaying when this was posted and for filtering by date posted



(optional) this will be the preview text when listing blog articles, and optionally can. be the SEO meta description as well



(optional) to list info about authors, we recommend making a new data model (e.g. with fields full name of type text and photo or type file) and using a reference type to reference the author for an article

Tip: You probably want to mark some of those options, like Title, Handle, Image, and Date as required so the editor must enter those values to publish

Connect this to a site

Now, you can query your Blog Articles using our Javascript SDK, Content API, or GraphQL API.

List articles

To list articles, fetch the articles and render each one. E.g. for a page at

Next.js Example

Display an article

Next, let's render an individual article

Next.js Example

Add a preview URL

Once you get the code setup locally, let's connect your local site to the Visual Editor. This will allow for accurate previewing and editing as well as using your custom components directly in the editor!

To do this, go back to, choose Blog Article, and find the preview URL option. Enter a URL that will route on your site to the BlogArticle page, for instance http://localhost:3000/blog/_ (assuming you are using the format /blog/:handle)

Enter in the URL and hit save

Create a Blog Article

Now you can go to, hit + New Entry and choose Blog Article. You should now see the drag and drop editor loaded right onto your local site!

You can now create articles visually and publish them ready.

Note: when you publish your site updates to production, you will want to update your editing URL to be a production URL, such as and no longer a localhost one so anyone can create blog posts visually

And that's it!

We've showed several key features here such as custom models, custom fields, and connecting to your website

If you have any questions at all, please ask in our forum!

Was this article helpful?