×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Pricing

Enter some text...

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

Made in Builder

‹ Back to blog

Develop a headless e-commerce site in Builder with Shopify

By Kapunahele Wong & Logan Affleck

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:

  • incredible page speed and performance
  • targeting and scheduling
  • A/B testing
  • templates and symbols
  • and most importantly, you’ll have complete control over your page design

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.

Prerequisites

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.

Goals

This tutorial shows you how to:

  • Open your shop’s Storefront API with a private app.
  • Connect your Storefront API to Builder using our Shopify integration.
  • Use Shopify data to display content and trigger a targeted custom behavior.

The example app

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.

Creating a private Shopify app

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.

Configuring your private Shopify app

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 read_products scope.

Connecting Shopify and Builder

In Builder, you need to enable Shopify and configure Builder's settings with the Shopify API Key, Storefront access token, and API password.

Enabling Shopify

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:

  • API Key from Shopify: in your Shopify account -> Apps -> Admin API
  • API Password: in your Shopify account -> Apps -> Admin API
  • Storefront access token: in your Shopify account -> Apps -> Storefront API
  • Store domain

Customizing the UI based on customer activity

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.

Next steps

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.

Read more on the blog
You’re invited to Partytown! Partytown is now in Beta
WRITTEN BYAdam Bradley
Introducing Qwik starters - get up and running with Qwik now
WRITTEN BYMiško Hevery
How we cut 99% of our JavaScript with Qwik + Partytown
WRITTEN BYMiško Hevery

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

INTEGRATIONS

All Integrations

Shopify

React

Angular

Next.js

Gatsby

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

Submit an Idea

PRODUCT

Features

Pricing

© 2021 Builder.io, Inc.

Security

Privacy Policy

Terms of Service