Vuoi inserire le icone di Font Awesome su Shopify ma hai difficoltà nell’implementazione?! Ovviamente, implementare qualcosa di mediamente complesso su Shopify non è la classica passeggiata che faresti su WordPress o altri CMS con anni di supporto alle spalle (oltre che di una nutrita community di sviluppatori). Per questo motivo ho preparato una breve guida che ti permetterà di riuscire nell’impresa in 5 minuti di orologio! Più o meno…
Font Awesome: icone in vettoriale per il Web
Prima di approfondirne l’implementazione, è giusto spendere due parole sul progetto Font Awesome e sui vantaggi offerti.
Font Awesome è un nutrito set di icone in grafica vettoriale da utilizzare sui siti Internet, eCommerce, Web app e in qualsiasi altro progetto che permetta l’inclusione di elementi in grafica vettoriale. Il vantaggio di queste icone è che, al contrario di una banale immagine, possono essere ridimensionate con molta facilità e non perdono mai di qualità. Inoltre, sono particolarmente veloci da caricare in quanto non sono pesanti file da scaricare al caricamento della pagina.
Oltre all’impressionante numero di icone disponibili (oltre 1000 in costante aumento), il progetto è particolarmente interessante perché la maggior parte dei contenuti sono utilizzabili senza sborsare mezzo centesimo. È tuttavia presente un “pacchetto pro” che garantisce l’accesso a maggiori contenuti e stili grafici.
In parole povere, grazie a Font Awesome potrai includere delle icone di qualità all’interno del tuo progetto senza doverle pagare!
Font Awesome su Shopify: come fare?
Il “toolkit” di Font Awesome può essere installato in vari modi:
- Includendo un link alla libreria ufficiale
- Scaricando e includendo la libreria direttamente tra i files del tuo progetto
- Scaricando e Includendo le singole icone all’interno del tuo progetto
Tra le tre scelte, ovviamente mi sento di consigliarti la seconda in quanto avrai tutti i files all’interno del progetto consentendo tempi di caricamento minori e maggiore controllo su di esse. Nonostante sia la scelta migliore, l’opzione numero 2 è di difficile applicazione su un progetto Shopify visto che la gestione dei files non è proprio semplicissima.
Seppur esista un modo per caricare l’intero toolkit su Shopify, io preferisco un approccio leggermente più semplice: caricare le icone SVG all’interno degli Snippets del tema Shopify.
Font Awesome negli Snippets di Shopify: istallazione e utilizzo
Come dicevo, probabilmente questa non è la soluzione ideale, ma è sicuramente la via più semplice e “indolore” per godere dei benefici di Font Awesome su un eCommerce basato su Shopify.
Per la prima fase ti basterà semplicemente seguire questo procedimento:
- Scarica la libreria di Font Awesome dal sito ufficiale
- Cerca il nome delle icone di tuo interesse nell’archivio di Font Awesome
- Apri la libreria di Font Awesome che hai scaricato e apri la cartella “advanced-options/raw-svg/”
- In base allo stile e al tipo di icone, scegli una cartella tra brands, regular e solid. Al suo interno cerca il nome delle icone che hai trovato sul sito
- Apri i file SVG interessati con un editor di testo qualsiasi e copiane il contenuto
Il pezzo di codice che hai appena copiato, altro non è che l’insieme di informazioni che compongono il disegno in grafica vettoriale. Una volta entrato in possesso di questo, non ti resta altro che caricarlo singolarmente tra gli Snippets di Shopify e utilizzarlo all’interno del sito.
Una volta individuato le icone di tuo interesse dovrai:
- Aprire Shopify e la cartella Snippets del tuo tema
- Creare un nuovo file LIQUID con il nome della tua icona (esempio: “icon-cart.liquid”)
- Incollare il contenuto del file SVG ripulendolo dagli elementi non necessari
- Aggiungere uno ” style=’width: xx px’ ” in modo da ridimensionare l’icona alle dimensioni desiderate (o se preferisci, utilizza una classe CSS da personalizzare altrove)
A questo punto l’icona estrapolata da Font Awesome è “fisicamente” all’interno del tuo tema sotto forma di Snippet. Non ti resta altro che inserirla in un punto qualsiasi del sito inserendo il codice:
{% include 'icon-cart' %}
Ed ecco fatto! Hai appena incluso un’icona SVG all’interno del tuo tema su Shopify. Non ti resta altro che ripetere quest’azione con ogni icona che desideri.
Se questa guida non ti è bastata o hai bisogno di ulteriori chiarimenti su Shopify, puoi contattarmi o lasciare un commento qui sotto!
