Uiflow
ChangelogPartners | Freshworks
Search
⌃K
Links

Build product pages

This page describes how to add and configure pages for each product category in your application.
To build product pages:

Add new pages

To add new pages to your application:
  1. 1.
    Navigate to the Logic view and click on the Explorer panel:
  2. 2.
    Click the add page icon to add new pages to your app.
  3. 3.
    Add one page for every product category in your navigation bar.
  4. 4.
    Name each page to correspond with the product category you want it to display.
    Note: These page names are also used for links, so they should not include any special characters (e.g., !, ', ?).
Now that you have multiple pages in your application, configure the navigation bar links so users can navigate to the different pages of your app:
  1. 1.
    Navigate to the Design view, select the Explorer panel, and ensure the Home page is selected.
  2. 2.
    Navigate to the Logic view.
  3. 3.
    In the Design References panel, expand Home > Navigation Bar > Tabs, and drag-and-drop the Logo reference into the app.
  4. 4.
    Select Logo and open the Actions menu.
  5. 5.
    Add the onClick action to the Logo component.
  6. 6.
    Open the Libraries panel and drag-and-drop a Go to Page component into the logic flow.
  7. 7.
    Select the Go to Page component and open the Actions menu.
  8. 8.
    In the page field, enter /. This directs the Go to Page component to your app's home page.
  9. 9.
    Connect the Logo component's onClick event to Go to Page's call action. When clicked, the logo now directs users to the home page.
  10. 10.
    Repeat steps 2 through 9 for each tab in your application (e.g., Laptops, Jewelry, etc.). Set the page for each Go to Page component as follows:
    • Laptops: /Laptops
    • Jewelry: /Jewelry
    • MenClothing: /MenClothing
    • WomenClothing: /WomenClothing
    Your app's logic should look similar to the following:
  11. 11.
    Repeat steps 1 through 10 for each application page.

Apply layout to the new pages

To build a consistent design for your app and add link functionality to each new page, apply your current Home page layout to your new application pages:
  1. 1.
    Navigate to the Design view and open the page you want to configure.
  2. 2.
    Navigate to the Styles tab and open the Background menu.
  3. 3.
    Select a background color for the page. For this tutorial, the color is rgba(246,242,231,1).
  4. 4.
    Open the Layout menu and configure the following settings:
    • Mode: Column
    • Alignment: Top Center
    • Spacing: 10
    This ensures any components placed in your app are arranged vertically, center aligned, and with a little space between each item.
  5. 5.
    Return to the Home page.
  6. 6.
    In the Layers panel, select and copy the Navigation Bar. This copies all components and logic in your application.
  7. 7.
    Return to the page you want to configure and paste the Navigation Bar.
  8. 8.
    Repeat steps 1-7 for each page you want to configure. This ensures each page has an identical navigation bar with configured links.
  9. 9.
    Preview the application to ensure each page looks as intended and each navigation link works.
Each page in your application should now look similar to this:
Congratulations! You just finished adding and linking your application pages. To add content to your store, continue to Populate your store with an API.
Previous
Create a home page layout
Next
Populate your store with an API
Last modified 1mo ago