Adding Variables to Page Elements

Flezr lets you create multiple variables and lets you map each variable to a specific column in your connected Google Sheet. You can then use these custom variables in every element of your dynamic page - Whether it's the background image, the header, featured text, headings, buttons, footers, or cards etc.

As an example, let's add variables to our template for a dynamic page. We want our dynamically generated page to show the details of a property, depending upon which property was selected from the main property tracker listing page.

1. Create the template for a dynamic page as described in Creating the Template for a Dynamic Page

2. Now, open this page inside Studio just like you edit a normal static page

3. Add any section, for example header, image or a text section.

4. Adding variables is super simple - Just place any name of your choice enclosed inside {{ }} - For example: {{Property Price}} or {{Property Status}} or {{ Property Image}}. This an be ANY name.

5. Use this variable name in any element on your dynamic page. For example, here is our 'Property Detail' page showing the use of variables. The red rectangle is a text section and we have added the variable name in its settings on the right panel as shown in the arrow.

1. Similarly, add other variables to other sections:

1. Next, map these variables to the columns in your Google Sheet. Open the 'Page Panel' from the main Studio. Open the template of your dynamic page. All the variables that you've created will automatically appear here at the bottom.

1. For each variable, select the corresponding column name from which you want it to pull data. Press 'Update Page' button.

2. Press 'Save' in the top menu in Studio to save the changes.

3. Now your Dynamic Page is READY. Test your Dynamic Pages based on your slug URL path and the mapped data column that you configured for the slug.

4. If you make any changes to the sheet, make sure to do a 'Data Sync' from the top-right corner menu and test the changes.