Made in Builder.io

Upcoming webinar with Figma: Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

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

Resources

Blog

Get StartedLogin

‹ Back to blog

Ecommerce

Builder for Shopify vs Shopify Page Builder Apps

September 29, 2020

Written By Brent Locks

Summary

The Definitions

What are the key differences?

Can Builder work alongside page builder apps?

What if we want to go headless?

Comparison tables

One of the key features of our Shopify app, is the ability to build pages via our drag-and-drop visual editor. As such, Builder for Shopify often gets compared to Shopify page builder apps -- but it's so much more! This post explains how and why. To keep it simple, since there are many page builder apps in the Shopify app store, we've decided to focus on comparing Builder's Shopify app to a popular one, Shogun Page Builder.

At the highest level, Builder is an experience builder and Shogun Page Builder is a page builder.

Builder's Shopify app integrates deeply with your Shopify theme and storefront, enabling you to accomplish many things that just aren't possible with Shogun, or any other page builder app, such as:

  • Building and optimizing any part of your storefront, not just certain pages
  • Targeting and personalizing content to drive higher conversion
  • Gaining deeper insights into user behavior to optimize better

A theme editor is an interface that lets you manage the content of your Shopify theme. A Shopify theme controls the look and feel of your storefront and is made up of a number of different templates to provide your storefront with consistency. For example, if you sell several products, you don't want to have to manage individual pages for each product. This would create a lot of overhead to manage and risk having an inconsistent and confusing user experience. You want all of your product pages to look and behave similarly, which is why Shopify has theme templates.

Shopify has its own theme editor that includes a theme preview and a toolbar that you can use to add and remove content, and to make changes to your settings. Shopify's theme editor is limited in terms of what you can build and how you can build it. But if you're viewing this post, you already know that 😉

A page builder app lets you build pages, of course! There are several page builder apps in the Shopify app store and there are some nuanced differences, but they all have a few things in common:

  1. They all allow you to build custom pages. The most popular custom pages that stores build are "About Us" pages or a "Contact Us" pages. But custom pages can really be any sort of webpage.
  2. None of the page builder apps integrate with your theme's templates. If you want to create a product page, it's going to be one-off. So, if you have 100 products and want to use a page builder app to create product pages, then you're going to have to create and manage 100 different product pages. Ouch.
  3. Page builder apps only support pages and cannot access or support key parts of your theme (e.g. signup page, cart, blog feed, etc) that are critical areas to optimize and drive growth.

Builder's Shopify app combines the deep integration of a theme editor with the ease of drag-and-drop page builder with powerful optimization features. It's very similar to a digital experience platform (DXP).

Gartner defines a DXP as "an integrated and cohesive piece of technology designed to enable the composition, management, delivery and optimization of contextualized digital experiences across multi-experience customer journeys." That's a mouthful but it's pretty spot-on with what Builder for Shopify does for Shopify-hosted stores, with one big difference: DXPs are often monolithic, expensive, complex and rigid all-in-one systems; Builder is not.

While Builder offers similar, powerful capabilities out-of-the-box, unlike a DXP, it's not all or nothing. You can pick and choose how, where, and when to use Builder. You can use it to manage one part of your storefront, the entire thing, or somewhere in between -- it's entirely up to you!

Because of this difference, we thought Builder deserved it's own one-liner -- an experience builder 😎

Since Builder's Shopify app includes page building capabilities, we'll focus on what's possible with Builder that is not possible with Shogun and other page builder apps. Again, the primary reason why these things are possible with Builder is because it integrates deeply with your Shopify theme and storefront, while Shogun (and other page building apps) do not. This is not an exhaustive list, but highlights the key differences on how you can build faster, save more time, and make more $ with Builder vs Shogun (and other page builder apps).

There are several things you can create with Builder that just aren't possible with Shogun and other page builder apps.

Homepages and product pages and collection pages, oh my. With Builder you can build and optimize your theme page templates. With Shogun, you're having to build one-off pages. For example, if you have 10 collections that you want to manage via a drag-and-drop experience, then with Shogun you're going to have to create (and manage) 10 different pages. With Builder for Shopify, since it integrates with your theme template, you only have to manage one page since it's a theme template of all your collections. Importantly, this also means you can build and optimize digital experiences across other parts of your theme with Builder, including your blog feed, cart, and signup page.

If you want to redesign any of your theme page templates, like your product page, then you can use one of our starter templates. These templates are already connected to your Shopify store admin and, therefore, dynamically include all your store's information (e.g. product names, prices, product images, add to cart buttons, etc). So, you simply need to drag-and-drop to create your desired experience. With Shogun, you can't actually integrate with your theme templates, so they don't have any starter templates that are already wired up to your Shopify storefront.

If you only want Builder to control a section, or a few sections, of a page then you can add custom dropzones that can be managed with Builder's drag-and-drop visual editor. One (powerful) example would be adding a dropzone to your cart and then using the targeting feature to up-sell or cross-sell products in the dropzone based on what's in the cart. Shogun, and other page builder apps, are not able to support custom dropzones.

Using our templates or custom dropzones, you can can create popups, announcement bars, shipping bars, sticky/floating elements, modals, drop-down menus, and much more without having to know any code. To do any of these in Shogun requires writing custom code, or is simply not possible.

By default, the majority of your storefront is a dynamic experience because it's connected to your Shopify product catalog through a Shopify API. For example, as you change prices in your Shopify admin it automatically updates in your store. Builder can integrate with any API or backend to create dynamic experiences. One example is connecting your Instagram account to create a dynamic Instagram feed in your storefront.

To drive sustained growth, you must continuously optimize the digital experiences you've built. Unlike Shogun and other page builder apps, Builder offers powerful targeting capabilities using your Shopify data to find new conversion opportunities.

Using Builder's targeting capability, you can create different content experiences for different customer segments. You can create content based on being logged in vs logged out, previous shopping activity, and much more. For example, you could personalize your homepage for a logged in user who previously purchased from your women's collection by featuring only women's collection products on your homepage for that customer. Shogun does not offer any personalization capabilities.

Using the same targeting capability, you can also target content based on different attributes, like what page a customer is on, what product or collection they are viewing, what device they are on, and what's in their shopping cart. As an example, if a customer has a bathing suit in her shopping cart, you could feature a beach hat and a pair of sunglasses to go along with her bathing suit to increase order value. Shogun can only target content by device or URL. 

You can't grow without measuring the results of your efforts. Builder offers intuitive and powerful analytics and insights to unlock growth opportunities.

We're big fans of analyzing metrics in tables and charts. Honestly, we couldn't live without them. But it requires some imagination to understand what actions customers actually took to hit certain numbers and to drive certain trends. Well, imagine no more, because with Builder's heat maps you can see exactly what behaviors your customers were taking and how those actions led to conversions. Shogun and other page builder apps do not provide heat map capabilities.

We know that there are many paths to travel down when analyzing data. While many key questions can be answered by out-of-the-box dashboards, we never want you to be limited with Builder, so we provide you with the ability to create your own custom dashboards. Shogun and other page builder apps do not provide custom dashboard capabilities (note: custom dashboards are available to Enterprise customers only)

We think a lot about developer experience. We provide developers the ability to completely control Builder in terms of what can be built and how it can be built. We promise that a developer will never hit a limit with what's possible via Builder.

A code base is a developer's home. It's where they like to spend time and build cool things. Shogun requires you to write code in their online text box. With Builder, you can keep your code where it belongs - in your git repo with all of the same tools and workflows you depend on, and editors can drag-and-drop components you define in your liquid code into the visual editor.

Additionally, you can customize Builder's Visual CMS itself with code anywhere needed. Learn more about Theme Studio for developers here

Comparison tables

To sum up all the differences between Builder.io and other Shopify page builder apps, we've laid out the main differentiators in the three tables below.

Theme pages

Custom pages

Product pages

Home page

Collection pages

Blog article pages

Blog feed

Login & sign-up pages

Cart page

Header & footer

Builder.io

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Other Shopify page builders

Yes

Limited

Limited

Limited

Yes

No

No

No

No

Capability

Content scheduling

A/B testing

Analytics

Custom dashboards

Dynamic starter templates

Custom drop zones

Personalization & targeting

Heatmaps

Builder.io

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Other Shopify page builders

Yes

Limited

Limited

No

No

No

No

No

Offering

Bring your own code

Work in your own code

Extend with plugins

Custom permissions and roles

Connect with any API

Connect with any backend

Builder.io

Yes

Yes

Yes

Yes

Yes

Yes

Other Shopify page builders

Limited

No

No

No

No

No

Yes, Builder Theme Studio plays nice with page builder apps (and any other).

Check out our Builder Visual CMS product! It integrates with any tech stack to provide the ease of drag-and-drop experience building with the flexibility of a headless architecture, and includes all the same features and capabilities as Builder's Shopify app. Online merchants, like Everlane, Atoms, Hatch, and more use Builder Visual CMS to build and optimize blazing fast headless commerce experiences. 

One added benefit of using Builder for Shopify io is that when you're ready to go headless, your Theme Studio content will seamlessly work with Builder Visual CMS. In other words, there's no hairy migration moving any of your pages and frontend over. It's like magic ✨

Shoot us a note at help@builder.io and we're happy to answer them!

Tip: Visit our Hydrogen hub to learn more about Shopify's framework.

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
AI9 MIN
How to Build AI Products That Don’t Flop
WRITTEN BYSteve Sewell
April 18, 2024
Web Development13 MIN
Convert Figma to Code with AI
WRITTEN BYVishwas Gopinath
April 18, 2024
Web Development8 MIN
Server-only Code in Next.js App Router
WRITTEN BYVishwas Gopinath
April 3, 2024