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.
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 :
|