Made in Builder
If you already use or love Shopify’s commerce platform, but want to create your own page designs and custom behavior, using Shopify and Builder.io make that possible.
You can take advantage of Builder’s powerful visual editor to build a dynamic storefront that pulls data from your headless Shopify inventory.
This means you can use other Builder features for your storefront, too, such as:
Developing a custom Shopify site with Builder opens up a lot of room for growing your business, but we recommend that you have some development experience to use this integration to its maximum potential.
👉Tip: If you already use a page theme in Shopify, but are interested in adding custom sections and functionality through Builder.io, you can install the Builder.io app through the Shopify App Store.
This article assumes you have the following:
If you don’t already have a Shopify store with some products, this is a great time to set that up and add some inventory. Alternatively, you can make a Development Store if you don’t want to use real data yet.
This tutorial shows you how to:
We've created a drag-and-drop app in Builder that fetches from our products on Shopify. We start with a collection of mens jackets, as in the following image.
In a second phase, we customize the user interface based on what the user adds to the cart.
To connect Builder and Shopify, you need a private Shopify app and within that app, configure a few settings.
To create a private Shopify app, log in to Shopify and under Apps, click on Manage private apps.
Click the Create private app button.
Click the Enable private app development button.
In order for Builder to retrieve your Shopify inventory, you need to configure certain settings and permissions within Shopify.
In Shopify, grant all permissions in the Storefront API Permissions section.
In the Admin API Permissions section, enable read access to Products with
In Builder, you need to enable Shopify and configure Builder's settings with the Shopify API Key, Storefront access token, and API password.
On the Integrations tab, find the Shopify card and click the Enable button.
After the app refreshes, click on the new Settings button that has appeared in the Shopify card.
This opens the Builder Shopify settings dialog.
To find the info the Builder Shopify settings dialog requests, head over to your Shopify account to gather the following:
You can customize what a customer sees on a page based on their behavior.
In this example, we have a model called Announcement Bar, which displays at the top of the screen on the live page.
Ideally, we'd like for the announcement bar to change its message when a customer places the Short Slim Shearling Jacket in the cart. Let's change the message to "Check out now and get $59 off!".
To do this, we have to edit the Announcement Bar Model we've already made. Your models might be different.
To get to your models, click on the Content icon in the left sidenav and choose your model. Here, we're choosing Announcement bar.
To target a condition, click the Targeting icon at the top of the Visual Editor.
Next, we change the condition, where, to be Item in cart and then we choose the Short Slim Shearling Jacket. This means that when the cart contains the Short Slim Shearling Jacket, this Announcement Bar shows.
Now, when the user adds the Short Slim Shearling Jacket to the cart, the announcement bar changes.
This article walked you through using Builder's Shopify e-commerce plugin to show your Shopify inventory as well as how to target user behavior. With Builder's e-commerce plugins, you can customize your UI based on your unique use cases. With the Shopify plugin, custom targeting you can create targeting with a search of your Shopify products right in the Builder UI.