---
title: "How to set up the home page of your app | eCommerce App Tutorials - GoodBarber"
description: "Hello and welcome to your GoodBarber back office\r \r Today we will learn how to set up the Home of your shop\r \r The Home is the first page your users will see when opening your app\r \r On this page, yo…"
canonical_url: "https://www.goodbarber.com/tutorials/shop/design/how-to-set-up-the-home-page-of-your-app/"
lang: en
---

# How to set up the home page of your app | eCommerce App Tutorials - GoodBarber

[Back](https://www.goodbarber.com/tutorials/shop/)

# How to set up the home page of your app

Hello and welcome to your GoodBarber back office

Today we will learn how to set up the Home of your shop

The Home is the first page your users will see when opening your app

On this page, you can find a secondary navigation to complement your main navigation

Let’s start by going to the menu Content & Design, and then Home

Your Home consists of different modules called widgets
There are different types of widgets
Product list
List of collection
Search
Promo banner
Newsletter
Link
Legal notices
Social media
Separators
HTML

Please beware, most of the widgets are shortcuts to existing sections. They will only appear if you’ve already added the section to your shop. For exemple if you don’t have a Search section in your shop, the search widget will ot be available.

You can find the videos on each section in the info bar

To start let’s add the product list widget
I select the section or sections related

Widget added
I’m now going to edit it

I select a template

Title display and all the design elements

The products displayed here will be sorted by tags (the Link to tags’ video is in the info bar)
In this case, i will only display light color products

All done
I select the number of products to display
The margins

The thumbnail format

And voila

I will now create the Search widget
Same principle. Adding then editing the widget

Ok, see the widget is there but I prefer to have it at the top of the page

Simply drag it to the desired position, like this

Now a Promo banner widget

More product list widgets

A newsletter widget to create my email base

A social media widget to display all my links

And finally the legal notices

Voila, all done

The home gives you loads of possibilities, especially with the links widgets, to display links to your different sections but also actions (calls, emails, text) and even external links. And the HTML widget that you can totally customize.

Let me show you the final version of my Home

It’s time for your to your Home!

See you very soon for another tutorial!

## Related videos

[DesignHow to set up your navigation menu](/tutorials/shop/design/how-to-set-up-your-navigation-menu/)

![How to set up your navigation menu](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

[DesignHow to customize the icons of the menu](/tutorials/shop/design/how-to-customize-the-icons-of-the-menu/)

![How to customize the icons of the menu](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[DesignHow to customize your splashscreen](/tutorials/shop/design/how-to-customize-your-splashscreen/)

![How to customize your splashscreen](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DesignHow to set up the header of your shop](/tutorials/shop/design/how-to-set-up-the-header-of-your-shop/)

![How to set up the header of your shop](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[DesignHow to set up the global style of your shop](/tutorials/shop/design/how-to-set-up-the-global-style-of-your-shop/)

![How to set up the global style of your shop](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DesignHow to customize the main icons of your shop](/tutorials/shop/design/how-to-customize-the-main-icons-of-your-shop/)

![How to customize the main icons of your shop](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DesignHow to design the sections of your shop](/tutorials/shop/design/how-to-design-the-sections-of-your-shop/)

![How to design the sections of your shop](https://portal.ww-cdn.com/portal_static/images/videos_shop18.471e5731e7e3.jpg)

[DesignHow to unhook the design of a section](/tutorials/shop/design/how-to-unhook-the-design-of-a-section/)

![How to unhook the design of a section](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DesignHow to choose your header size ?](/tutorials/shop/design/how-to-choose-your-header-size/)

![How to choose your header size ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)