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 HeroThe 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 ImageThe 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.
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 > 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.
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.