The process of creating an e-commerce store can be long. From choosing the right e-commerce platform for you to setting it up, to deploying and more — it can all take a while.
Shopify, WooCommerce, and a few other e-commerce platforms dominate the market, but in this article, we are going to offer a different approach.
In this article, we are going to learn how to build an e-commerce store using React, Next.js and Builder.io — a method that can significantly speed up the process of creating an e-commerce store.
Let’s get started.
While You Are Here, Why Not Learn How To Build a WordPress Plugin or Theme With React?
Prerequisites
- Code editor
- Node and npm installed on your system
What Is Builder?
According to the official Builder docs:
“Builder is a visual building platform. It connects to your existing site or application and enables anyone on your team to create, manage, and publish high-performing, enterprise-scale digital experiences without constantly relying on developers.”
How It Works
You can choose which areas of your site Builder will take care of and which areas you wish to maintain through code. There are three primary ways you can use Builder:
- Builder pages: To develop everything between your site’s header and footer, you can use the drag-and-drop UI.
- Builder sections: Making only a portion of a page visually editable in Builder will allow you to control who sees what by using targeting and scheduling.
- Builder data: Use data that has been fetched from the Builder anywhere in your application, such as menu items.
Setting Up Project
The first we need to do is clone the starter code for this project, by running the following command on your terminal.
git clone https://github.com/BuilderIO/nextjs-shopify.gitYou can also click on the GitHub link here to copy the link and clone it, or download the zip file of the starter code.
Once you are done cloning the starter repo, this is what your directory should look like after opening it on the code editor:
The goal for us is to understand the starter code, and then we can add our own features and components.
Before we get started, the first thing we need to do is to go to the builder.io site and create an account. This is what the sign-up page for builder.io looks like.
Once you are done signing up and creating an account, your builder dashboard should look like this:
The next step is to navigate to the left side of your dashboard and click on account settings, then click on the pen-like icon on the “private keys”, to see your private key:
Click on the pen-like icon to get the private key:
Next, copy the key, by clicking on the copy icon.
Now, before anything else, let’s head back to our code editor where we opened up our project starter codes, go to the terminal, and run the command:
npm install --global "@builder.io/cli"Here, we installed builder.io CLI globally, so we will be able to use all of its features.
The next step is to paste this command on your terminal:
builder create --key "<private-key>" --name "<space-name>" --debug
But before you run the command, remember the private key we copied earlier from Builder? paste it in <private-key>, then for <space-name>, you can input whatever name you prefer. After doing all this, the command should now look like this:
builder create --key "bpk-93dbc7e7490b44d3b4443b908c6e8496" --name "demo-ecomm" --debugNow run the command, and you would get this on your terminal:
Scroll down to get a message containing your private key. The message should look like this on your terminal:
What we want to do now is copy the public API Key, then go to our .env.development, and .env.production files and paste it there as shown below:
and:
The next step is to go to spaces on your builder.io dashboard, which should look like this:
Then click on your project name, in our case we used “demo-ecomm”. You would now see this:
And that’s it, we are all set to get started.
Getting Started
To get started, the first thing we need to do is head back to our terminal and run this command:
npm i
to install all the necessary dependencies.
Now, to start our development server, we have to run the command:
npm run dev
Once the application starts running, you can check it out on your builder.io dashboard, go to account settings, click on the site URL, and make sure the site is running on your local host as shown below:
The next thing you need to do is head over to “page” on your project dashboard on Builder and click on the new icon to create a new page, and give it whatever name you feel like. In our case, we named it “Landing page” as shown here:
Click on “create page”, and it will lead you to the next page, which is something like this:
We want to work on a blank page, so let’s click on blank, and we will be led to this page:
Now, as soon as you drag and drop a component, your local host will immediately be informed of the changes, and you will be able to see the change live.
Now, let’s drag and drop the text component into the “add block” icon. Then input in whatever text you want to. In our case, we said, “Learn how to build an e-commerce store”:
Then visit the site URL, which you can see at the top right corner of your screen, by copying it and loading it on a new browser page, then you will see this:
and that’s it! You can now see your project live on your localhost:3000.
The next thing you need to do is head back into your builder.io project dashboard, navigate to the left side, scroll down to “featured templates”, and choose a template of your choice. In our case, we choose the hero template, which looks like this:
The next thing we want to do is add some products to our store, so on the left side of your dashboard, scroll up to “Shopify product components”, then drag and drop “product grid” into the Shopify store, click on edit, then “Product list”, then choose whatever product you want. In our case, we choose jackets, as seen below:
Once you are done, click on “Publish”, go to your site and reload, everything will be updated instantly.
Code Components
Now we have seen a lot of drag and dropping, let us go into our code and see how things work, and how we can create a code component. So, we are going to explore how to create a new code component from scratch.
The first thing we did was create a folder named Hero (You can give it whatever name you like), then inside our Hero folder, we create another folder named Text (where we created our Text.builder.js file, and our Text.jsx file).
Inside our Text.jsx file, we included the following code:
import React from 'react'
const Text = ({headline, description}) => {
return (
<div>
Static Text...
<h1 style={{fontSize: '2em', fontWeight: 'bold'}}
>{headline}</h1>
<h5>{description}</h5>
</div>
)
}
export default Text
In our Text.builder.js file we included the following code:
import dynamic from 'next/dynamic'
import { Builder } from '@builder.io/react'
const Text = dynamic(async () => {
return (await import('./Text')).default
})
Builder.registerComponent(Text, {
name: 'Text Element',
inputs: [
{
name: 'headline',
type: 'string',
defaultValue: 'This is a text element'
},
{
name: 'description',
type: 'string',
}
]
});
The first thing we did in our Text.jsx file is use React to create a simple functional component which we named Text. Inside it, we created a <div> with the text “Static text”.
Then, to make a code block that the user in the builder.io website will be able to fill in, we created the Text.builder.js file, where we registered our component, then passed in all the information of our component. To use our elements inside our Text.jsx file, we got them through props.
We have now created our new code component. The next step is to head into the pages folder, and import it into our app.tsx file as shown below:
When we head back into our builder.io website dashboard, we should automatically be able to see the “Text element” we just created, which you can drag and drop into your website as shown below:
With this simple example, you can see that as a developer, you can be able to build anything as a custom code component, and just drag and drop it into your builder website.
Generic Collections
Now, if you want to add more generic collections to your e-commerce store, you can navigate to the left side of your builder.io website project dashboard, scroll up and click on “Shopify collection components “, then drag and drop “collection box” into your store, click on edit, and choose any generic collection of choice. In our first instance, we choose “men”, and this is what it looks like.
and that’s it.
Announcement Bar Model
Now, let’s look at another interesting model of our Builder e-commerce website, which is the “Announcement bar”:
For the announcement bar, the first thing we need to do is click on the announcement bar, then click “new” then “announcement bar”. An announcement bar can be a text element that we can drag and drop to the top of the page:
Here we changed the text color to white, then set the background color to black. Then we edited the text to say “nice choice…!”. The next thing you would want to do is click on the target icon on the top of the Builder dashboard as you can see in the photo above, then choose to target by “Items in cart” then “choose product” and select a product of your choice, and click on publish.
When you head back to your site and add the product you selected to your cart, the “nice choice…!” message will appear at the top of your page.
But note that this interesting model is not free on the builder.io website, and you have to pay for one of the plans:
Deployment
Now, we are going to deploy our e-commerce website using Vercel:
Connect your GitHub account to Vercel, then create Git repository, then wait for your site to automatically deploy on Vercel:
Once your project is deployed, you will see the “Congratulations” message. Next, go to your Vercel dashboard, which will look like this:
Here is what our demo e-commerce site now looks like after being deployed on Vercel:
Conclusion
In this article, we looked at how we could build or create a custom e-commerce store or Webshop, using Next.js, React, and Builder.io. We also explored some of the amazing features Builder has to offer in terms of the e-commerce store building.
