Builder.io + Shopify + Gatsby Starter

All the power of going headless, speed of Gatsby and, the customizability of Builder.io

Typescript + Theme-UI

gatsby-theme-shopify-manager The easiest way to build a shopify store on gatsby.

Analytics, A/B testing, product augmentation, and heatmaps out of the box.

Get Started

Install the Builder.io cli

npm install @builder.io/cli -g

Clone this repo

using git

git clone https://github.com/BuilderIO/gatsby-builder-shopify

Generate your Builder.io space

Signup for Builder.io, then go to your organization settings page, create a private key and copy it, then create your space and give it a name

cd gatsby-builder-shopify
builder create -k [private-key] -n [space-name] -d

This command when done it’ll print your new space’s public api key, copy it and add as the value for GATSBY_BUILDER_PUBLIC_KEY into the .env files (.env.production and .env.development)

GATBY_BUILDER_PUBLIC_KEY=...

Connect Shopify

Now you have a space clone matching the spec defined in this repo, you’ll need to connect it to your shopify store.

Create a private app in your Shpoify store and generate both admin api keys and storefront API token.

Access your newly created space, by selecting it from the list of spaces in your organization, then from space settings, configure the @builder.io/plugin-shopify with the required details: admin api key / password, store domain, please feel free to ignore the import your products/collections step since it’s not needed for this starter.

Add your storefront api token to the .env files (.env.all)

GATSBY_SHOPIFY_ACCESS_TOKEN=...
GATSBY_SHOP_NAME=...

Install dependencies

yarn

Run the dev server

yarn develop

It’ll start a dev server at http://localhost:8000

Deploy

For continuous deployment from netlify <> Builder.io :

• Create a build hook in netlify
• Add the build hook from last step to Builder.io global webhooks in your new space settings.

🧐 What’s inside?

This starter demonstrates:

• creating product pages in builder.io for easier a/b testing and cusotm targeting.
• shows how to pass context with the editor for binding components to dynamic state object for easier templating, for things like product pages, collection pages.
• shows how can you customize and augment your data, for example a specific product in shopify you want to override it’s description for an a/b test, that’s as simple as setting a default binding, and allowing users to break the binding for a specific product handle.

See:

• src/components/molecules/aware-builder-component.tsx
• src/templates/product-page.tsx for using GraphQL to query and render Builder.io components
• @builder.io/gatsby the plugin used in this starter to generate pages dynamically.

Using your custom components in the editor

👉Tip: want to limit page building to only your components? Try components only mode

Register a component

import { Builder } from '@builder.io/react';
class SimpleText extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}
Builder.registerComponent(SimpleText, {
  name: 'Simple Text',
  inputs: [{ name: 'text', type: 'string' }],
});

Then import it in the template entry point

import './components/simple-text';
// ...

See:

• design systems example for lots of examples using your deisgn system + custom components

Mixed Content errors when hosting on insecure http

Our editor uses the preview URL you supply for live editing. Because the editor is on https, the preview might not work correctly if your development setup uses http. To fix this, change your development set up to serve using https. Or, as a workaround, on Chrome you can allow insecure content on localhost, by toggling the insecure content option here chrome://settings/content/siteDetails?site=http%3A%2F%2Flocalhost%3A9009

Prerequisites

• Node
• Gatsby CLI

Available scripts

build

Build the static files into the public folder

Usage

$ yarn build

develop or start

Runs the clean script and starts the gatsby develop server using the command gatsby develop.

Usage

yarn develop

format

Formats code and docs according to our style guidelines using prettier

CONTRIBUTING

Contributions are always welcome, no matter how large or small.

Learn more

• Official docs