Skip to main content

​
Panoramica

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.

​
Impostazioni del modulo Header

​
Generale

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. Impostazioni General del modulo Header di Upcart con i controlli di altezza e colore di sfondo accanto a un'anteprima del carrello

​
Titolo

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. Opzioni del titolo del modulo Header di Upcart: ereditare i titoli del tema, logo del brand o stili di testo personalizzati

​
Eredita dai titoli del tema

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. 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.

​
Definire stili di testo

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.

​
Pulsante di chiusura

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.
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.
Impostazioni del pulsante di chiusura del modulo Header di Upcart per posizione, colori, dimensione dell'icona e bordo

​
Template personalizzato

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.

​
Suggerimenti

  • Vuoi spaziature o dimensioni precise? Usa il CSS personalizzato 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. Se hai bisogno di modifiche personalizzate, ti consigliamo di rivolgerti a un esperto Shopify.