---
title: "Come impostare il design delle sezioni del tuo negozio | App eCommerce - Tutorial - GoodBarber"
description: "Oggi andremo a impostare l'header o logo e titolo della tua app\r \r Questa è la parte superiore della tua app, che è sempre visibile e accessibile in ogni sezione\r \r L'header ha …"
canonical_url: "https://it.goodbarber.com/tutorials/shop/design/come-impostare-il-design-delle-sezioni-del-tuo-negozio/"
lang: it
---

# Come impostare il design delle sezioni del tuo negozio | App eCommerce - Tutorial - GoodBarber

[Indietro](https://it.goodbarber.com/tutorials/shop/)

# Come impostare il design delle sezioni del tuo negozio

Oggi andremo a impostare l'header o logo e titolo della tua app

Questa è la parte superiore della tua app, che è sempre visibile e accessibile in ogni sezione

L'header ha 4 obiettivi
Mostrare l'identità della tua app
Dare un titolo a una sezione
Visualizzare le scorciatoie
Navigare nell'app

Quindi, andiamo nel menu Contenuto e design > Design > Design > Design generale

Clicca su Logo e titolo

Qui posso aggiungere il titolo in formato testo oppure un logo

Dato che sto cercando qualcosa di brandizzato, aggiungo un logo

L'avevo già pronto :)

Fatto!

Ora seleziono l'allineamento del logo: a destra o centrato

Facile no?

Ma vuoi fare di più, vero? Lo sapevo

Puoi personalizzare ancora di più il tuo header attivando il menu avanzato qui

Ora ho più opzioni
Posso cambiare il colore del carattere, il separatore, aggiungere immagini di sfondo
Posso anche aggiungere dei link alla mia intestazione
Aggiungerò un link al carrello. Clicca su aggiungi un'azione, seleziona l'icona e imposta il colore del collegamento. Perfetto

Per la PWA, è possibile scegliere il titolo del collegamento su desktop e tablet

Poi il colore del carrello e il gioco è fatto

Ultimo passo gli altri elementi dell'header:
Vale a dire la freccia indietro che verrà visualizzata quando i tuoi utenti sfogliano il tuo catalogo. A seconda del tuo modello di navigazione, puoi avere altre opzioni. Per esempio con lo Swipe, puoi scegliere l'icona per aprire il menu
Sto aggiungendo il video sui modelli di navigazione nella barra delle informazioni

Vediamo l'anteprima

Finito!

Lascia che ti mostri il risultato finale

Ora sai come personalizzare l'header del tuo Negozio

A presto per un altro tutorial

## Video simili

[DesignCome impostare il tuo menu di navigazione](/tutorials/shop/design/come-impostare-il-tuo-menu-di-navigazione/)

![Come impostare il tuo menu di navigazione](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

[DesignCome personalizzare le icone del menu](/tutorials/shop/design/come-personalizzare-le-icone-del-menu/)

![Come personalizzare le icone del menu](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[DesignCome impostare l'home page della tua app](/tutorials/shop/design/come-impostare-lhome-page-della-tua-app/)

![Come impostare l'home page della tua app](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DesignCome personalizzare il tuo splashscreen](/tutorials/shop/design/come-personalizzare-il-tuo-splashscreen/)

![Come personalizzare il tuo splashscreen](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DesignCome impostare l'header del tuo negozio](/tutorials/shop/design/come-impostare-lheader-del-tuo-negozio/)

![Come impostare l'header del tuo negozio](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[DesignCome impostare lo stile globale del tuo negozio](/tutorials/shop/design/come-impostare-lo-stile-globale-del-tuo-negozio/)

![Come impostare lo stile globale del tuo negozio](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DesignCome personalizzare le icone principali del tuo negozio](/tutorials/shop/design/come-personalizzare-le-icone-principali-del-tuo-negozio/)

![Come personalizzare le icone principali del tuo negozio](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DesignCome sganciare il design di una sezione](/tutorials/shop/design/come-sganciare-il-design-di-una-sezione/)

![Come sganciare il design di una sezione](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DesignCome scegliere le dimensioni del tuo header ?](/tutorials/shop/design/come-scegliere-le-dimensioni-del-tuo-header/)

![Come scegliere le dimensioni del tuo header ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)