Building a Datafeed (CSV) Website with Airtable

Jewels by Sarah

Photo by Hunter Harritt on Unsplash.

Homepage

The goal of this project was to get the category and product pages indexed (by Google) quickly and with minimum effort, then see if there's any organic traffic before proceeding.

We were able to get the whole website (300 pages) made in about 10 minutes.

The product data was downloaded from an affiliate merchant as a CSV file and imported into Airtable… then sorted into Categories using linked fields.

How its made…

Airconnex Loop

To show the list of categories we just used the loop block, connected to the Categories table. Each category in the loop links to a dynamic page for the category.

Category Page

Each category in the loop on the homepage links to a dynamic page for the Category. On this page we show the products in the category. To do this we add another loop (of the Products table) which is filtered to only show items linked to the Category. Each product will also be linked to its own dynamic page.

How its made…

Airconnex Hero

For the hero text we combine the dynamic value (category name) with some static values to make a search relevant term. Although this is a very bare example it can easily be expanded and enriched in Airtable over time to pad out the content for more appeal to search engines.

Airconnex Loop

The loop is filtered to make sure we are only seeing the products linked to this category in Airtable. Each product also links to its own product (dynamic) page.

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 its 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.