Uiflow
ChangelogPartners | Freshworks
Search
⌃K
Links

Create a home page layout

To build your store application, start by building the home page layout. This sets up all the major visual elements of your application:

Configure the background and layout settings

Before you start adding components to the page, style your application's background:
  1. 1.
    Open your application and navigate to the Design view.
  2. 2.
    Click on your application's main page to select it.
  3. 3.
    Navigate to the Styles tab, open the Background menu, and click on the colored square to display the Color Picker.
  4. 4.
    Select or enter a background color for your application. For this tutorial, the color is set to rgba(246,242,231,1).
  5. 5.
    Open the Layout menu and configure the following settings:
    • Mode: Column
    • Alignment: Top Center
    • Spacing: 10
    This ensures any components placed in your application are vertically arranged, center aligned, and evenly spaced out.

Create a navigation bar

The navigation bar includes your company logo and tabs for users to switch pages.
To create the navigation bar:

Add product category tabs

To add product category tabs:
  1. 1.
    Drag-and-drop a Container component into the application and name it Navigation Bar. This container holds all the components required for your navigation bar.
  2. 2.
    Select the Navigation Bar and open Styles > Size to configure the following settings:
    • Max W: 1150
    • Height: Hug contents
    This ensures your navigation menu does not become distorted when users enlarge the window.
  3. 3.
    Open the Layout menu and configure the following settings:
    • Mode: Row
    • Alignment: Center
    This ensures the items in your navigation bar appear side-by-side and are centered in the navigation bar space.
  4. 4.
    Open the Padding menu and set it to 20. This adds space between the component border and content in your navigation bar.
  5. 5.
    Open the Libraries panel and drag-and-drop four Text components into Navigation Bar.
    Note: When you add the onClick event to Text components, they function like buttons. Button components come with extra formatting (e.g., background, borders, etc.) so it may take more effort to configure them for your app.
  6. 6.
    Select all the Text components and open Styles > Padding.
  7. 7.
    Set Padding to 10.
  8. 8.
    Name the text components and text labels to reflect your app's product categories. In this example, the product categories are Laptops, Jewelry, Men's Clothing, and Women's Clothing.
  9. 9.
    Select Laptops, Jewelry, Men's Clothing, and Women's Clothing.
  10. 10.
    Right-click the components and select Wrap in a container. Name the new container Tabs.
  11. 11.
    Select Tabs and open Styles > Layout.
  12. 12.
    Set Mode to Row.
  13. 13.
    Open the Padding menu and set the right side to 200. This creates space to the right of your navigation tabs and any other components you add to the navigation bar.
  14. 14.
    Open the Libraries panel and drag-and-drop a Button component into Navigation Bar.
  15. 15.
    Change the Button name to Login and change the text to Login.
  16. 16.
    (Optional) Select Login and open the Styles tab to set the background color to rgba(242,193,72,1).
  17. 17.
    (Optional) Select the text components and button in your navigation bar and set the font to Rubik.
To add a store logo:
  1. 1.
    Open the Libraries panel and drag-and-drop a Text component into Navigation Bar. This component serves as your text logo.
  2. 2.
    Name the component Logo and change the text to your store name. The store name in this example is everything co..
  3. 3.
    Select Logo and open Styles > Padding to add space between the logo and the surrounding components. In this tutorial, we add 40 to the right side.
  4. 4.
    To make the text look more like a logo, select Logo and open Styles > Font Styles. Configure the following settings:
    • Color: #131313
    • Family: Rubik
    • Size: 24
    • Variant: 300
Your app should look similar to this:

Create a product tile layout

To individually display each product, design a basic layout for the tiles:
  1. 1.
    Navigate to the Design view.
  2. 2.
    Drag-and-drop a Container component into the application under Navigation Bar and name it Product Tiles. This container holds all the components required to create individual product tiles.
  3. 3.
    Select Product Tiles and open the Styles tab.
  4. 4.
    Open the Size menu and set Max W to 1150.
  5. 5.
    Open the Layout menu and configure the following settings:
    • Mode: Grid
    • Columns: 3
    • Max Col W: 380
    • Col Spacing: 32
    • Row Spacing: 32
  6. 6.
    Open the Padding menu and set it to 20.
  7. 7.
    Drag-and-drop a Container into Product Tiles.
  8. 8.
    Name the Container Tile Layout.
  9. 9.
    Select Tile Layout and open Styles > Layout to configure the following settings:
    • Alignment: Top center
    • Spacing: 16
  10. 10.
    Set Padding to 34. This ensures there is space between each product tile in your store application.
  11. 11.
    Open the Background menu and set the color to White.
  12. 12.
    Drag-and-drop these components into Tile Layout and name them as follows:
    • Image: Product Image
    • Text: Product Title
    • Text: Product Description
  13. 13.
    Select Product Image and open Styles > Size to set the height to 150. This ensures the product images in each tile are uniform in size.
  14. 14.
    Select Product Title and open Styles > Font Styles to set the following font configurations:
    • Family: Rubik
    • Size: 24
  15. 15.
    Select Product Description and open Styles > Font Styles to set the following font configurations:
    • Family: Rubik
    • Size: 16
Your app should look like similar to this:
Congratulations! You just finished configuring your store application layout. To add and configure additional pages for your app, continue to Build product pages.
Sample application tutorials - Previous
Build a store application
Next
Build product pages
Last modified 13d ago