Service Marketplace Template

This template helps you create a service marketplace site like Fiverr. Below is how the Airtable fields are mapped and displayed in the site.

Airtable fields mapped and displayed in a card.


Airtable fields mapped and displayed in a modal

Field descriptions

FieldDescription
TitleIdentifies the record
SubtitleThe text that immediately follows the title. This is generally used to provide extra information about the record
DescriptionThis is used as the main text body of the modal
AvatarThe image of the user providing the service
GalleryThis is used to populate the image carousel in both the main page and the modal. You can use this to showcase some works done by the service provider.
PriceThe price for the service.
Call To Action URLThis is used for the button inside the modal for a call to action like a link to a booking/enquiry form.
Filter 1 & 2Determines what the user can filter on. The filter options that populate the tags/fields are added in the Filters table




How to add a record to the Service Marketplace Template

For this example, we will be adding Daredevil's services to the list.

  1. Open up your Airtable base and select the site-content table

  2. Add a new record by selecting the empty field and add data into the relevant fields

    • Title: daredevil
    • Subtitle: New York City
    • Short Description: All things legal
    • Description: "About this gig I will fight for justice and stop at nothing! The legal system is blind but not me!"
    • Call To Action URL: https://airtable.com/shraXbNZsBt1Nefiy
  3. Lets upload an avatar for Matt. Select the Avatar field and click the +

  4. A modal will appear. Drag and drop the image into the modal and hit Upload

  5. Now, we will add a couple of pictures to the gallery. Select the Gallery field and click the + button

  6. Drag and drop the pictures into the modal and hit Upload

  7. It seems like Legal Services is not yet part of the list of filter options. We can add that by going into the Filters table, selecting Filter 1 and click the + button.

  8. Enter LegalServices into the text box that appears and click Create a new option named Legal Services

  9. For users to be able properly filter the record by service type, we need to add the Legal Services filter to its Filter 1 field.

    Add the filter to record

Filter is now added to the record


  1. Now that the record is all set up in Airtable, head back to your Pory.io and refresh. You should see the new record!

    New record with filter selected


    Modal of new record