DocumentazioneCommerceGuida introduttiva

Branding vetrina

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Principiante
  • Intermedio
  • Amministratore
  • Leader
  • Utente

Una delle prime cose da fare è cambiare il logo nell'intestazione e caricare un favicon per il browser. Quindi, devi aggiungere il messaggio di benvenuto e aggiornare l'avviso di copyright nel piè di pagina. Queste attività sono alcuni semplici elementi di progettazione di cui puoi occuparti immediatamente. Mentre il tuo archivio è in fase di sviluppo, puoi attivare l'avviso di dimostrazione dello store, quindi rimuoverlo quando sei pronto per l'avvio.

Elementi di branding vetrina

Le dimensioni e la posizione del logo nell'intestazione sono determinate dal tema del negozio. Il logo può essere salvato come file GIF, PNG o JPG JPEG e caricato dall'amministratore del negozio.

Logo nell'intestazione

L'immagine del logo risiede nella seguente posizione sul server. Qualsiasi file di immagine con il nome logo.svg viene utilizzato come logo del tema predefinito.

Percorso completo - app/design/frontend/[vendor]/[theme]/web/images/logo.svg

Percorso relativo - images/logo.svg

Se non conosci le dimensioni del logo o di altre immagini utilizzate nel tema, apri la pagina in un browser, fai clic con il pulsante destro del mouse sull’immagine e controlla l’elemento.

NOTE
Oltre al logo nell'intestazione, il logo verrà visualizzato anche nei modelli di posta elettronica e nelle fatture PDF e in altri documenti di vendita. I logo utilizzati per i modelli e le fatture e-mail hanno requisiti di dimensione diversi e devono essere caricati separatamente.

Formati di file logo supportati:

Formato file
Descrizione
PNG
(Portable Network Graphics) Questa nuova alternativa al formato GIF supporta fino a 16 milioni di colori (24 bit). Il formato di compressione senza perdita di dati produce un'immagine bitmap di alta qualità con testo nitido, ma con dimensioni di file maggiori rispetto ad alcuni formati. Il formato PNG supporta livelli trasparenti ed è progettato per la visualizzazione e lo streaming online.
GIF
(Graphics Interchange Format) Formato bitmap ampiamente supportato e meno recente, limitato a 256 colori (8 bit). Il formato GIF supporta l'animazione semplice e i livelli trasparenti.
JPG-JPEG
(Joint Photographic Expert Group) Formato bitmap compresso utilizzato dalla maggior parte delle fotocamere digitali. La compressione con perdita di dati causa una perdita di dati, che a volte può essere rilevata come punti sfocati nel testo.

  1. Nella barra laterale Admin, passa a Content > Design>Configuration.

    Pagina Configurazione progettazione {width="700"}

  2. Individuare la visualizzazione archivio da configurare e fare clic su Edit nella colonna Action.

  3. Espandere Il selettore di espansione nella sezione Header.

    Impostazioni intestazione {width="600"}

  4. Per caricare un nuovo logo, fare clic su Upload e scegliere il file dal sistema.

  5. Immettere Logo Image Width e Logo Image Height in pixel.

  6. Per Logo Image Alt, immettere il testo che si desidera visualizzare quando qualcuno passa il puntatore sull'immagine.

  7. Al termine, fare clic su Save Configuration.

Aggiungi un favicon

Favicon è l'abbreviazione di icona preferita e fa riferimento all'icona piccola nella scheda di ogni pagina del browser. A seconda del browser, il favicon viene visualizzato anche nella barra degli indirizzi, immediatamente prima dell’URL.

Un favicon è generalmente di dimensioni pari a 16 x 16 pixel o 32 x 32 pixel. Commerce accetta i tipi di file ICO, PNG, APNG, GIF e JPG JPEG, anche se non tutti i browser supportano questi formati. Il formato di file più ampiamente supportato da utilizzare per un favicon è ICO. È possibile utilizzare altri tipi di file immagine, ma il formato potrebbe non essere supportato da tutti i browser. Ci sono molti strumenti gratuiti disponibili online che è possibile utilizzare per generare un'immagine ICO o convertire un'immagine in quel formato.

Favicon nella scheda del browser

Commerce supporta i seguenti formati di file come favicon:

Formato file
Descrizione
ICO
Questo formato di file immagine è progettato per le immagini delle icone dei computer di piccole dimensioni. Utilizzato principalmente in Microsoft® Windows OS, il formato ICO può contenere immagini fino a 256 x 256 pixel e 16 milioni di colori (24 bit) con 8 bit di trasparenza.
PNG
(Portable Network Graphics) Questa nuova alternativa al formato GIF supporta fino a 16 milioni di colori (24 bit). Il formato di compressione senza perdita di dati produce un'immagine bitmap di alta qualità con testo nitido, ma con dimensioni di file maggiori rispetto ad alcuni formati. Il formato PNG supporta livelli trasparenti ed è progettato per la visualizzazione e lo streaming online.
APNG
(Animated Portable Network Graphics) Formato di file simile a PNG che supporta l'animazione semplice.
GIF
(Graphics Interchange Format) Formato bitmap ampiamente supportato e meno recente, limitato a 256 colori (8 bit). Il formato GIF supporta l'animazione semplice e i livelli trasparenti.
JPG-JPEG
(Joint Photographic Expert Group) Formato bitmap compresso utilizzato dalla maggior parte delle fotocamere digitali. La compressione con perdita di dati causa una perdita di dati, che a volte può essere rilevata come punti sfocati nel testo.

Passaggio 1: creare un favicon

  1. Utilizzando l'editor di immagini desiderato, creare un'immagine grafica del logo 16 x 16 o 32 x 32.

  2. (Facoltativo) Utilizzare uno degli strumenti in linea disponibili per convertire il file nel formato ico e salvarlo nel computer.

Passaggio 2: Carica il favicon nel tuo negozio

  1. Nella barra laterale Admin, passa a Content > Design>Configuration.

  2. Nella griglia individuare la visualizzazione archivio che si desidera configurare e fare clic su Edit nella colonna Action.

  3. In Other Settings, espandere Selettore di espansione la sezione HTML Head.

    Impostazioni intestazione HTML {width="600"}

  4. Se vuoi rimuovere il favicon corrente, fai clic sull'icona Elimina ( Icona cestino ) nell'angolo inferiore sinistro dell'immagine.

  5. Fare clic su Upload e aprire il file favicon preparato.

    Favicon caricata {width="400"}

  6. Al termine, fare clic su Save Configuration.

Passaggio 3: aggiornare la cache

  1. Quando viene richiesto di aggiornare la cache, fare clic sul collegamento Cache Management nel messaggio nella parte superiore dell'area di lavoro.

  2. Nell'elenco selezionare la casella di controllo Page Cache contrassegnata come Invalidated.

  3. Impostare Actions su Refresh e fare clic su Submit.

  4. Per visualizzare la nuova favicon, torna alla vetrina e aggiorna il browser.

Modificare il messaggio di benvenuto

Il messaggio di benvenuto nell’intestazione si espande per includere il nome del cliente che ha effettuato l’accesso. Prima di avviare lo store, assicurati di modificare il testo predefinito di Benvenuto per ogni visualizzazione dello store.

Messaggio di benvenuto

  1. Nella barra laterale Admin, passa a Content > Design>Configuration.

  2. Nella griglia individuare la visualizzazione archivio che si desidera configurare e fare clic su Edit nella colonna Action.

  3. In Other Settings, espandere Selettore di espansione la sezione Header.

  4. Per Welcome Text, immettere il testo del messaggio di benvenuto che si desidera visualizzare nell'intestazione dello store.

    Impostazioni intestazione {width="600"}

  5. Al termine, fare clic su Save Configuration.

  6. Quando viene richiesto di aggiornare la cache delle pagine, fare clic sul collegamento Cache Management nella parte superiore dell'area di lavoro e seguire le istruzioni per aggiornare la cache.

Il Negozio visualizza un avviso di copyright nel piè di pagina di ogni pagina. Come best practice, l’avviso di copyright deve includere l’anno in corso e identificare l’azienda come proprietaria legale del contenuto sul sito.

Esempio di avviso di copyright

Il codice di carattere © viene utilizzato per inserire il simbolo di copyright, come illustrato negli esempi seguenti:

  • Esempio di formato lungo

    Copyright © 2013-present Luma, Inc. All rights reserved.

  • Esempio di formato breve

    © 2021 Luma, Inc. All rights reserved.

Per aggiornare l'avviso di copyright:

  1. Nella barra laterale Admin, passa a Content > Design>Configuration.

  2. Nella griglia individuare la visualizzazione archivio che si desidera configurare e fare clic su Edit nella colonna Action.

  3. In Altre impostazioni, espandere Selettore di espansione la sezione Footer.

    Impostazioni progettazione piè di pagina {width="600"}

  4. Per Copyright, immettere l'avviso di copyright che si desidera visualizzare nel piè di pagina di ogni pagina.

    Utilizzare il codice carattere © per inserire un simbolo di copyright.

  5. Al termine, fare clic su Save Configuration.

Impostare l'avviso di Store Demand

Se il tuo negozio è online, ma è ancora in costruzione, puoi visualizzare un avviso di dimostrazione del negozio nella parte superiore della pagina per informare le persone che il negozio non è ancora aperto per gli affari. Quando sei pronto a andare in diretta, rimuovi semplicemente il messaggio. È simile a capovolgere il segno appeso nella finestra da Chiuso a Aperto. Il formato dell’avviso demo è determinato dal tema del negozio.

Avviso demo vetrina

  1. Nella barra laterale Admin, passa a Content > Design>Configuration.

  2. Nella griglia individuare la visualizzazione archivio che si desidera configurare e fare clic su Edit nella colonna Action.

  3. In Other Settings, espandere Selettore di espansione la sezione HTML Head.

    Intestazione HTML {width="600"}

  4. Scorri verso il basso e imposta Display Demo Store Notice in base alle tue preferenze.

  5. Al termine, fare clic su Save Configuration.

  6. Se viene richiesto di aggiornare la cache, fare clic su Cache Management nel messaggio di sistema e seguire le istruzioni per aggiornare la cache.

recommendation-more-help
31746fd0-1ead-45b5-9192-1aaf582c5f66