Come aggiungere un link ai Preferiti (icona, testo o pulsante) all’header di Shopify

Scopri come aggiungere un link Preferiti alla barra di navigazione di Shopify (intestazione) per consentire a chi acquista di aprire i prodotti salvati direttamente in Customer Hub.

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

Questo link nell’intestazione apre i preferiti salvati. Per consentire agli acquirenti di salvare i prodotti dalle pagine dei dettagli del prodotto o delle raccolte, segui Come mostrare i pulsanti dei preferiti sul tuo sito e in Customer Hub.

Avviso Questo processo prevede la modifica del codice del tema Shopify. Se non ti senti a tuo agio a scrivere codice o non hai uno sviluppatore nel tuo team, ti consigliamo di rivolgerti a un partner Klaviyo per ricevere assistenza. L’assistenza Klaviyo non è in grado di risolvere i problemi relativi a implementazioni di codice personalizzate.

Prima di iniziare

Prima di aggiungere questo link, configura Customer Hub sul tuo negozio Shopify e attiva Preferiti in Klaviyo. Assicurati che l'incorporazione dell'app di Klaviyo sia abilitata nel tema Shopify che modificherai.

Ti consigliamo vivamente di duplicare il tema live prima di apportare modifiche. In questo modo puoi testare il nuovo link senza influire sul tuo store live.

1. In Shopify, vai su Negozio online > Temi.
2. Fai clic sul menu con tre puntini (...) accanto al tema attivo.
3. Seleziona Duplica.

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

Per l’opzione dell’icona riportata sotto, usa un file SVG più piccolo di 15 KB. Gli SVG si adattano a qualsiasi dimensione dello schermo senza perdere qualità e possono ereditare i colori del tuo tema. Se preferisci un link di testo o un pulsante, passa al passaggio 2.

1. Devi trovare l'icona che vuoi usare. Può essere qualsiasi icona, ma ti consigliamo di usare un SVG per evitare la pixelatura. Puoi scaricare qui una versione standard (con licenza MIT): Heroicons heart.svg. Salva il file come icon-heart.svg per farlo corrispondere al codice dell'icona riportato di seguito.
2. Nell'Amministratore di Shopify, vai in Negozio online > Temi.
3. Trova il tema duplicato e fai clic sul menu con i tre puntini (...) > Modifica codice.
4. Nella barra laterale sinistra, fai clic con il tasto destro del mouse sulla cartella assets e seleziona Carica... per aprire la finestra di selezione dei file.
5. Seleziona il tuo file SVG e fai clic su Apri.

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

Poi, aggiungi lo snippet di codice per l'icona, il link di testo o il pulsante. Ogni opzione apre Preferiti nel Customer Hub.

1. Se hai saltato il passaggio 1, apri l’editor di codice in Shopify: vai a Negozio online > Temi. Accanto al tema duplicato, fai clic su menu con tre puntini (...) > Modifica codice. Nell’editor di codice del tema duplicato, individua il file che controlla l’header.
   • Temi Online Store 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 (oppure Cmd+F su Mac) e cerca la parola cart o account. Devi incollare il nuovo codice all’interno dello stesso contenitore (di solito un <div> o <ul>) che contiene queste icone esistenti.
3. Incolla 1 delle opzioni di codice qui sotto nel punto in cui vuoi che venga visualizzato il link (ad es. subito prima dell’icona del carrello).

Opzione A: link icona

Usa questo codice se hai completato il passaggio 1 e vuoi visualizzare un’icona a cuore, supponendo che nel nostro esempio si chiami icon-heart.svg:

<a href="#k-hub/favorites"
   id="favorites-icon-bubble"
   aria-label="Open Favorites"
   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>

Opzione B: link di testo o pulsante

Usa questo codice se preferisci un link di testo o un pulsante. Non devi caricare nessuna risorsa per farlo.

Per un semplice link di testo:

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

Per un pulsante:

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

1. Clicca su Salva.

Suggerimento: far corrispondere lo stile del tema se il tema utilizza una classe CSS specifica per le icone dell’intestazione (ad es. header__icon o icon-link), puoi sostituire l’attributo style= inline nel codice sopra con quella classe (ad es. class="header__icon"). Visualizza l’anteprima del risultato per verificare che la spaziatura e gli effetti hover corrispondano agli altri link dell’intestazione.

Passaggio 3: testare e pubblicare le modifiche

Dopo aver salvato il codice, visualizza l’anteprima del tema modificato e testa il link prima di pubblicarlo.

1. In Shopify, vai su Online Store > Themes. Accanto al tema duplicato che hai modificato, fai clic sul menu con tre puntini (...) > Anteprima.
2. Controlla l'intestazione su desktop e mobile. Dovresti vedere l'icona, il link di testo o il pulsante che hai aggiunto. Fai clic e conferma che apra i preferiti salvati in Customer Hub.
3. Quando sei pronto a rendere visibili ai clienti tutte le modifiche nel tema duplicato, torna su Online Store > Themes. In Temi bozza, trova il duplicato modificato e fai clic su Pubblica.
4. Apri il tuo negozio live e testa di nuovo il link Preferiti.

Risoluzione dei problemi

Se il link non viene visualizzato, sembra errato o non apre Customer Hub:

• L'icona non viene visualizzata: verifica che il file si trovi nella cartella assets, sia un SVG di dimensioni inferiori a 15 KB e si chiami esattamente icon-heart.svg in modo che corrisponda allo snippet di codice. Il nome del file fa distinzione tra maiuscole e minuscole.
• L’icona non è allineata: potresti dover regolare i valori height e width nell’attributo style dello snippet di codice per farli corrispondere all’altezza della barra di navigazione del tema.
• Le modifiche non vengono visualizzate: verifica di star visualizzando l’anteprima del tema che hai modificato. Riapri la sua Anteprima da Shopify. Il salvataggio di un tema duplicato non aggiorna il tuo negozio live; pubblicalo dopo averlo testato.
• Il link non apre Customer Hub: verifica che Customer Hub sia configurato e che l’incorporamento dell’app Klaviyo sia abilitato nel tema che stai visualizzando. Verifica che il link utilizzi ancora #k-hub/favorites.