Build An Ecommerce Store With Rowy (2023)

If you're interested in building an online business in 2023, an ecommerce store is a great place to start. They demand less work than SaaS products because they are easier to build and maintain, while offering just as much potential for revenue. They are also less time-consuming than freelancing or consulting, which is why they are a great option for people who want to start a business on the side.

In today's article, we show how to build your own ecommerce store using Stripe, Rowy, and Webflow!

1. Add A New Rowy Project

Create a new Rowy project and add a new table. We'll call it ecommerce.

You'll need an account. If you don't have one, you can sign up for free or self-host a Rowy instance yourself.

You will see the following screen as you log in:

2. Add Your Product List

First, we need to add a few columns to your table to hold important information. Let's start with a name column, of type "short text":

You can do the same with a price and a description, and then you can add a few rows to your table just like you would in a regular spreadsheet:

Our fruit store is starting to shape up!

3. Connect Rowy To Stripe

Next, we need to accept payment to actually sell the products we just listed down. We use Stripe for this, a payment platform for the Internet that makes it easy to receive payments online. It's a great option for ecommerce stores because it's easy to integrate in any tech stack (no-code or not) while offering tons of features.

Create a new Stripe product

Open your Stripe dashboard and create a new product. We are going to start with one called apple. It costs $1 per unit and has a description of "a crunchy apple":

Add payment links to Stripe

Stripe makes it easy to integrate payments into your website thanks to payment links. It's just a link that customers click on where they can enter their credit card details, address, and email. Stripe takes care of everything from sending email confirmation to cancelling payments.

In the Stripe product dashboard, just click on the Create payment link button to get one:

You can then copy the link and add it to your Rowy table:

We'll call this new column paymentLink:

For this example, we use the same link for all products, but you can also create a different link for each product, create coupon codes, and change the pricing plan depending on your needs―recurring, one-time, monthly, yearly, etc.

4. Build a simple frontend with Webflow

You can use any frontend framework you want to display Rowy data, but we'll use Webflow for this tutorial. Webflow has a super simple API we can use to connect with Rowy without much code, so it's a great fit.

Create a new Webflow website

First we create a new Webflow website. It's free to get started, plus Webflow offers a subdomain name you can use to share your ecommerce store:

Add a new CMS collection

Next, we add a new CMS collection to our Webflow website. We'll call it products and add the following fields to match the data stored in Rowy:

name (text)
price (number)
description (text)
paymentLink (text)

A CMS collection is a collection of data that you can use to display dynamic content on your Webflow website. In our case, we'll use it to display the products we added from Rowy via API:

Connect Webflow to Rowy with an Action column

Almost there. Now, we need to connect Webflow to Rowy using Webflow's API. We create a new Action column to do that:

An action column display a button you can use to run any custom script you wish. It's as simple as copy/pasting the following code in the Action column settings:

const action: Action = async ({ row, ref, db, storage, auth, actionParams, user }) => {

  const baseWebflowURL = "https://api.webflow.com"
  const webflowSecret = <YOUR WEBFLOW SECRET>
  const headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + webflowSecret,
    "accept-version": "1.0.0"
  }
 const collectionId = <YOUR CMS COLLECTION ID>

  const itemId =  row.webflowItemId

  const body = JSON.stringify({
    "fields": {
      "name": row.name,
      "slug": row.name,
      "description": row.description,
      "price": row.price,
      "paymentLink": row.paymentLink
    }
  })

  try {

    if (itemId && itemId.trim().length > 0) {

      // update existing item
      var completeURL = baseWebflowURL + `/collections/${collectionId}/items/${itemId}`;
      if (row.live){
        completeURL = completeURL+ `?live=true`;
      }
      await fetch(completeURL, {
        method: "PUT", headers, body
      }).then(async r => {
        const data = await r.json()
        console.log("Item updated 🌎🌎🌎🌎🌎🌎🌎")
        console.log(data)

      })
    } else {
      // create new item
      var completeURL = baseWebflowURL + `/collections/${collectionId}/items`;
      if (row.live){
        completeURL = completeURL+ `?live=true`;
      }
      await fetch(completeURL, {
        method: "POST", headers, body
      }).then(async r => {
        const respData = await r.json()
        console.log("Item created 🌎🌎🌎🌎🌎🌎🌎")
        console.log(respData)

        await ref.update({ webflowItemId: respData._id })
      })
    }

    return {
      success: true,
      message: `Successfully published: ${row.name}`
    }
  } catch (e) {
    console.log(e)
    return {
      success: false,
      message: `Error in publishing:` + e
    }
  }


}

All we do is import our data from Rowy to Webflow using an API request. Your action section in the column settings will look like this:

Note you'll need an API key and a collection id for the API call to work. You can get the collection id directly from the CMS collection editor. To get a Webflow API key, just go to your Webflow project settings, then Integrations, and browse to the API access section:

Finally, publish the products from Rowy by clicking the Action buttons and check the Webflow CMS collection is updated accordingly:

Add a new page

Last but not least, you need to add a new page to your website to display the products. You can do that by using collection templates and linking each individual document property to a list item. You'll obtain something like this:

Hit publish

After publishing your website, you'll be able to sell your products in the entire world:

Your customers will be able to buy your products from your website by simply clicking the link:

Work a bit more on the design, add more products, and you'll be ready to make your first dollar online!

Check Out 24+ More Demos

Hope you enjoyed it! If you'd like to see more examples of what you can do with Rowy, you can visit this link: https://demo.rowy.io/tables. There are 24 demos and examples available, including using Replicate API for face restoration, Stable Diffusion for image generation, and GPT-3 for text-to-speech. If you have any questions about building something with Rowy, don't hesitate to reach out to us. We are happy to assist you!

Share this post