In this video tutorial, you'll learn how to setup a basic Product Listing app.

Add a page within Frontly by pressing the New Page button on the top right of your home page.

Give your page a name, by replacing the “New Page” text at the top left of the page with a title of your choosing.

Click General in the sidebar, and set your page route. The Route name is generally the same as the page name, and begins with a backslash.

In order to bring in data from your existing API when the dashboard is opened, select the Actions tab of the sidebar, and click New Item+, then HTTP Request.

Give your API a name using the field in the top left of the API popup, replacing the text Action 1.

Paste your API URL into the Endpoint URL field, and click Fetch Remote Data. Exit the Actions popup by clicking the X in the top right.

Now back on the main page, click the Add Sections button. This can also be done by clicking Content>New Item+ within the config panel.

Select the Grid module. This module displays items from your database in a grid layout, and can display images, numbers, and text. The result will be a grid layout approximating an online storefront. This layout will dynamically respond to page size, ensuring your content always looks great.

Click the blue “Select Source” button in the sidebar. From here you can pull data from your own database using an HTTP request using your API server endpoint.

Next we need to map our data. On the left are fields for primary text, description, image, and more. Select Primary Text, and Frontly will open an interface showing the data fields within your API.

Simply pick the field that matches the title or name field, and it will be pulled into Frontly as the primary label for each grid item. Press the blue save button on the sidebar to confirm.

Repeat the process to map the rest of the data fields you want to display within the grid module.

By hovering over each grid item in the sidebar, a grey edit icon will appear on the right side of the field name. Clicking this icon will allow you to alter the properties of this field within the grid, allowing you to format the field properties.

Editable properties include displaying the data as a numerical value, an image, currency, and date, as well as text formatting options.


Once you've successfully mapped your data within the grid, you can assign actions to items with. This would allow you to do things like direct the user to a details page for each grid item. Click here to learn how to map Actions within Frontly.

With Frontly, you can even create pages using a dynamic variable, allowing you to generate a unique page for each item in your database by creating one template. Click here to learn how to use dynamic variables with Frontly.

Did this answer your question?