Configure directory component for Real Estate Directory template_new
In this guide, we'll walk you through step by step on how to set up the directory component used in Real Estate Directory template and components.
Use spreadsheets with up to 2500 rows. Otherwise the page loading speed will critically decrease, potentially leading to complete freezing.
Table of contents:
Create your spreadsheet
Publish and get a link to the spreadsheet
Replace the link
Add dynamic data source URL to the page
Additional information
Make a copy of the spreadsheet available at the following link:
https://docs.google.com/spreadsheets/d/1Pb2HkwdHcU0k6MvItHu1byQ4M2037hRQFUZBXU9xAq0
Remember: Each column of information in your Google spreadsheet should have a name to avoid errors on the site.
Publish your new spreadsheet as a .csv file and copy the resulting link:
Go to the Directory component settings:
and replace the link in the CMS URL section:
If the template you've chosen consists of multiple pages, you'll need to update the links to the spreadsheet in the dynamic component on each page.
We have a detailed guide and video Dynamic data from Google Sheets spreadsheet that walks you through setting up dynamic pages step by step.
The template includes two dynamic pages: /apartment and /countries
To connect them to your Google Sheet:
In the left sidebar, locate these pages and click the three dots next to each one, then select Settings.
In the Page Settings window that opens, paste your Google Sheet link in .csv format (which we previously added for the dynamic component) into the Data source URL field.
You can now start editing your Google Drive spreadsheet by adding your information.
All the changes you make will be automatically updated in the component on your website within a few minutes after the modifications are made.
Information on the item card
Description of columns in the standard Sheet
Component settings
Title and Text - provide purely informational content.
URL - the complete link to the website to which the user will be redirected after clicking the card.
In spreadsheet the link should start with https://
Category - determines in which tab of the switcher the card will be displayed.
You can add categories to the spreadsheet while preserving punctuation, i.e., by adding a symbol " ; " after the category name.
Rank - determines the card's position when displayed on the page - the higher the rating, the higher the card will appear.
imgUrl - the direct link to the image should include the file extension at the end, such as .jpg, .png, etc.
How to get a direct link to an image
If you are using a component without images, you can leave this field empty.
Search & Filters
Search placeholder - text for the search bar. Use {{amount}} to display the total number of items in the directory. Leave empty to hide the search bar.
Filters
- Source column - allows you to select a column from Google Sheets that will be used for filtering.
- Label - allows you to specify the name of the filter.
- Sorting - indicates the order of sorting.
- Multiselect - allows you to choose multiple filters at the same time.
- Hide filters - allows you to hide specific filter.
Items
Item limit - sets the maximum number of items to display initially. Additional items will be accessible via a "Show all" button.
Button text - the text displayed on the button that reveals all items when clicked. Leave empty to hide the button.
Text for empty state - text displayed when no items are matching search or filters.
Sort items - specify the column to sort the items by. Select ascending order to display the items from A to Z or from 0 to 9. Select descending order to display the items from Z to A or from 9 to 0.
Items on click - specify which URLs will be opened when you click on the directory items. Choose the field in your CMS that contains the URL. Add a prefix to open a dynamic page (e.g. /tools/unicornplatform).
Use spreadsheets with up to 2500 rows. Otherwise the page loading speed will critically decrease, potentially leading to complete freezing.
Table of contents:
Configure directory component
Create your spreadsheet
Publish and get a link to the spreadsheet
Replace the link
Configure dynamic page
Add dynamic data source URL to the page
Additional information
1. Create your spreadsheet
Make a copy of the spreadsheet available at the following link:
https://docs.google.com/spreadsheets/d/1Pb2HkwdHcU0k6MvItHu1byQ4M2037hRQFUZBXU9xAq0
Remember: Each column of information in your Google spreadsheet should have a name to avoid errors on the site.
2. Get a link to the spreadsheet
Publish your new spreadsheet as a .csv file and copy the resulting link:
3. Replace the link
Go to the Directory component settings:
and replace the link in the CMS URL section:
If the template you've chosen consists of multiple pages, you'll need to update the links to the spreadsheet in the dynamic component on each page.
At this stage, the setup of the dynamic component is complete and we can move on to configuring the dynamic page.
We have a detailed guide and video Dynamic data from Google Sheets spreadsheet that walks you through setting up dynamic pages step by step.
4. Add dynamic data source URL
The template includes two dynamic pages: /apartment and /countries
To connect them to your Google Sheet:
In the left sidebar, locate these pages and click the three dots next to each one, then select Settings.
In the Page Settings window that opens, paste your Google Sheet link in .csv format (which we previously added for the dynamic component) into the Data source URL field.
🏁 Setup complete!
You can now start editing your Google Drive spreadsheet by adding your information.
All the changes you make will be automatically updated in the component on your website within a few minutes after the modifications are made.
Additional information
Information on the item card
Description of columns in the standard Sheet
Component settings
The spreadsheet contains the following information
Title and Text - provide purely informational content.
URL - the complete link to the website to which the user will be redirected after clicking the card.
In spreadsheet the link should start with https://
Category - determines in which tab of the switcher the card will be displayed.
You can add categories to the spreadsheet while preserving punctuation, i.e., by adding a symbol " ; " after the category name.
Rank - determines the card's position when displayed on the page - the higher the rating, the higher the card will appear.
imgUrl - the direct link to the image should include the file extension at the end, such as .jpg, .png, etc.
How to get a direct link to an image
If you are using a component without images, you can leave this field empty.
Component settings
Search & Filters
Search placeholder - text for the search bar. Use {{amount}} to display the total number of items in the directory. Leave empty to hide the search bar.
Filters
- Source column - allows you to select a column from Google Sheets that will be used for filtering.
- Label - allows you to specify the name of the filter.
- Sorting - indicates the order of sorting.
- Multiselect - allows you to choose multiple filters at the same time.
- Hide filters - allows you to hide specific filter.
Items
Item limit - sets the maximum number of items to display initially. Additional items will be accessible via a "Show all" button.
Button text - the text displayed on the button that reveals all items when clicked. Leave empty to hide the button.
Text for empty state - text displayed when no items are matching search or filters.
Sort items - specify the column to sort the items by. Select ascending order to display the items from A to Z or from 0 to 9. Select descending order to display the items from Z to A or from 9 to 0.
Items on click - specify which URLs will be opened when you click on the directory items. Choose the field in your CMS that contains the URL. Add a prefix to open a dynamic page (e.g. /tools/unicornplatform).
Updated on: 18/04/2025
Thank you!