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 BlockThe 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 BlockThe 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 BlockWe 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.
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 > ColumnsWe used a layout block to create two columns on the page, then create the rest of the blocks within those columns.
Airconnex Image BlockThe image block is used to show the product image. The image url is a dynamic value coming from Airtable.
Airconnex Text BlockThe 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 BlockWhent 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.
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 > ColumnsAs with most product pages, we use a layout block to make two columns
Airconnex LoopThe 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 FormIn 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.