Come aggiungere un link Preferiti (icona, testo o pulsante) all'intestazione del tuo Shopify

L'aggiunta di una specifica icona "Preferiti" alla barra di navigazione ("intestazione") del tuo sito aumenta il coinvolgimento degli utenti, riducendo gli ostacoli che impediscono ai clienti di trovare i loro preferiti nel Customer Hub. Offrendo agli acquirenti un punto di lancio dedicato per i loro articoli salvati, li incoraggi a costruire cestini più grandi e a tornare più spesso al tuo negozio.

Puoi implementarlo come un'icona (ad esempio, un cuore), un semplice link testuale (ad esempio, "Preferiti") o un pulsante. Questa guida spiega come inserire il codice necessario nell'intestazione del tuo sito utilizzando il codice Liquid di Shopify.

Questa guida spiega come caricare un'icona a forma di cuore nelle risorse del tuo tema e inserire il link al codice nell'intestazione del tuo sito utilizzando il codice Liquid di Shopify.

Nota: questa procedura prevede la modifica del codice del tuo tema Shopify. Se non ti senti a tuo agio a scrivere codice o non disponi di uno sviluppatore nel tuo team, ti consigliamo di contattare un partner Klaviyo per ricevere assistenza. L'assistenza di Klaviyo non è in grado di risolvere i problemi relativi alle implementazioni di codice personalizzato.

Prima di iniziare

Ti consigliamo vivamente di duplicare il tuo tema attivo prima di apportare modifiche. Questo ti permette di testare la nuova icona in un ambiente sicuro senza influire sul tuo negozio dal vivo.

1. In Shopify, vai su Negozio online > Temi.

2. Clicca sul menu a tre puntini (...) accanto al tuo tema dal vivo.

3. Seleziona Duplica.

Passaggio 1: prepara le tue risorse (se vuoi utilizzare un'icona)

Per prima cosa, carica il file delle icone che fungerà da pulsante. L'utilizzo di un file SVG è migliore perché si adatta a qualsiasi dimensione dello schermo senza perdere qualità e può ereditare i colori del tuo tema.

1. Devi trovare un'icona che desideri utilizzare. Può essere qualsiasi icona, ma ti consigliamo di utilizzare un SVG per evitare la pixelazione. Puoi scaricare una versione standard (con licenza MIT) qui: Heroicons heart.svg.

2. Nel tuo Shopify Amministratore, vai su Negozio online > Temi.

3. Trova il tuo tema e clicca sul menu a tre puntini (...) > Modifica il codice.

4. Nella barra laterale sinistra, scorri verso il basso fino alla cartella Risorse e fai clic su Aggiungi una nuova risorsa.

5. Carica il tuo file di icone.

Passaggio 2: inserisci il link dell'intestazione (barra di navigazione in alto)

Dopodiché, aggiungi la snippet di codice che mostra l'icona e la collega al Customer Hub.

1. Nell'editor del codice del tema, individua il file che controlla la tua intestazione.

   • Temi del negozio online 2.0 (ad esempio, Dawn): cerca sections/header.liquid.

   • Temi vintage: cerca snippets/header-icons.liquid o header-bar.liquid.

2. Trova il punto di inserimento: Premi Ctrl+F (o Cmd+F su Mac) e cerca la parola carrello o account. Vuoi incollare il tuo nuovo codice nello stesso contenitore (solitamente un <div> o <ul>) che contiene queste icone esistenti.

3. Incolla una delle opzioni di codice qui sotto nel punto in cui desideri che appaia il link (ad esempio, subito prima dell'icona del carrello).

<a href="#k-hub/favorites" id="favorites-icon-bubble" aria-label="Apri i preferiti" title="Favorites" style="display:flex;align-items:center;justify-content:center;height:4.4rem;width:4.4rem;">
  <span style="height:20px;width:20px">
    {{ 'icon-heart.svg' | inline_asset_content }}
  </span> </a>

<a href="#k-hub/favorites" class="header__menu-item header__menu-item--list" style="text-decoration: none;"> Preferiti </a>

<a href="#k-hub/favorites" class="button--primary"> Preferiti </a>

Suggerimento: come abbinare lo stile del tuo tema Se il tuo tema utilizza una classe CSS specifica per le icone di intestazione (ad esempio intestazione__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__icona"). In questo modo, gli effetti di spaziatura e di passaggio del mouse si abbinano perfettamente agli altri tuoi pulsanti.

Risultato

Una volta salvato, apri il tuo negozio in una nuova finestra in incognito/privato per bypassare qualsiasi cache del browser. Dovresti vedere l'icona del cuore nella barra di navigazione. Cliccando su questa icona si aprirà ora la scheda Preferiti all'interno del Customer Hub.

Risoluzione dei problemi

Se l'icona non appare o non sembra corretta:

• L'icona è un'immagine rotta: assicurati di aver caricato il file nella cartella Risorse e di averlo nominato esattamente icon-heart.svg. I nomi dei file fanno distinzione tra maiuscole e minuscole.

• L'icona non è allineata: potresti dover regolare i valori di altezza e larghezza nell'attributo di stile della snippet di codice per adattarli all'altezza della barra di navigazione del tuo tema.

• Modifiche non visualizzate: i temi di Shopify vengono inseriti nella cache in modo aggressivo. Prova a visualizzare l'anteprima del tema in una finestra in Incognito o ad aggiungere ?preview_theme_id= al tuo URL se stai lavorando su una bozza di tema.