Building a Ecommerce Website with Airtable

ErgonomicIT

Photo by Hunter Harritt on Unsplash.

Homepage

For this project we were working on a fairly small website niche – Ergonomic Tech products in Australia. As such we didn't need a dedicated category page, or even any real categories. We just listed all the products on the homepage with each one linking to a product page.

The goal was just to get the products in front of the visitors (or google bots) as soon as possible in the heirarchy without requiring too many clicks.

How its made…

Airconnex Hero

Its hard to find nice images to convey ergonomics. So we just used an image of a person using a computer and added colored overlay to make it a bit more stylized. The overlay also helps the text be more legible.

Because the company logo is a dark blue color, it wouldnt be visible when using a transparent navigation – so we used the built in setting to change the page logo to a pure white (only for this page).

Airconnex Loop

The loop block just lists the products which are all in one table. There's a few links to other tables, and lookups to pull data into the products table.

The layout of the loop is done with just a few custom settings :

  • Image Top
  • Rounded Corners
  • White Background
  • Solid Button Link
We added a dynamic link which goes to the product pages with the product name as the dynamic value. When using this method its really important to make sure nobody edits the product name… otherwise the links will change and google will consider the page to have disappeared (you coule lose traffic from google until it finds the new URL).

Product Page

The product page follows a fairly simple format, with the images in the most prominent position for the user, followed by the product title and details and most importantly – and Add to Cart form.

We also included the same loop of products as the homepage, to encourage multiple add-to-carts.

How its made…

To layout this page we used the Layout > Columns block first to add two major columns. Inside the columns we added Airconnex Blocks as follows :

Airconnex Images Block

The image block allows you to place an image, or array of images (if theres multiple attachments in Airtable). The system handles this automatically – we had to do was paste in the dynamic value from the Airconnex Data menu.

Airconnex Text Block

The text block is not only for plain text, but allows you to add formatting and even images. By pasting in the dynamic values we were able to easily add the product maker's logo, product title and other details for all products on a single template.

Airconnex Form Block

We used the Airconnex form block, which adds data to Airtable from the website front end. The form was configured with the Add to Cart setting which opens up some special configuration options.

The add to cart system allows us to add line-items (item x qty) to one table, and simultaneously link that line-item to a cart which is added to another table. The cart is tied to the website visitor, so people can browse the pages and add multiple items to the cart before checking out.

Cart Page

The cart page is linked from the confirmation message when an item is added to the cart. The cart shows a summary of the line-items, quantity and price. There is also a summary at the bottom where data can be mapped from Airtable, so we were able to incorporate any extra calculations needed (eg taxes).

The cart total updates dynamically whenever quantities are changed.

How its made…

There's only one block required for the cart page…

Airconnex Cart Block

This is a highly specialized block that allows items from the 'add to cart' form to be totalled in a linked table in Airtable… including the use of formulae to include tax calculations etc. The summary block at the bottom of the cart updates in realtime whenever items are added or removed.

The values being displayed in the summary are fully customizable and syncronized with Airtable.

When the visitor has finalized their cart, they can proceed to a checkout page.

Login Page

For this project, we have opted to require users to create an account before they can complete checkout (on the checkout page). This is fairly simple to achieve just by adding a login challenge to the checkout page. If they already have an account they can login otherwise there's a link to a Signup page.

This means the user can make multiple orders under a single account and review their past orders and invoices – without having to fill in their details every time.

How its made…

For this section we will just cover how to add the login form on the page – check further on for the actual page content.

Airconnex Login Block

To block public access to a page and require a login, all you need to do is add the login block. Of course, the user / account data is stored in Airtable… so once you have added the block you need to choose which connection has the users data.

Users login using their email address, and an automatically generated password. 

To assist with development, once you have chosen the Airtable connection with your user's data you can choose any user and login to view the site as that user without actually issuing a password.

In this case, our users are website guests and need to be able to create an account themselves (rather than being added by an administrator) so we will add a link to a signup page.

Signup Page

The signup page has a form which adds a record to the table in Airtable where we will store our customer data. We also included a hero image just to make it a bit more appealing.

How its made…

Airconnex Form > Signup

This type of form is fairly standard – it adds a record to whichever connection you choose in the form configuration options. There are a few custom actions needed to make this a proper signup form.

Send Password

We want to encourage the user to come back to complete their order even if they abandon the cart during this process… so we will issue their password via email immediately upon signup. We could also send a custom welcome email using the Actipns > Email section of the form block.

Automatic Login

In some cases you may want to approve users or make sure they're using a valid email before letting them login. As this is a custom checkout, we dont want to delay the process so we will automatically log the user in once they submit the form.

Go to Page (Checkout)

Once the user creates their account and is logged in, of course we dont need to be on the signup page anymore so we redirect them back to the previous page.

Checkout Page

After logging in, or creating an account (and being logged in automatically) the user can complete the checkout form. Again, this is a fairly simple page that takes the user smoothly through the next step in the overall order process – by asking them to confirm the details of this specific order.

How its made…

Airconnex Cart Block

We let the customer review their order and the total before completing the checkout using the form.

Airconnex Form > Update Cart

The Update Cart form type will edit the record that has the cart data…

Link the Cart to the users Account

Before we empty the cart contents (and begin a new cart) we will connect the cart to the user's account. The details of how this works are fairly technical but suffice to say we have to specify which field is linked from the cart to the account.

Empties the cart on the website

Of course this wont remove items from the order itself – just from the website so that the system knows this order is finalized. Any further items added using the Add to Cart forms will be linked to a new Cart record.

Save Order data

Although we asked the customer for their details in the Signup, they may want to specify a different address for certain orders. So instead of simply using those details, we prefill the form for convenicence but add the values to the order record. We also want to preserve the records of each order (if the user changes their account address, we dont want it to change any previous orders).

Redirect to Order Page

After submitting, the user will be taken to a dynamic page with their order details and payment options.

Order & Payment

How its made…

x