The current virus scare will come to pass, but what’s here to stay a whole lot longer is e-commerce.
The pandemic has shifted much of how we do things, and our consumption and purchase behaviors have drastically altered. As such, entrepreneurs are jumping at the chance to invest in online businesses to ensure a more future-forward way of income generation.
If you’re interested in building your own version of the e-commerce platform Shopify, the next two blog posts are for you!
For these articles, we’re talking about how developers can build an e-commerce web app without having to code at all!
Let’s start!
We’ll begin by using the platform’s design tool to craft the web app’s user-interface. Since we’re cloning Shopify, our core pages for the web app we’re developing are the following:
Create store, create product, product page, store page, order page, dashboard, and checkout.
Establishing your database
When you’ve finished arranging your web app’s display, you can proceed to build the appropriate data fields to let your e-commerce platform work. These fields are what will power your workflow, ensuring that your platform is smooth and functional.
Thankfully, Bubble optimizes a pre-made database, making it a lot simpler to build various unique fields with data types.
Because we’re building an e-commerce web app like Shopify, you can pattern after the following fields and data types:
Data type: User
Fields:
- Name – text
- Items in cart – List of products. Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields.
- Purchased products – List of products
- Owned store – Store
Data type: Store
Fields:
- Name – text
- Logo – image
- Description – text
Data type: Product
Fields:
- Name – text
- Price – number
- Image – image
- Description – text
- Original store – Store
Data type: Order
Fields:
- Customer – User
- Delivery address – geographic address
- Store – Store
- Products purchased – List of products
- Order sent status – yes/no with no default
(source: https://bubble.io/blog/build-shopify-clone-no-code/)
Establishing your workflows
Now that you’ve mapped out both your platform’s database and design, let’s move forward by connecting every element to make sure your Shopify clone works seamlessly.
Building a “new store”
As with the case of Shopify, you’ll want your users to be able to open a store on your platform. That being the case, we’ll want to build an onboarding process for your platform’s users that lets them create their store.
To start, work on combining input elements on your create store page. The elements here should consist of a photo uploader, text inputs, and a button.
Then, with the Bubble editor, we’ll start our first workflow. A user should easily be able to trigger this workflow when they click on the “create store” button.
Here, choose “create a new thing” and name it “new store.”
Naturally, we’ll match our corresponding data fields and our on-page input elements in our database.
When we’ve successfully created a store, we’ll have to add this item to an “owned stores” data field by the user. This will imply that the store admins are the users themselves.
To make this work, we’ll have to build in our workflow another event. But in this particular scenario, we’ll choose “making changes to a thing.”
What we’ll want to change here is the current user, making sure their new store is added to the created stores list that they built.
Once done, we’ll proceed by leading our users to the next part of the onboarding process. We’ll allow them to add new products for their store; again much like how someone would do it on Shopify.
We include this in our workflow when we add a navigation event. Simultaneously, this should lead a user to the create product page.
Because we want everything to run smoothly and as expected, we’ll make sure that we pass through the new store’s data.
Adding items to your store
To let this work, we’ll have to establish the new store page type to be a “store” as well.
After that, configure the following input elements to mark the creation of a product.
And like earlier steps, we’ll have to build another workflow that’s triggered when a user clicks the “create product” button.
This workflow should be patterned after earlier workflows. The only difference here is that we’ll be creating a new product.
Here, we’ll also make sure that the new product is linked to the current pages store.
When we’ve successfully added a new product, we’ll have to supplement another workflow step. This time, to reset the on-page input elements’ values.
This lets the store owner add a variety of products without having to open a different page.
When the store owner is done adding products, we’ll then have to build a workflow that lets them check and assess their store.
Like so many of our earlier steps, a user will trigger this workflow when they click on the “visit store” button. To make this functional, we’ll optimize a navigation event that leads a user to the store page, sourcing current store page’s data and showing it to the user.
We’re halfway there! Check out the last few steps in our next blog!
Is this a web app you see yourself building? Check our courses to learn more about building your app.
If you have e-commerce efforts you’d like to pursue, give us a call and we’ll help you out!
(Source and screenshots from: https://bubble.io/blog/build-shopify-clone-no-code/)
