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
Promo banner
Legal notices
Social media 

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