Header (eCommerce App)

The header (logo and title) is the upper part of the app that is always visible and accessible in all sections.

The header serves 4 purposes :

1. to display your app's identity
   
2. to give the section a title
   
3. to display shortcuts
   
4. to navigate in the app

To set up your Header:

1. Go to the menu Content & design > Content > Sections

2. Click "Header " from the right panel

To access the advanced settings described below, click the button Advanced at the top right corner of the panel.

1. Header Height

General settings of your header

Select your header height between 3 templates:

- Small*: displays the title or the logo image

- Medium: displays the title or the logo image (only available for sections in the main navigation of the right panel of your back office)

- Big: displays the title or the logo image + the short description (only available for sections in the main navigation  of the right panel of your back office)

* Other sections of the right panel of your back office + the sections listed below will always use a Small header template:

- Bag views (Bag + Checkout + Confirmation page)

- Profile + all details

- All content details

- Not Found

- Login Box

- TabBar other

- Comments list (Blog)

- Post comments (Blog)

- Search section

- Any Minimal templates

- Settings

- TOS Sections

HTML sections always use a Small header template.

2. Logo

1. The central part of the header allows you to give a title to your app or to a section. This title can be displayed in the form of text or a logo (image). 

- Text: click the text to edit it. 

- Logo: click the "Logo" button to add an image* in the place of text.

*Respect the minimum size requirements of 800 x 200 px.

2. Select the color and font of your title

3. Alignment: Position your logo or title to the left or at the center of the header.

Note: in the Checkout, Bag, Add address, Add card, and change password pages, the logo/title will always be centered.

3. Advanced Settings - Short Description

In the Logo menu, if you selected a Big template, you have the possibility to set a short description that is shown in your header above the logo of your app.

Fill in the short description of your general header and set the text font and color.

4. Advanced Settings - Options for the Title

In the Logo menu, you can set the display options for the title. This option defines the header display strategy.

1. Select "Logo only" to always display the logo set in your general header on all your app pages.

or

2. Select "Section title & description" (Big template) or "Section title" (Small and Medium template): Update your header title depending on the page of your app that is displayed, to use automatically the title of the section involved.

To set the description of a section if you're using a Big template:

- Go to the menu Content & Design > Sections

- Open the settings of the section involved

Note: In the main navigation of your app, the first section of your list will always use the title/description of the general header.

5. Advanced Settings - Menu & Back Icons

The left part of the header is used to display the navigation actions.

Set the design of the "Menu" button (icon + color).

The navigation menus Swipe, Little Swipe, Grid, and Slate provide a menu button displayed in the header and allow to access the content.

In the navigation menu TabBar this button will not appear.

Set the design of the "Back" button (icon + color)

This button is used to go back to previous sections inside your app.

6. Advanced Settings - Header Background

Select the colors of your header background.
Set a background image (1242 x 192 px) for your header background (available for Small templates only).

7. Advanced Settings - Scroll Effect

When you scroll down your app pages, you can set different effects for your header.

No effect: available for Small, Medium, and Big templates.
Hiding: available for Small, Medium, and Big templates; the header is hidden when you scroll down the page
Resize: available for Medium and Big templates; the header becomes smaller when you scroll down the page

8. Advanced Settings - Actions in the Header

A shortcut to the cart is automatically added on the right side of the header.

1. Click it to edit its color and icon.

2. You can display a title for the shortcut for iPad and desktop. And display the shortcut in the form of a button for desktop only.

3. Set the design of the bullet that will be displayed after products are added to the cart (color of the number and of the background bullet).

To add a new action, click the green + icon and select in the link drop-down menu to which page your users will be redirected when they click this action.

Note: Only 2 shortcuts are displayed in the header, if you add extra shortcuts, they will be accessible from the second shortcut (additional menu) for your users.

• Related Articles

• Design the Categories of your Sections (eCommerce App)

  Depending on the type of content you have on your app, you can add categories to your CMS content section or filter your external content when using an external source (Youtube, WordPress, etc.). Please refer to this online help for more ...

• Section Design (eCommerce App)

  1. How to modify the design of your sections By default, your shop has a global style  applied to all your app's pages. For more info, please refer to this online help. You can modify the default design of each section to fit the image of your brand. ...

• Section Design

  By default, your application has a global style applied to all your app's pages. To modify colors, fonts, backgrounds, formats, etc... of each element of your application: 1. Go to the menu Design & Structure > Structure > Sections, which will show ...

• Header

  The header (Logo and Title) is the upper part of the app that is always visible and accessible in all sections. The header serves four purposes : to display your app's identity to give the section a title to display shortcuts  to navigate in the app ...

• Global Style (eCommerce App)

  The Global Style menu manages your app's overall design from one single menu.  Colors, fonts, and effects chosen in this menu are applied to every section of your app. WARNING! Very important: When applying your global style to your app. If you had ...