> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Modulo Header

> Scopri come aggiornare l'header del tuo drawer Upcart, inclusi logo, stili del titolo, pulsante di chiusura e layout.

<div id="overview">
  # Panoramica
</div>

Il modulo Header ti permette di personalizzare la sezione superiore del tuo drawer Upcart con il logo del tuo brand, il testo del titolo, il layout, il colore di sfondo e il pulsante di chiusura. I controlli visivi rendono facile dare stile al tuo header senza dover definire dimensioni esatte in pixel.

<div id="header-module-settings">
  # **Impostazioni del modulo Header**
</div>

<div id="general">
  ## **Generale**
</div>

**Height** alterna tra **Slim** e **Tall** per controllare lo spazio verticale. **Bottom border** è **None** o **Thin**. **Background color** accetta un codice esadecimale o il selettore di colori integrato e supporta la trasparenza.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-height-and-background.gif?s=982cf4fec081aa2c1b62901e53602b80" alt="Impostazioni General del modulo Header di Upcart con i controlli di altezza e colore di sfondo accanto a un'anteprima del carrello" width="2172" height="1080" data-path="images/upcart/header-module-height-and-background.gif" />

<div id="title">
  # **Titolo**
</div>

Ci sono **tre modi** per definire il titolo dell'header del tuo cart drawer: ereditare lo stile del titolo predefinito del tuo tema, mostrare il logo del tuo negozio o creare stili di testo completamente personalizzati. Ogni metodo offre flessibilità a seconda delle tue esigenze di design.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-title-options.gif?s=18bfdb000570d453195ba19bd5f0288b" alt="Opzioni del titolo del modulo Header di Upcart: ereditare i titoli del tema, logo del brand o stili di testo personalizzati" width="1960" height="1080" data-path="images/upcart/header-module-title-options.gif" />

<div id="inherit-from-theme-titles">
  ## Eredita dai titoli del tema
</div>

Questa opzione usa gli stili di intestazione predefiniti del tuo tema, aiutandoti a mantenere il design visivamente coerente con il resto del tuo sito. Puoi aggiungere il tuo titolo usando il campo Text e includere dinamicamente il numero di articoli del carrello usando `{{cart_quantity}}`. L'allineamento del testo può essere impostato su Side o Center, e puoi selezionare il livello di intestazione appropriato H2, H3 o H4, in base alla struttura dei contenuti del tuo negozio.

<div id="brand-logo">
  ## Logo del brand
</div>

Se preferisci usare il logo del brand al posto del testo, puoi caricare il logo del tuo negozio direttamente in questa sezione. Scegli di allineare il logo su Side o Center e ridimensionalo con il cursore **Logo size**, che va da 14 px a 48 px. Non c'è un limite imposto sul file che carichi, ma è consigliato usare un file PNG per una trasparenza pulita e bordi nitidi. Anche i JPEG sono supportati, ma potrebbero includere rumore di fondo o degradare i dettagli del logo. Per le prestazioni, cerca di mantenere le dimensioni dei file ottimizzate.

* Ti consigliamo di usare un file **PNG** per la migliore qualità e il supporto degli sfondi trasparenti.
* Anche i JPEG funzionano, ma potrebbero non apparire altrettanto puliti, soprattutto se il tuo logo ha uno sfondo o dettagli fini.

<div id="define-text-styles">
  ## Definire stili di testo
</div>

Selezionando l'opzione Text ottieni il pieno controllo dello stile del titolo indipendentemente dal tema del tuo negozio. Puoi inserire qualsiasi titolo personalizzato e includere `{{cart_quantity}}` per aggiornamenti dinamici. L'allineamento del testo può essere impostato su Side o Center, con opzioni per cambiare il peso del font su Normal, Semibold o Bold. La dimensione del font è regolabile da 14px a 48px con un cursore visivo, e puoi facoltativamente applicare un override del colore del testo.

<div id="close-button">
  # Pulsante di chiusura
</div>

Il pulsante di chiusura è personalizzabile per adattarsi al design del tuo negozio. **Location** lo posiziona sul lato Left o Right del drawer. **Background**, **Icon** e **Border** accettano ciascuno un colore più un colore hover separato. **Icon size** è Small, Medium o Large, e **Icon thickness** è Normal o Thick. **Border** è None, Thin, Normal o Thick.

<Note>
  I campi del colore del bordo e del colore hover del bordo sono disabilitati mentre **Border** è impostato su **None**. Scegli prima uno spessore del bordo, poi impostane i colori.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-close-button-settings.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c8f941c774ff6f7029b0833c09ca000d" alt="Impostazioni del pulsante di chiusura del modulo Header di Upcart per posizione, colori, dimensione dell'icona e bordo" width="1170" height="1166" data-path="images/upcart/header-module-close-button-settings.png" />

<div id="custom-template">
  # Template personalizzato
</div>

Nella versione 2.0 del modulo Header, un editor di codice **Custom template** appare sotto le impostazioni, con un unico template **Full** che copre l'intero modulo. Usa JSX basato su React, e devi prima spuntare **Access custom templates** in **Settings > Cart settings > Advanced Settings** nel Cart Editor. Vedi [Configurare un template personalizzato](/it/upcart/setting_up_a_custom_template_in_upcart).

<div id="tips">
  # Suggerimenti
</div>

* **Vuoi spaziature o dimensioni precise?** Usa il [CSS personalizzato](/it/upcart/custom_css) per il pieno controllo oltre i cursori, ottimo per margini, padding o ridimensionamento del logo esatti.
* **Testa su desktop e mobile.** Gli elementi dell'header come testo, logo e pulsanti possono apparire diversamente su schermi di varie dimensioni
* **Usa livelli di intestazione corretti.** Scegliere l'intestazione giusta (H2, H3, H4) aiuta con l'accessibilità e la SEO. Rispetta la struttura dei contenuti del tuo negozio.

Per altri modi di personalizzare il tuo carrello, esplora la nostra [documentazione di aiuto di Upcart](/it). Se hai bisogno di modifiche personalizzate, ti consigliamo di rivolgerti a un [esperto Shopify](https://www.shopify.com/ca/partners/directory).