---
title: "How to set up the header of your shop | eCommerce App Tutorials - GoodBarber"
description: "Hello and welcome to your GoodBarber back office\r \r Today we’re going to set up the header or logo and title of your app\r \r This is the upper part of your app, which is always visible and acces…"
canonical_url: "https://www.goodbarber.com/tutorials/shop/design/how-to-set-up-the-header-of-your-shop/"
lang: en
---

# How to set up the header of your shop | eCommerce App Tutorials - GoodBarber

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

# How to set up the header of your shop

Hello and welcome to your GoodBarber back office

Today we’re going to set up the header or logo and title of your app

This is the upper part of your app, which is always visible and accessible in every section

The header has 4 objectives
Display your app identity
Give a title to a section
Display shortcuts
Navigate in the app

So, let’s go to the menu Content and Design > Design > General design

Click on Logo and title

Here I can or add the title in text format or add a logo

I’m really looking for something branded so I;m adding a logo

I already had it ready :)

Voila!

Now I'm selecting the logo alignment : to the right or centered

Easy no?

But you want to do more right? I knew it

You can customize your header even more by activating the menu advanced here

Now i have more options
I can change the color of the font, the separator, add background images
I can also add links to my header
I will add a link to the cart. Click add an action, select the icon and set the color of the shortcut. Perfect

For the PWA, you can choose to the title of the shortcut on desktop and tablets

Then the color of the cart bullet an its done

Last step the other elements of the header:
Meaning the back arrow that will be displayed when your users browse your catalog. Depending on your navigation template, you can have other options. For exemple with the Swipe, you can choose the icon to open the menu
I;m adding the video on the navigation templates in the info bar

Let’s preview

Finished!

Let me show you the final result

You now know how to customize the header of your Shop

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 set up the home page of your app](/tutorials/shop/design/how-to-set-up-the-home-page-of-your-app/)

![How to set up the home page of your app](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.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 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)