Your home page  is the first screen displayed in your app after the launch screen.

It is a key page that allows you to highlight important content from your app, guide your users to key sections, add call-to-action buttons, display useful links, show ads, collect email addresses, and more.

The Home page is built using widgets. Each widget corresponds to a type of content or feature that you can display on this page.
You can add, remove, and reorder widgets to organize your Home page the way you want.
Depending on the extensions you have enabled in your GoodBarber back office, additional widgets may be available.

To add a widget to your home page:
1. Go to the menu My App > Structure > Home
2. Click the green "+" button in the right column
3. Select which type of widget you want


1

Product list widget

This widget displays the products included in your collections.

Source tab
When you add this widget, you select from your existing collections the collection from which the products will be displayed in your widget. 

Settings tab
This tab lists all design settings available for this widget (widget template, header, content zone and options)
This is where you select your colors, fonts, number of lines of products displayed, etc.


2

List of collections widget

This widget displays links to your collections pages.
When you add this widget, you select from your existing collections which collections will have links displayed in your widget. 


3

Promo banner widget

This widget allows you to promote your shop to highlight, for instance, an ongoing discount.
1. Select a background color or background image for your widget
2. Set a title and its design options: color, font
3. Set the action button of your widget: title, color, where it points to (content you wish to promote)
4. Set the global options


4

Search widget

This widget enables the search feature  on your home page and redirects your users to the result of your search section*
Only 1 Search widget can be added on the home page. 

*In order to be able to set a Search widget, you must first set a Search section.


5

This widget displays shortcuts to your app's social network accounts: Facebook, X (Twitter), LinkedIn, YouTube, Dailymotion, Instagram, Pinterest, Flickr, Tumblr, Dribbble and others.
1. Select the social network you wish to create a link to
2. Repeat the operation in this widget for each social network
3. Set the header and global options of the widget


6

Newsletter widget

This widget allows you to collect emails from your users.

1. Design tab
- Set the header, content zone, and global options of the widget.
- Set a link to your Terms of Use using the drop-down menu (1)

2. Subscribers tab
Click export data to export the list in a .csv file

3. Go to the menu Settings > App Text
Search for GB_WIDGET_NEWSLETTER_TOS_TEXT
Edit the text  to let your final users know why you are collecting their email (what you will do with their email) and ask them to read your Terms of Use. (1)
Warning: Do not edit the token [TOS]

(1)Required by the GDPR. The GDPR applies to all entities based in an EU country that process personal data, as well as all entities worldwide that process personal data belonging to EU residents.


7

This widget allows you to:
- Create links to internal pages of your app or external links on your home page
- Create action from your app (call, send an SMS or email)
- Open the URL of an app in the stores

1. Widget template, select the template of your widget

2. Links
- Click "add a link" to create your link
- Select the type of link (Section, Action, External link, an application in the stores)
- Depending on your template, set the different options: add an image, title and description, icon, display a button, etc.

3. General settings, depending on your template, it enables you to set the margins, widget background color, fonts, action button, effect on the images, etc.


8

Separator widget

This widget displays a separator between other widgets.

1. Set its height in pixels and color of the widget
2. Set the global options of the widget


9

HTML widget

This widget allows you to display your own HTML code.

1. Fill in the zone height of the widget
2. Enable or disable scrolling
3. Add your HTML code*
4. Click "Save"

Please note that the widget height is not responsive. The same height value, in pixels, is applied to both mobile and desktop. In other words, the displayed height always matches the exact number of pixels defined in the widget settings.

*GoodBarber Technical Support does not handle issues related to external code. The team does not debug custom code, including embedded code or iframe code, that was not created by GoodBarber.


10

This widget displays links to your terms and conditions.
1. Write your terms and condition in the menu Settings > Shop general settings > Check out process
2. Set the title for your links and their display (color, fonts, and margin)


More articles