You are here:   Table of contents / Design The App / Navigation Menu & Home Page

Widgets available on the Home section

Your home page  is the first page displayed on your app after the launching screen.
From this page, you can automatically highlight content from other pages, add calls-to-action, insert useful links, and more.

You build your Home section with widgets. This online help will describe the different kind of widgets available for your GoodBarber apps.

You can add up to 20 widgets on your home page.

To add a widget to your home page:
1. Go to the menu Content & Design  > Design > 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, 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. Choose whether to enable the scrolling
3. Add your own HTML code*
4. Click "Save"

*GoodBarber's technical support team doesn’t manage the resolution of issues related to external code. 
GoodBarber's team doesn't debug any code that it did not code itself, including embed codes or iframe.


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)