Builder.io + Shopify Hydrogen - headless visual page building example

Overview

Builder.io + Shopify Hydrogen - headless visual page building example

Example repo using Builder.io for drag and drop page building with Shopify hydrogen

Demo

Get Started

  • Clone this project: git clone https://github.com/BuilderIO/builder-shopify-hydrogen
  • Install dependencies: cd builder-shopify-hydrogen; yarn
  • Run the server: yarn dev
  • Create a free account at builder.io
  • Go to builder.io/models, choose the page model and change the Editing URL to http://localhost:3000
  • Create a new page with url /landing/testing
  • Explore the drag and drop editor
  • Hit publish, then go to http://localhost:3000/landing/testing and see your page!

Explore more in the Builder.io developer docs

Why Builder.io?

Hardcoding layouts for frequently changing content bottlenecks your team and makes releases messy

Using an API-driven UI allows you to:

  • Decouple page updates from deploys
  • Schedule, a/b test, and personalize via APIs
  • Reduce code + increase composability

Who uses Builder.io?


How is the content structured?

In Builder, content is structured in models, and customized with custom fields and targeting

  • Builder pages - full drag and drop control between your site's header and footer. Try it out
  • Builder sections - make a part of a page visually editable in Builder and use our targeting and scheduling to decide who sees what. Try it out
  • Builder data - fetch structured data from Builder and use it anywhere in your application (e.g. menu items, structured pages). Try it out

Read more about how builder works here

See here for examples on how to structure a site with Builder

Getting started

Requirements:

  • Node v14+
  • Yarn
yarn
yarn dev

Remember to update shopify.config.js with your shop's domain and Storefront API token!

Previewing a production build

To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run yarn preview:

yarn build
yarn preview

Building for production

yarn build

Then, you can run a local server.js using the production build with:

yarn serve

Structuring your site

There are a lot of ways you can use Builder for your site. Some of the main questions you'll want to ask yourselves - what on your site should be in your code vs in Builder.

As a general rule, parts of your site that should be managed by non developers should probably be in Builder. Parts that are complex with a lot of code, should probably be in your codebase. Using custom components in your Builder content can help you strike a good balance here as well

Here are some examples we recommend for how to structure various pages on your site, for instance for a headless commerce site:

examples on how to structure your site

How the Builder.io platform works

How it works

Data models, components, SEO, and more

Builder.io gives you a ton more power and control than just page building. Check our guides on

Additional framework support:

As well as some handy power features like:

Join the community!

Questions? Requests? Feedback? Chat with us in our Discord!

Troubleshooting and feedback

Problems? Requests? Open an issue. We always want to hear feedback and interesting new use cases and are happy to help.

Comments
  • Oxygen production build fails - TypeError: Cannot read properties of null (reading 'parse')

    Oxygen production build fails - TypeError: Cannot read properties of null (reading 'parse')

    When attempting to deploy to Oxygen, the system fails due to the following error:

    Cannot read properties of null (reading 'parse')

    I've installed a vanilla copy of hydrogen and I started copying over code line by line. When I included the builder client component, the builder.init method causes this error to be thrown. When I run hydrogen in dev mode, it renders just fine. But when it builds for production (as it needs to in order to deploy to Oxygen) the script cannot proceed past that point so it cannot complete a successful deployment.

    opened by sebinievas 16
  • Uncaught Error: EvalError: Code generation from strings disallowed for this context

    Uncaught Error: EvalError: Code generation from strings disallowed for this context

    I am attempting to deploy our project through Shopify Oxygen with GitHub Actions and am getting the following error from the @builder.io/react package due to the use of eval...

    Uncaught Error: EvalError: Code generation from strings disallowed for this context

    Here is the full error for completeness:

    πŸ› οΈ Building the application... 
    yarn run v1.22.19
    $ shopify hydrogen build
    [STARTED] Building client code
    Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
    Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
    Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
    Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
    [TITLE] Built client code
    [SUCCESS] Built client code
    [STARTED] Building worker code
    Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
    Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
    Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
    Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
    [TITLE] Built worker code
    [SUCCESS] Built worker code
    Done in 22.01s.
    βœ… Done in 22.16s.
    
    πŸš€ Uploading deployment files... 
    πŸ›‘ InvalidScriptError: retrying will not succeed. The following error must be actioned:
    
    Uncaught Error: EvalError: Code generation from strings disallowed for this context
      at worker.mjs:2203:68269
    Error: Process completed with exit code 1.
    
    opened by tylerscave 15
  • BuilderComponent Hydrogen SSR

    BuilderComponent Hydrogen SSR

    I'm trying to use the BuilderComponent as SSR so I can be able to fetch Shopify Product data from the handle in a Builder Custom Component.

    I've seen this issue but I was not able to find any follow-up on this. Is there any update on it?

    https://github.com/Shopify/hydrogen/issues/631

    opened by guibovo 6
  • ERROR: Field 'metafields' is missing required arguments: identifiers

    ERROR: Field 'metafields' is missing required arguments: identifiers

    I have performed all setup steps as per the readme. Running node v16.13.2. When I try to load the page in the builder.io editor or on its own, I receive the error message above. I haven't been able to find any existing information or other cases pertaining to this error.

    Please advise. Thanks!

    image

    opened by SaberMage 3
  • Error: Process completed with exit code 1.

    Error: Process completed with exit code 1.

    I have cloned repo from https://github.com/builderio/builder-shopify-hydrogen and after changing hydrogen.config, I was trying to deploy it on hydrogen but is showing some error like this.

    https://prnt.sc/tsfGdwYdhsYO

    Here is my hydrogen.config file https://prnt.sc/yC6LkdcY4qWO

    https://www.awesomescreenshot.com/image/33275444?key=3c225c21d7a798351967db7be08c021a

    Anyone faced issue like this then help me out of this. Thanks in advance

    opened by fenil-arcticgrey 6
Owner
Builder.io
Builder.io
An unofficial, simplified version of the @Shopify/koa-shopify-auth middleware library.

simple-koa-shopify-auth https://www.npmjs.com/package/simple-koa-shopify-auth NOTE: This package is not maintained by or affiliated with Shopify. Desc

David 20 Nov 7, 2022
Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and com

Web & Mobile | eCommerce | Full-Stack Developer 4 Nov 24, 2022
πŸ’°The Shopify-like Digital Commerce engine provides an Open-Source πŸ†“ and Headless/Modular Architecture ⚑

?? The Shopify-like Digital Commerce ⚑ ?? The Shopify-like Digital Commerce engine provides an Open-Source ?? and Serverless Architecture ⚑ ?? The Sho

OceanSoft 7 Nov 7, 2022
A bare-bones example Shopify app build with remix.run

Remix Shopify App A bare-bones Shopify app build with Remix Not supported by or affiliated with Shopify Create .env Add API_KEY to .env Add API_SECRET

Willson Smith 27 Jan 5, 2023
High performance personalization & a/b testing example using Next.js, Edge Middleware, and Builder.io

Next.js + Builder.io Personalization & A/B Testing with Edge Middleware This is a fork of Next.js Commerce with Builder.io integrated and using Edge M

Builder.io 7 Sep 6, 2022
πŸ›  Building a Headless CMS with all the essential features for business representative websites to make πŸš€

Isomera - headless CMS for business representative websites SaaS that is hosted on the cloud and built by community. To make developer life easy. ⚠️ A

Cortip 8 Dec 3, 2022
Snippets4Dummies is an easy to use Visual Code Extension which is used for building beautiful layouts as fast as your crush rejects you!

Why Snippets4Dummies? Snippets4Dummies is an easy to use Visual Code Extension which is used for building beautiful layouts as fast as your crush reje

SCHWITZ 6 Oct 11, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022
Example-browserstack-reporting - This repository contains an example of running Selenium tests and reporting BrowserStack test results, including full CI pipeline integration.

BrowserStack reporting and Selenium test result example This repository contains an example of running Selenium tests and reporting BrowserStack test

Testmo 1 Jan 1, 2022
Example auto-generated OpenAPI client library and an accompanying example Angular app.

To utilize this demo Head into petstore_frontend\petes_pets Run npm install Go to frontend_client_lib\out Run npm install Head back into petstore_fron

Alan Gross 1 Jan 21, 2022
open-sourced boilerplate NFT projects (Shopify, Opensea, Patreon, etc)

?? Quickly start any NFT projects A collection of boilerplates for full-stack dapps that showcase some of the use case for NFTs. Think of web3 native,

Alyssa 2 Jan 12, 2022
πŸš€πŸš€ A Shopify embedded app starter template, with updated dependencies, session storage, app context and examples for basic functionalities.

Shopify Node App Starter This is a starter template for embedded shopify apps based on the shopify cli node app. Contributions to create the perfect s

Carsten Lebek 143 Jan 8, 2023
Shopify Backend Developer Intern Challenge - Summer 2022

Shopify-Backend-Developer-Intern-Challenge Shopify Backend Developer Intern Challenge - Summer 2022 Application Features User can add products. User c

Dhrumil Shah 1 May 14, 2022
Minimal E-Commerce Store built with NextJS using Shopify Storefront API

NextJS Shopify Store Minimal E-Commerce Store built with NextJS using Shopify Storefront API Usage: run: npm install && npm run dev OR If you have doc

Omar Magoury 3 Nov 29, 2022
πŸš€πŸš€ A Shopify App template for serverless, non-embedded Apps.

?? Free Shopify x Next.js App Template for serverless non-embedded Apps Everything to build your next non-embedded Shopify App and Marketing pages in

Carsten Lebek 77 Dec 30, 2022
A sample app (with TypeScript) to help developers bootstrap their Shopify app development.

⚠️ Please, refer to kanzitelli/shopify-app-template-typescript for the most up-to-date version. This repo was used for testing purposes. Shopify App N

Batyr 4 Jun 10, 2022
The brand new @shopify/flash-list high performance list component can be used on TV as well as on phones!

FlashListTV The brand new @shopify/flash-list high performance list component can be used on TV as well as on phones! Quick start: Clone this repo Cha

Douglas Lowder 4 Oct 27, 2022
A Gatsby storefront for a Shopify store.

Leah Gardner Storefront A Gatsby storefront for a Shopify store. Built as a learning project for Shopify and Gatsby integration. This project is boots

Yinka Adedire 15 Dec 14, 2022
Analyzify's open-source guide & codes on Shopify Pixels & Customer Events. Follow this repo to stay up-to-date with the new pixels.

Shopify Customer Events & Shopify Pixels Shopify has announced yet another phenomenal feature: Shopify Customer Events also known as Shopify Pixels. O

Analyzify 8 Dec 8, 2022