TUTORIAL – Create Static Collection Pages

In this tutorial, we’ll explain how to create static collection pages, but first, let’s explain what a collection page is.

What is a Collection Page?

Very often, you have a list of items you want to display in a list on one page, for example real estate listings, job listings, available rental cars.

You want users to be able to click on an item in the list and redirect them to a page with more info on that specific item.

That’s a Collection Page, i.e. a page with the information from an individual item in a collection.

What is a Static Collection Page?

A Static Collection Page is a Collection Page with a static URL, i.e. a URL that doesn’t change.

Static collection pages are created every time you sync a Static Collection in WeWeb. This allows WeWeb to pre-render these pages when a user – or a search engine robot– visits it.

This is important because it means Static Collection Pages rank well in SEO.

What are the Pre-Requisites to Create a Static Collection Page?

1- You need to have setup a Static Collection

If you’re working with a dynamic or cached collection, you won’t be able to create a static collection page in WeWeb.

2- You need to have bound your Static Collection to a Collection List on the page where you want to display all the items from your collection

How to Create a Static Collection Page

Once you’ve created a Static Collection and bound that collection to a Collection List on a page, you’ll want to create a Static Collection Page.

Remember, you’ll only be able to bind this Static Collection Page to a Static Collection. If you’re working with Dynamic or Cached Collections, these will not appear in the “Select source collection” popup.

How to Display Data from a Collection Item on a Collection Page

Once you’re on your Collection Page, make sure that Collection Page includes the elements you need to bind the fields you want to display.

Sections

In the example below, we have 3 sections:

  1. Simple navigation, i.e. our navbar
  2. Listing, i.e. where we include the info from our listing
  3. Footer - Hello!, i.e. our footer

Note that in WeWeb, you add elements in sections. If you don’t have sections, you can’t add elements. This is how you would do in web development: add a section and nest elements inside that section.

In WeWeb, you can identify sections in the navigator and on the page with this little icon:
section icon in weweb

Elements

In the Listing section, we added 3 elements:

  1. a heading, to display the name of the listing
  2. an image, to display a photo of the listing
  3. a rich text element, to display more information about the listing

Bind Data to Elements to Display the Data from your Static Collection

To display data from your Collection on a WeWeb Collection Page, you need to bind Collection fields to Elements on the page.

In the example below, we bound the image element in WeWeb to an image field in Airtable:

You can do the same with the heading and rich text elements except you would bind those to text and rich text fields in Airtable.

What’s important, whether you’re using Airtable or another backend like Xano, is that the field type in WeWeb should match the field type in your backend.

In WeWeb, you can identify “bindable” fields in the in the right sidebar with this little icon:

When you see a purple plug in the navigator or on the page or a purple dot in the right sidebar, that means the element or field is bound to something:

Make sure everything is working well for each individual item

On the Collection Page, you can view how it looks for each item in your collection by clicking on the dropdown menu in the top navbar:

Now that you have a nice Collection Page for each individual item, you’ll want to make sure users can access it when they click on an item on your page with the Collection List.

How to Redirect Users to the Individual Collection Item

Back on our “Properties for sale” page with our Collection List listing all real estate listings, we’re going to link the repeated Flexbox element to our “Real estate listing” Collection Page.

Note that we chose to link the entire flexbox but we could have decided to add the link to the “View listings” text instead of the entire flexbox.

That’s really up to you to decide if you’d rather your user have to click on a specific text element or on the entire flexbox to access the page :slight_smile:

I have a problem with the links to the item when the collection is filtered or sorted.

The links on the first displayed item is always pointing to the first item in the unsorted and unfilterd collection.

In your exemple, that means that if you change the binding for the Collection in step 2 to add a filter to only display items where name contains “Beach”, the first item would be the “Modern Beach House” but clicking on its “view lsiting” link will open the collection page with the deails of the “Rustic Brooklyn Brownstone”.

1 Like

Hi @ThomasB :wave:

Yes! With the way WeWeb works at the moment, that happens when the filters are set on the page and not at collection level.

We’re working on a fix that should be live at the end of this week :slight_smile:

1 Like