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 Sii tuo per modificarlo ulteriormente. Fare clic su ... > 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 {
    font-family: "MyFontHeading";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') format("woff");
    }
   
    @font-face {
    font-family: "MyFontBody";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') 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. Dopodiché, tu:

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

   • Cerca 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')

8. Dopo la sostituzione, il codice commentato nel riquadro rosso viene sostituito dal codice nel riquadro verde. Sembra la 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.

Hai bisogno di ulteriore assistenza

Se riscontri problemi o hai bisogno di ulteriore aiuto con il tuo tema BeYours, contatta i nostri ragazzi dell'assistenza tramite il nostro sistema di ticket per assistenza entro 8 ore.

Scansiona il codice QR qui sotto per unirti alla nostra community WhatsApp per aggiornamenti, notizie e annunci.