Come aggiungere un carattere personalizzato a Shopify

Un’immagine di marca coesa e di grande impatto può favorire la crescita di aziende di qualsiasi dimensione e tipo. Se possiedi un'attività di e-commerce come Shopify, è necessaria un'identità di marca coerente. L'utilizzo di un carattere coerente e personalizzato può far risaltare il tuo sito web dagli altri. Dalla tipografia al colore, c'è abbastanza spazio per brillare e creare un negozio online visivamente accattivante. Ti stai chiedendo come aggiungere un carattere personalizzato a Shopify? In questa guida esamineremo l'importanza dei caratteri e come aggiungere e modificare i caratteri tradizionali e personalizzati su Shopify.

Realizzare una copia di backup del tuo tema Shopify

Prima di iniziare il processo di personalizzazione dei caratteri, assicurati di avere un backup del tuo tema Shopify attuale. In caso di problemi, puoi ripristinare rapidamente il tema se disponi di un file di backup. Ecco come farlo:

Aggiungi i file dei caratteri al tuo negozio

Una volta terminato di salvare il file di backup, sei pronto per aggiungere i caratteri al negozio Shopify. Quindi, lo usi nel tuo tema attraverso una serie di codici.

• Dal pannello di amministrazione di Shopify, vai su Contenuti > File > Carica file.

• Fai clic su Carica file nell'opzione in alto a destra della pagina e carica i file dei caratteri preferiti. I file Web Font sono quelli con le seguenti estensioni : .tff, .woff, .woff2, .eot, .svg o .otf.

Fonte: efzycode.com

• È meglio caricare tutti i file dei caratteri nella cartella .zip, o almeno i file che desideri.
• Una volta caricati i file dei caratteri, aggiungi del codice per leggerli.
• Torna al pannello di controllo Shopify e vai a Negozio online > Temi > Azioni > Modifica codice.
• Continua a scorrere verso il basso fino a trovare la cartella Risorse. Quindi premi l'opzione Aggiungi una nuova risorsa. Scegli il file del carattere desiderato e fai clic su Carica risorsa.
• Successivamente, installa il nuovo carattere nel tuo tema Shopify. Apri il file CSS principale del tuo tema nella cartella Risorse. Scorri fino alla fine di questo file, quindi incolla il nuovo codice.
• Aggiungi questo codice “@font-face {font-family: “Font name”;src: url({{ “Filename” | asset_url }}) format(“Format”);”
• Cambia il Nome del carattere con il nome del carattere che hai scelto. Se il nome comprende più di una parola, assicurati di aggiungere virgolette.
• Quindi, modifica il nome del file con il nuovo file caricato, incluso il codice dell'estensione, ad esempio verdana_bold.ttf.
• Infine, sostituisci il formato con quello del tuo carattere. Ad esempio, Athena.ttf sarebbe "TrueType".

Come cambiare i caratteri su Shopify

Se sei soddisfatto dei caratteri disponibili su Shopify, cambiare i caratteri è più semplice. Poiché Shopify offre molti caratteri attraenti, questa può essere un'eccellente opportunità per coloro che devono ancora costruire un'identità di marca. Di seguito sono riportati i passaggi per modificare i caratteri nel tema Shopify.

• Vai su Negozio online > Temi sul pannello di amministrazione di Shopify.
• Per fornire, seleziona Personalizza , quindi Impostazioni tema > Tipografia .
• È meglio sapere che per ogni tipo di testo è necessario fare clic su Modifica per utilizzare il selettore dei caratteri. Ciò ti consente di utilizzare più caratteri.
• Se non hai scelto un carattere, esplora le opzioni nel campo di ricerca o fai clic sull'opzione Carica altro.
• Successivamente, fai clic sul nome del carattere che preferisci. Se desideri sostituire il carattere con uno stile diverso, seleziona semplicemente il nome dello stile di carattere corrente e poi scegline uno nuovo dal menu a discesa.
• Quindi, premi Seleziona e Salva. Puoi fare clic su Anteprima se desideri verificare se la selezione ha funzionato.
• A questo punto, dovresti vedere i tuoi caratteri e la tipografia proprio come vuoi che appaiano. Se non sei soddisfatto, sperimenta più combinazioni per provare diverse opzioni, dimensioni, colori e posizionamento.

Come aggiungere un carattere personalizzato agli elementi specifici di Shopify

Se desideri utilizzare il tuo carattere personalizzato solo per elementi particolari, puoi utilizzare i "Selettori CSS" e aggiungere lì il tuo selettore. Di seguito sono riportati i passaggi su come trovare il selettore CSS del tuo sito web.

• Mentre ti trovi nella pagina contenente l'elemento di cui desideri modificare il carattere, premi CRTL + maiusc + c per aprire gli strumenti di sviluppo del browser in modalità ispezione. Se usi un Mac, è invece CMD + maiusc + c.
• Trova il testo di cui desideri modificare il carattere e fai clic su di esso. Questo passaggio ti consente di evidenziare l'elemento nell'HTML.
• Successivamente, fai clic con il pulsante destro del mouse sull'elemento nell'HTLM, vai su "Copia" e fai clic su "Selettore copia". Questo copierà un selettore CSS destinato a prendere di mira questo esatto elemento.
• Una volta ottenuto il selettore CSS, copialo e incollalo in fondo a "Selettori CSS".

Ricorda che questa è una tecnica hardcoded dedicata alla selezione di un singolo elemento. Le modifiche al codice HTML del tuo negozio, in particolare alle parti in cui il carattere è stato modificato, possono impedirne il funzionamento.

Se succede qualcosa del genere, puoi ricodificare questa parte dei tutorial o utilizzare un selettore CSS più ampio. Puoi farlo tutte le volte che vuoi per elementi specifici.

Perché i caratteri su Shopify e altri siti di e-commerce sono importanti

I caratteri sono essenziali nella progettazione e nel miglioramento dell'esperienza utente di Shopify e di altri siti Web di e-commerce. Scegliere i caratteri giusti può incoraggiare le persone a leggere i tuoi contenuti e ad usufruire dei tuoi prodotti o servizi.

L'utilizzo di un carattere accattivante presenta numerosi vantaggi, tra cui i seguenti:

• Leggibilità: la scelta del carattere giusto garantisce che le descrizioni dei prodotti, le recensioni e altri contenuti essenziali siano facilmente leggibili. Ha un impatto diretto sulla capacità dell'utente di interagire con il tuo sito.
• Estetica: i caratteri contribuiscono all'attrattiva visiva complessiva del sito web. I caratteri ben scelti possono rendere il sito più moderno, professionale o addirittura divertente, a seconda degli obiettivi del marchio.
• Esperienza utente: caratteri diversi trasmettono emozioni diverse e possono influire sull'esperienza dell'utente. Ad esempio, un carattere elegante e minimalista può creare una sensazione diversa rispetto a uno giocoso e decorativo.
• Gerarchia ed enfasi: puoi utilizzare caratteri di varie dimensioni e stili per guidare l'attenzione dell'utente. I nomi dei prodotti, i prezzi e gli inviti all'azione possono essere enfatizzati attraverso la scelta dei caratteri.
• Reattività mobile: i caratteri devono essere scelti con cura per essere visualizzati bene su dispositivi mobili con spazio limitato. I caratteri reattivi possono migliorare l'esperienza di acquisto mobile.
• Velocità di caricamento: la scelta dei caratteri può influire sui tempi di caricamento della pagina. Caratteri più complessi o troppi stili di carattere possono impedire la gestibilità del tuo sito, influenzando l'esperienza dell'utente.
• Ottimizzazione per i motori di ricerca: sebbene non sia un fattore diretto, l’utilizzo dei caratteri può influenzare indirettamente la SEO. I caratteri ben ottimizzati contribuiscono a una migliore esperienza utente, che, a sua volta, può avere un impatto positivo sul posizionamento del tuo sito nei motori di ricerca.

Domande frequenti

1. Posso aggiungere il mio carattere a Shopify?

SÌ. Per iniziare, devi caricare il carattere nella cartella delle risorse del tema. Quindi scorri verso il basso fino a trovare la cartella Risorse, fai clic su Aggiungi una nuova risorsa, seleziona il file del carattere e fai clic su Carica risorsa.

2. Come posso importare caratteri personalizzati su Shopify?

Per importare caratteri personalizzati su Shopify:

1. Scarica i file dei caratteri.
2. Se i file dei caratteri si trovano in una cartella .zip, decomprimili facendo clic con il pulsante destro del mouse e quindi premendo Estrai.
3. Fare clic con il pulsante destro del mouse sui caratteri disponibili e fare clic su Installa.

3. Esiste un limite al numero di caratteri in un negozio Shopify?

Utilizza fino a tre caratteri nel tuo negozio Shopify. Limitarsi a due o tre caratteri e attenersi ad essi per tutto il progetto è la soluzione migliore. L'utilizzo di più di tre caratteri tipografici potrebbe distrarre o creare confusione tra i lettori. Può anche ridurre la possibilità di convertirli in clienti.

4. Qual è la migliore combinazione di caratteri?

Sebbene non esistano regole chiare sulla migliore combinazione di caratteri per un sito Web, è meglio attenersi a un solo stile di carattere. Quando accoppi i caratteri, cerca quelli che si completano a vicenda e lavorano insieme senza diventare noiosi.

5. Come trovi la combinazione perfetta di caratteri?

Il modo più semplice per trovare la combinazione di caratteri perfetta è utilizzare caratteri diversi all'interno della stessa famiglia di caratteri. Ad esempio, una famiglia di caratteri è qualcosa come Helvetica e i suoi caratteri presentano alcune varianti. I caratteri della stessa famiglia sono già un assortimento di pesi e stili che funzionano bene insieme.

6. Non ho mai lavorato con i caratteri prima. Per favore dammi un suggerimento su come lavorare con la personalizzazione dei caratteri.

Se non hai mai lavorato con i caratteri, ecco alcuni stili o testi di base disponibili.

• Serif: questa famiglia di caratteri include Times New Roman e Georgia che hanno piccoli piedini su ogni lettera.
• Sans serif: questi caratteri non hanno i piedini come Arial e Helvetica.
• Script: il carattere in questo stile include tutto ciò che assomiglia a calligrafia o scrittura a mano.
• Monospazio: i caratteri di questa categoria hanno tutte lettere equidistanti e sono quelli che di solito vedi nel codice del computer. Un buon esempio è Roboto Mono.

Conclusione

I caratteri personalizzati sono eccellenti. Se i caratteri vengono utilizzati correttamente, possono guidare l'occhio da una sezione all'altra del tuo sito web Shopify. Allo stesso modo, intestazioni e banner promozionali con caratteri accattivanti possono attirare l'attenzione su ciò che desideri promuovere.

D’altro canto, il tuo carattere non dovrebbe essere in contrasto con il resto del tuo sito web né in alcun modo di cattivo gusto o attirare eccessivamente l’attenzione. Potrebbe attirare l'attenzione su aspetti non così importanti del tuo sito Web Shopify. Se hai bisogno di assistenza per bilanciare l'aspetto del tuo sito, valuta la possibilità di contattare il nostro team di progettazione di Penji.