Passer au contenu principal

Utilisez des SVG sur le Phantom thème

Nathan Rutily avatar
Écrit par Nathan Rutily
Mis à jour il y a plus de 10 mois

A. Introduction

Ce tutoriel est disponible pour les packs suivants :

  • Classique

  • Premium

  • Master +

Les images vectorielles (SVG) permettent de créer des formes géométriques à partir de coordonnées et d’attributs XML. Ceci permet d’économier du temps lors du chargement de vos pages, mais aussi de conserver la qualité d’affichage, peu importe les dimensions choisies. Vous pouvez également modifer les couleurs des formes directement depuis le site.

Le Phantom Thème permet à de nombreux endroits de placer des fichiers SVG, que ce soit pour le logo du site, des badges, ou encore dans des emplacements HTML dédiés à ce type d’usage.

B. Mise en place d'un SVG

1. Ajout du SVG dans les contenus de votre boutique

Certains emplacements comme le logo du site possède un paramètre dédié au SVG, permettant l’affichage de votre logo dans ce format léger et adaptable.

Pour ce faire, commencez par vous rendre dans vos Contenu > Fichiers, puis cliquez sur Importer les fichiers.

Sélectionnez ensuite le(s) SVG que vous voulez placer sur votre site, puis valider.

Une fois importé, votre SVG se présentera sous cette forme :

Son nom de fichier est donc Spinner.svg.

2. Intégration sur un paramètre dédié

Rendez-vous maintenant dans votre personnalisation du thème : Boutique en ligne (Online Store) > Thèmes > Personnaliser, puis dans la section En-tête 1 ligne pour cet exemple.

Notez le nom de votre fichier dans l’emplacement prévu à cet effet, et votre svg apparaîtra :

3. Intégration sur un paramètre de type HTML

Certaines sections du Phantom Thème possèdent des paramètres champ HTML, permettant d’afficher de faire un rendu de code HTML, pratique pour afficher du contenu personnalisé.

Ainsi, vous retrouvez votre paramètre comme ci-dessous :

Un fichier SVG est constitué de ligne de code XML, qui sont rendu en HTML, donc vous pouvez copier / coller le contenu d’un fichier HTML pour le faire apparaître dans ce champ :

  1. Clic-droit sur votre fichier svg

  2. Ouvrir avec...

  3. Choisissez le Bloc-note

  4. Copiez le contenu (Ctrl + A puis Ctrl + C sur windows ou Command + A puis Command + C sur Mac)

  5. Collez celui-ci dans votre paramètre champ HTML sur votre thème (Ctrl + V sur windows ou Command + V sur Mac)

Avez-vous trouvé la réponse à votre question ?