1

Ecommerce Website | 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’s it 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.

2

| Product Page

How’s it made?

x

3

| Product Page

How’s it made?

x

4

| Product Page

How’s it made?

x

5

Datafeed (CSV) Website | Product Page

The product page is another 'dynamic' page which is connected to a specific item in the Products table. All the data in the record (in Airtable) is available on the page to be used as dynamic values.

How’s it made?

Layout > Columns

We used a layout block to create two columns on the page, then create the rest of the blocks within those columns.

Airconnex Image Block

The image block is used to show the product image. The image url is a dynamic value coming from Airtable.

Airconnex Text Block

The text block is used to add the product details, price etc. The formatting is done using a rich text editor and dynamic values can be copy / pasted wherever necessary.

Airconnex Form Block

Whent the form is submitted, it will add a record to an Orders table in Airtable.

There are multiple values being passed with the form but the only visible field (for the user) is the Quantity. Notably, the product is being added to the Orders table as a linked field.

6

Single Product Website | 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’s it 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.