✔️ 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.
npm install @builder.io/cli -g
using git
git clone https://github.com/BuilderIO/gatsby-builder-shopify
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=...
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=...
yarn
yarn develop
It'll start a dev server at http://localhost:8000
- Create a build hook in netlify
- Add the build hook from last step to Builder.io global webhooks in your new space settings.
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.
👉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
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
- Node
- Gatsby CLI
Build the static files into the public folder
$ yarn buildRuns the clean script and starts the gatsby develop server using the command gatsby develop.
yarn developFormats code and docs according to our style guidelines using prettier
Contributions are always welcome, no matter how large or small.