1

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

2

Datafeed (CSV) Website | 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’s it 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.

3

Travel Blog | Homepage

As website is heavily focussed on travel articles and not much else – hey have a pretty massive amount of content to publish and the homepage loop is reserved just for the latest posts.

How’s it made?

Airconnex Hero

We used a hero image at the top of the page to really emphasize what the site is about and get the visitor visually engaged. Its also a chance to prominently display the 'write for us' link that allows writers to contribute and keeps the site able to continuously churn out articles.

For the background image, we used the Unsplash Library button in Airconnex to find royalty free travel images.

Airconnex Loop

Below the fold is just a pretty big loop of the most recent articles. This is a pretty standard loop style with the image above. Notably we used the excerpt option on the text to make all the rows the same height (creating a grid effect).

The search option is also switched on which allows visitors to search for articles containing specific keywords, and a load more button at the bottom of the loops will let visitors browse through past articles.

4

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

5

Blogging System | Homepage

After logging in, the writer can see the list of publishers available on our network. The writer can choose which publisher they want to submit an article for by just clicking on the publisher. This is an example of how loops can be used to make multi-step forms. So rather than adding a field to the 'new article' form where they choose which publisher, we ask them to make that choice first and then take them to a dynamic page for the publisher.

How’s it made?

Airconnex Hero

As usual we have included an Airconnex Hero block to give a very clear prompt to the user on what to do… and to make the page more colorful and appealing.

Airconnex Loop Block

The loop is derived from a table of publishers in Airtable.

Each publisher links to a dynamic page for the publisher. We chose to use record id for the dynamic value as it's the easiest to maintain (the values are always unique and never change) and we dont need pretty urls because the whole site is behind a login anyway.

6

Training Course | Homepage

The homepage for this training course is just a pure listing of chapters. The entire course is in one table, and each chapter is a Single Select field. We then used the Kanban view in Airtable to easily sort the various pieces of information into a logical order and heirarchy.

How’s it made?

Airconnex Loop

We used an Airconnex Loop to show the Kanban chapters, with each one linking to a dynamic page for the chapter. Importantly, unlike many other situations with the Kanban, the chapters (categories) and the content (pages) are in the same Airtable. To list each chapter we just nominated one piece of content (usually the first one) to be the 'featured' item and filtered the loop to only show those ones.

The result is a loop with one piece of content representing each column in the kanban.

7

Multivendor Marketplace | Homepage

How’s it made?

This is a test of the front end editor.