Building a Single Product Website with Airtable

The Silesian Case

Photo by Hunter Harritt on Unsplash.

Homepage

For homepages with a lot of content and media, we recommend putting the assets into one Airtable table and grouping them with a single select field. Then you can add the blocks you want to use, style them to appear the way you want – and filter them to only show the content for that section of the page.

Below is an example of how the Airtable structure would look. Each group of images / text is assigned to a section of the page eg. 'features', 'instructions'

How its made…

Airconnex Hero

The image / header is done with the Hero block.

Airconnex Loop(s)

Any parts of the page that have multiple items in a group are done using the Loop block with a filter to show only the relevant group of records.

The section with icons is done using fontawesome icons (html) which you can map to the image field in the loop block (the system will recognize the icons and display them).

Airconnex Image

The youtube embed is done with an Image block, just by pasting the URL of the youtube video into the field. The system will recognize a Youtube URL and display it as an embedded video.

Product Page

As this website only has one product, there's a dedicated page which is linked from the main navigation menu as the 'Shop' page. The page just has an image gallery and order form.

How its made…

Layout > Columns

As with most product pages, we use a layout block to make two columns

Airconnex Loop

The column on the left has a gallery of product images. This is done using a loop block, omitting any values except the image so that it appears just as a plain image gallery.

Airconnex Form

In some cases we would use an Airconnex Text block, but in this situation we have added all the text into the form 'introduction' section so that then entire right column is an order form.

The form has a quantity field and all the customer details needed to complete an order. Its effectively a one-step checkout.

Once the form is submitted, a record will be added to the 'Orders' table and the user will be redirected to a dynamic page which is connected to their new order.

Order & Payment

The order / payment page is a dynamic page, with the record_id of the newly placed order in the URL. We then added a block of text summarizing the order, and a payment button. Once the payment is made we will use Zapier to trigger an update to the order status.

How its made…

Airconnex Text Block

The order summary is made by adding the dynamic page values to a text block and applying some basic formatting.

Airconnex Payment Block

The payment block can be configured using the dynamic page values (same as the order summary) as well as some values specific to each payment type. The customer will see a button which is preconfigured with values and when clicked, will take the to a prefilled payment page for the payment processer (paypal, google, stripe etc)