Comment mettre des icônes sur Shopify ?

Nous allons voir dans ce tutoriel comment mettre des icônes sur Shopify afin d’avoir un rendu sympa et tendance ! Ce type d’icônes est pratique pour créer des visuels pour vos services ou avantages comme par exemple un petit camion pour la livraison rapide, une information sur les paiements sécurisés etc… vous pouvez en parallèle adapter le tutoriel du footer badges de confiance sur shopify qui s’y prête tout particulièrement.

Ou trouver des icônes ?

Flaticon est certainement le plus connu et le plus pratique à utiliser ! sur ce site vous allez pouvoir trouver votre bonheur parmi un large choix d’icônes aux divers formats.

Quel format choisir ?

Flaticon propose 5 formats d’export que nous allons détailler.

Le format EPS

C’est un format vectoriel utile pour les designer car ils vont pouvoir le modifier et le personnaliser sous illustrator. Bref ça n’est pas pour nous !

Le format PSD

Même principe que le format EPS mais en fichiers sources pour photoshop. Pas utilisable directement, utile pour les graphistes ou les personnes connaissant un peu photoshop

Le format base64

C’est un encodage de l’information de l’image qui va proposer un code tout prêt à l’emploi. En fait c’est pas mal mais assez gourmand et a tendance à surcharger le code. Je ne recommande pas spécialement.

Le format PNG

Vous le connaissez tous et c’est le plus pratique à utiliser étant donné que cela va vous sortir une image toute prête selon le choix de taille que vous allez choisir.

Le format SVG

Le format le plus léger et idéal pour le Web, top niveau performance ! le hic c’est qu’il va falloir le redimensionner selon vos besoins et la ce n’est pas spécialement simple.

Comment installer ces icônes sur Shopify ?

Maintenant que vous avez choisi le format de votre choix, logiquement PNG ou SVG, nous allons voir comment les mettre en place sur votre boutique.

A vous de voir ou vous souhaitez les mettre ! vous pouvez les placer dans votre description en passant en mode </> si c’est un code SVG ou l’éditeur standard si c’est une image.

Le placement dans des fichiers

Pouvoir placer les icônes directement dans des fichiers vous permettra de les avoir en permanence sur le type de contenu associé au fichier.

Rendez vous dans votre administration – Boutique en ligne – Actions – Modifier le code – Ouvrez le dossier  voulu selon l’emplacement que vous avez défini…

• Sur tous les produits : sections – product-template.liquid
• Sur la page d’accueil : Mise en page (layout)- theme.liquid
• Sur les pages collections : sections – collection-template.liquid
• Au niveau du panier : sections – cart-template.liquid

Quel code selon le format choisi ?

Vous avez choisi le SVG ? alors au clic sur SVG – Free download – un fichier sera téléchargé sur votre ordinateur. Cliquez dessus et le SVG va normalement s’ouvrir dans votre navigateur. Faites un clic droit – Afficher le code source de la page et copiez le code complet. Il ne vous reste plus qu’à le coller à l’endroit voulu.

En ce qui concerne le redimensionnement il vous suffit d’ajouter entre le svg version une taille en pixel comme ceci : svg width="90px" version. Ici on lui dit que l’icône sera de 90px de largeur.

Côté bonne pratique il est recommandé de ne pas toucher à sa taille pour que l’icône puisse s’adapter à son conteneur parent dans une optique de pouvoir s’agrandir ou rétrécir à l’infini selon le support utilisé. Cependant cela risque d’être un peu compliqué à mettre en place pour vous 🙁 on reste donc sur ce principe de taille.

Vous avez choisi le PNG ? alors vous allez mettre votre image sur shopify en vous rendant dans Paramètres – Fichiers – Télécharger des fichiers. Copiez ensuite l’url de l’image du champ URL et sauvegardez la ! Le code si dessous va vous permettre de l’afficher grâce à la balise image. Remplacez tout simplement l’occurrence « urlimage » par le l’url sauvegardée.

<img src="urlimage" alt="" />

Si tout cela reste un peu flou pour vous n’hésitez pas à regarder la vidéo qui arrivera dés lundi 😉

Les codes de la version vidéo

Mettre un conteneur pour la personnalisation

<div class="svg-custom"> 
votre svg ... 
</div>

Le style à mettre dans votre fichier xxx.scss.liquid

.svg-custom { 
  width:90px;  
  margin:0 auto;
}

.svg-custom svg { 
  fill:#333333;
}

Break retour à la ligne

<br style="clear:both;" />

Ce tutoriel existe aussi en vidéo

Bon tuto à tous