Aggiungi caratteri personalizzati al tuo tema Shopify

Shopify fornisce centinaia di caratteri gratuiti da utilizzare per il tuo negozio. Tuttavia, devi utilizzare un carattere personalizzato per allinearti alle linee guida del tuo marchio ma non è supportato da Shopify, puoi comunque aggiungerlo al tuo tema. Ecco una guida su come farlo:

1. Devi prima avere il tuo carattere disponibile. Alcuni caratteri hanno licenze, quindi assicurati di acquistarli correttamente per il tuo utilizzo. Il nostro team di supporto non sarà responsabile di ottenere i caratteri richiesti.

2. Successivamente, prepara due file con il formato .woff e .woff2 per ogni stile di carattere da aggiungere. Questo per assicurarti che il carattere aggiunto sia leggibile su tutti i tipi di browser.

   

3. Dopo aver ottenuto file sufficienti, caricali nella cartella File in Impostazioni tema .

   

   Tutti i file di font caricati hanno il pulsante a catena sul lato destro per fornire il collegamento al file per l'atto di copia.

   

4. Successivamente, torna alla dashboard di amministrazione, fai clic su Negozio online > Temi e scegli il tema Be Yours per modificarlo ulteriormente. Fai clic su Azioni > Modifica codice .

   

5. Nella finestra di modifica del codice aperta, accedi alla cartella Snippet nella colonna di sinistra. In questa cartella, fai clic sul file "css-variables.liquid" per aggiungere del codice personalizzato per il nuovo carattere.

   

6. Nel file aperto "css-variables.liquid", aggiungi codici aggiuntivi sotto lo stile della scheda. Può essere trovato sotto il testo {%- style -%} . I codici vengono aggiunti come segue:

   @font-face {
   famiglia di caratteri: " MyFontHeading ";
   src: url(' aggiungi il collegamento al file del carattere ') format("woff2"),
   url(' aggiungi il collegamento al file del carattere ') format("woff"); }

   @font-face {
   famiglia di caratteri: " MyFontBody ";
   src: url(' aggiungi il collegamento al file del carattere ') format("woff2"),
   url(' aggiungi il collegamento al file del carattere ') format("woff"); }

   Nota : le sezioni di testo in corsivo sono personalizzate da te. Il numero di codici @font-face{ } da aggiungere dipende da quanti stili di carattere hai.

   

7. Successivamente, cerchi il testo "font-body-family" per passare alla riga di codice pertinente e sostituisci tutte le parti di {{...}} con il testo aggiunto per font-family nei codici del passaggio 6 (nel nostro esempio, è "MyFontHeading"). Allo stesso modo, cerca il testo "font-heading-family" e sostituisci tutte le parti di {{...}} con il testo aggiunto per la riga font-family ("MyFontBody" nel nostro esempio).

   

8. Dopo la sostituzione, appare come nella foto qui sotto:

   

9. Infine, clicca su Salva .

Nota :

• Le impostazioni in Impostazioni tema > Tipografia non sono più attive, indipendentemente da ciò che configuri qui una volta aggiunti questi codici nel file "css-variables.liquid".
• Tutte le istruzioni sopra riportate sono applicabili quando applichi lo stesso carattere personalizzato per tutte le sezioni e tutti i blocchi. Nel caso in cui sia necessario applicare vari caratteri per sezioni o blocchi diversi, il processo di modifica sarà molto più complicato e contatta il nostro team di supporto per ottenere ulteriore aiuto.

Ci auguriamo che questo articolo ti sia utile! In caso di dubbi su questa funzionalità, non esitare a contattare il nostro team per ulteriore supporto.