Les paramètres généraux du thème Phantom 2.0 sur Shopify sont conçus pour vous offrir une flexibilité optimale dans la personnalisation de votre boutique en ligne. Ces paramètres permettent d'ajuster des éléments clés de votre site pour garantir une expérience utilisateur fluide et professionnelle.
Dans cette section, vous pouvez configurer des aspects fondamentaux tels que les couleurs, la typographie, les boutons, et bien plus encore.
Chaque paramètre est intuitivement organisé pour vous aider à facilement naviguer et modifier les composants essentiels de votre boutique, vous permettant ainsi de créer une esthétique cohérente et engageante qui reflète parfaitement votre marque.
A - Général
Favicon
Un favicon (contraction de "favorites icon") est une petite icône graphique associée à un site web. Généralement mesurant 16x16 pixels ou 32x32 pixels, le favicon apparaît dans plusieurs endroits du navigateur web et des applications, jouant un rôle essentiel dans l'identité visuelle et l'expérience utilisateur d'un site web.
Image favicon :
|  |
Icônes
Style des icônes principales :
Gras | Simple | Minimaliste |
 |  |  |
SVG de chargement :
Tutoriel pour utiliser vos svgs sur le thème : https://help.phantom-theme.fr/fr/articles/9456780-utilisez-des-svg-sur-le-phantom-theme |  |
Autres
Arrondi des éléments du site :
Ce paramètre permet d'arrondir de manière homogène les boutons, sections et blocs si un arrière plan est présent sur ceux-ci :
0% | 100% |
| 
|
Format des dates :
Vous avez le choix entre 3 formats de date qui se répartiront à travers le thème, notamment sur les articles de blog :
31.12.2018
31 déc. 2018
31 décembre 2018
Taille des prix :
Ce paramètre influe sur tous les prix affichés sur la boutique, proportionnellement à leur affichage de base, comme le prix d'une produit sur sa page ou encore les cartes produits.
Petit | Normal | Large |
 |  |  |
Épaisseur des prix normaux et promo :
Normal | Gras |
 |
|
Décimales des prix :
Normales | Décimales en exposant | Décimales en incidence |
 |  |  |
Texte RGPD :
Ce texte sera réutilisé à travers la boutique à chaque formulaire demandant des informations sur l'utilisateur.
Diaporama
Ce type de paramètre concerne toutes les flèches des carrousels et diaporamas à travers votre boutique.
Style des flèches :
Chevron :
Classique | En pointillés | Plein | Remplissage au survol |
 |  |  |  |
Flèche :
Classique | En pointillés | Plein | Remplissage au survol |
 |  |  |  |
Transformation chevron -> Flèche au survol :
Classique | En pointillés | Plein |
 |  |
|
Format des flèches :
Carrée | Ronde |
 |  |
Vignettes
Type de vignette :
Suivant la nomination de vos couleurs, certaines apparaîtront visuellement par défaut. Ceci signifie que la nomination de ces couleurs en question font parties des 140 couleurs HTML de base, que nous avons pris soin de traduire dans les langues disponibles du thème pour les rendre compatibles.
Couleurs | Personnalisées |
 |  |
Options à afficher :
Permet d'afficher des vignettes sur d'autres options produit que "Couleur".
Par exemple, vous pouvez également le faire sur une option "Matériaux".
Format des vignettes de couleur :
Permet de définir quelle extension d'image permettra d'afficher les vignettes mise en place dans le contenu média de la boutique.
Suivez ce tutoriel complet sur la mise en place de ces vignettes de couleurs.
B - Couleurs
Général
Site
Barre de défilement du site
| 
|
C - En-tête de site
Affichage des icônes de navigation :
Icône | Texte |
 |  |
Bureau
Style du menu bureau :
1 ligne |
 |
2 lignes |
 |
Barre latérale gauche fixée |
 |
Action au défilement de la page :
Aucune |
|
Fixer le menu en haut de page |
 |
Ne faire apparaître le menu que lorsqu'on remonte sur la page |
|
Mobile
Action au défilement de la page : Même chose que ci-dessous pour l'en-tête mobile, le fonctionnement est seulement dissocié de la disposition bureau.
Marchés internationaux
Activer le sélecteur Pays / Langues :
Le contenu du sélecteur dépendra des marchés définis
Superposition du menu
La superposition du menu est possible par modèle de page, en activant sur une section le permettant la superposition de celle-ci. Vous pouvez le faire sur les sections suivantes : Diapositive, Diaporama, Vidéo, Vidéos. Celle-ci sera apparente en rendant transparent l'en-tête lorsque le statut la page n'a pas encore commencé à être défilée.
Par exemple, sur la section Diaporama, dans les paramètres de la section, vous retrouverez le paramètre Superposer la section 'En-tête' à cette section qui, une fois coché, activera cette option.
Les paramètres définissant cette superposition sont ensuite les suivants :
Image : Logo apparaissant lors de la superposition active, différent du logo classique une fois le défilement de la page engagé :
Cela est utile lorsque vous souhaitez afficher votre logo dans une couleur contrasté pour le faire ressortir en rapport du contenu se trouvant en dessous de la transparence.
Largeur maximum du logo (pixel) : Bureau / mobile dissociés
Couleurs des liens / Couleurs des liens au survol : Tout comme le logo, cela permet de dissocier les couleurs habituelles lorsque la transparence de l'en-tête est active pour contraster.
En-tête mobile
Position du menu hamburger :
Gauche | Droite |
 |  |
Afficher les icônes Recherhe / Wishlist / Compte client :
Recherche
Format de la recherche :
Ne pas afficher la recherche |
Champ dans le menu |
 |
Champ dans le menu + auto-complétion |
 |
Popup pleine largeur d'écran |
 |
Popup pleine largeur d'écran + auto-complétion |
 |
Icône SVG : Permet de mettre une icône SVG personnalisée pour remplacer l'existante (Tutoriel)
Icône FontAwesome : Permet de mettre une icône FontAwesome personnalisée pour remplacer l'existante (Tutoriel)
Afficher les pages dans les résultats de recherche : Permet d'afficher ou non les résultats des pages de votre boutique dans les résultats de recherche
Afficher les articles dans les résultats de recherche : Permet d'afficher ou non les résultats des articles de votre boutique dans les résultats de recherche
Icône panier
Fonction de l'icône panier : Lors d'un clic sur l'icône panier dans l'en-tête, vous pouvez proposer divers parcours à votre utilisateur :
Redirection vers le panier
Redirection vers la page de paiement
Mini panier en barre latérale droite
Mini panier en popup
Action lors d'un ajout au panier : Lorsqu'un ajout au panier se fait au travers de la boutique, vous avez la possibilité de proposer les comportements suivant à vos utilisateurs :
Ne rien faire
Ouvrir le mini panier la 1ère fois
Toujours ouvrir le mini panier
Rediriger vers le panier
Rediriger vers la page de paiement
Icône SVG : Permet de mettre une icône SVG personnalisée pour remplacer l'existante (Tutoriel)
Icône FontAwesome : Permet de mettre une icône FontAwesome personnalisée pour remplacer l'existante (Tutoriel)
Compte client
Uniquement si le compte client est activé sur cette boutique.
Icône SVG : Permet de mettre une icône SVG personnalisée pour remplacer l'existante (Tutoriel)
Icône FontAwesome : Permet de mettre une icône FontAwesome personnalisée pour remplacer l'existante (Tutoriel)
Multi-devises
Le multi-devises sur le Phantom thème est une application qui permet de convertir en temps réel les devises des divers prix affichés sur la boutique dans la devise sélectionnée par l'utilisateur parmi celles mises à disposition.
Afin que la convertion puisse se faire, il vous faut modifier le formattage de vos prix directement dans les paramètres de votre boutique
Pour ce faire, Rendez-vous dans Paramètres > Général > Devise de la boutique > Modifier le formatage :
Les 2 premiers champs sont à modifier :
Le 1er
<span class=money>€{{ amount }} EUR</span>Le 2ème
<span class=money>{{ amount }}€</span>En ce qui concerne l’affichage du prix, plusieurs formats sont disponibles
en remplaçant {{ amount }} par :
{{ amount }}⇒ 1,134.65{{ amount_with_comma_separator }}⇒ 1.134,65{{ amount_no_decimals }}⇒ 1,135{{ amount_no_decimals_with_comma_separator }}⇒ 1.335
Voici l'application est son résultat :
Afficher le sélecteur de devise : Permet d'afficher l'application
Format : Vous pouvez choisir d'afficher le prix avec ou sans la devise locale
Devises supportées : Indiquez ici même le code ISO des devises que vous souhaitez supporter sur votre boutique. Ces devises seront alors présentes dans le sélecteur et permettront d'afficher les prix dans la devise locale de l'utilisateur. Retrouvez les divers code ISO ici : https://www.xe.com/currency/.
Devise par défaut : Indiquez ici la devise qui sera sélectionnée par défaut au chargement de la boutique.
D - Carte produit
Informations
Placer un champ méta textuel au-dessus du prix : Permet de rajouter un élément spécifique à vos produits, comme par exemple un bienfait de celui-ci. Ici pour l'exemple, on peut rajouter le type de matériau utilisé :
Pour obtenir ce résultat, il faut tout d'abord avoir une donnée personnalisée sur vos produits textuelle.
Ensuite, sur chaque produit concerné, remplir cette donnée selon le produit :
Enfin dans le paramètre dans lequel on se trouve, il faut indiquer l'espace de nom et clé indiqué par Shopify en faisant un copier / coller :
Tronquer le titre sur une ligne maximum : Permet de ne pas afficher la totalité des titre si tant est que celui-ci dépasse la largeur disponible sur la carte produit et nécessite d'être affiché sur plusieurs lignes.
Non actif | Actif |
 |  |
Afficher le distributeur : Permet d'afficher le fournisseur définit dans la fiche produit côté backoffice. Utile lorsque vous possédez une boutique de revendeur et souhaitez indiqué à quelle marque appartient le produit.
 |  |
Afficher le type : Permet d'afficher le type de produit, utilie lorsque vous souhaitez agrémenter la catégorisation de ceux-ci, principalement sur des boutiques comportant énormément de produits.
 |  |
Afficher le prix (Master + uniquement) : Pour des boutiques de luxe, il est parfois utile en terme de conversion de ne pas afficher les prix sur les cartes produits. Ainsi en désactivant ce paramètre, le prix n'est apparent que sur la page produit.
Afficher une bordure de la couleur primaire :
Afficher une ombre :
Sans | Avec |
 |  |
Alignement du texte :
Gauche | Centré |
 |  |
Action au survol :
Zoom sur l'image | Afficher la seconde image | Faire défiler les images produits |
 |  |  |
Bouton d'ajout au panier (Master + uniquement) :
Aucun | Sous les infos produits (pleine largeur) |
|  |
Sous les infos produits (marge interne) | Au survol (pleine largeur) |
 |  |
Au survol (marge interne) | Au survol (en bas de l'image produit) |
 |
 |
Temps de l'animation au survol : Permet de gérer la durée de l'animation choisie sur la paramètre Action au survol
Afficher une marge autour de l'image :
Sans | Avec |
 |  |
Arrière plan de l'image : Couleur affichée si l'image possède un fond transparent :
Couleur des informations : Couleur des textes affichés sur la carte produit
Arrière-plan des informations :
 |  |
Titre (Bureau / Mobile dissocié)
Pour les titres des cartes produits, vous avez à disposition ces paramètres, dissocié entre bureau et mobile :
Taille, Épaisseur, Espacer les lignes, Espacer les lettres, Format
Affichage rapide
L'affichage rapide permet de voir les informations essentielles d'un produit sous forme de popup sans avoir à se rendre sur la page :
Vous pouvez ensuite choisir sur les blocs de la section produit dans un modèle produit quels sont les blocs à afficher dans cette popup :
Ce paramètre se retrouvera toujours en bas des paramètres de chaque bloc de la section produit :
Emplacement du bouton : Le choix du bouton peut être en haut à gauche / droite ou en bas à gauche / droite dans le cadre de l'image
Balise promotionnelle
Cette balise est apparente au choix lorsque le produit est en promotion :
Affichage :
Aucun | Texte | Pourcentage | Montant |
Retire la balise promotionnelle |  |  |  |
Texte : Texte affiché lorsque l'option Texte est sélectionnée sur le paramètre ci-dessus
Emplacement : peut être en haut à gauche / droite ou en bas à gauche / droite dans le cadre de l'image
Style :
Sobre | Arrondie | Animée |
 |  |  |
Variantes
Affichage du nombre de variantes sur une option en particulier sur le produit. Si plusieurs options se trouvent sur le produit, la 1ère s'affichera dans l'ordre définit sur la fiche produit dans le backoffice.
Options à afficher : Définissez les options pour lesquelles le nombre de variantes doit s'afficher
Arrière pan du contenu / Couleur du texte : Couleurs liées à l'affiche de la balise
Remarque : Afin que ce paramètre ne soit pas actif sur toutes les zones où des cartes produits se trouvent, vous pouvez choisir dans une section incluant des cartes produits si cette fonctionnalité doit s'afficher ou non, pour ce faire vous retrouverez le paramètre ci-dessous dans la section dans la partie Carte produit :
Vignettes (Master + uniquement)
Affichage des vignettes des variantes correspondantes sur les options choisies. De plus, au survol des vignettes, l'image de la variante liée s'affiche alors.
Suivez ce tutoriel afin de l'intégrer sur votre boutique : Tutoriel
Balise à afficher (Master + uniquement)
Ce paramètre là permet d'afficher des balises (max 3 par produit) sur les cartes produits de sorte à faire ressortir certains dans la masse :
Suivez ce tutoriel afin de l'intégrer sur votre boutique : Tutoriel
F - Typographie
Cette partie concerne l'ensemble des textes affichés sur votre boutique.
Nous allons voir pour chaque catégorie les paramètres disponibles.
Titres (Hn)
Les Titres Hn sont des titres hiérarchiser sur un site, cela permet aux navigateurs de comprendre la structure de votre site, comme un sommaire.
Police : Permet de choisir la police définit pour tous les titres de la boutique
Nous vous proposons de pouvoir contrôler pour chaque type de Hn, allant de H1 (+ important) à H6 (- important) ces paramètres, à la fois bureau et mobile dissociés :
Taille, Épaisseur, Espacer les lignes, Espacer les lettres, Format
Corps du texte
Cette partie concerne les textes hors titre situés sur votre boutique.
Police : Permet de choisir la police définit pour tous les textes hors titre de la boutique
Comme ci-dessus, nous vous proposons de pouvoir contrôler pour chaque type de Hn, allant de H1 (+ important) à H6 (- important) ces paramètres, à la fois bureau et mobile dissociés :
Taille, Épaisseur, Espacer les lignes, Espacer les lettres, Format
Liens principaux (En-tête / Menu Mobile)
Sur cette partie, vous pouvez gérer, bureau et mobile dissociés, les paramètres suivants :
Taille, Épaisseur, Espacer les lettres
Icônes (En-tête / Menu Mobile)
Sur cette partie, vous pouvez gérer la Taille, bureau et mobile dissociés
Boutons
Sur vos boutons de manière générale, vous pouvez contrôler communs sur tout support :
Format, Épaisseur
Ensuite, dissocié entre bureau et mobile, vous avez le contrôle sur :
Taille, Espacer les lignes, Espacer les lettres
G - Boutons
Dans cette catégorie, 4 types de boutons sont disponibles :
Bouton primaire : Bouton d'action primaire
Bouton secondaire : Bouton d'action secondaire / contrastée
Bouton d'ajout au panier : Bouton permettant d'ajouter au panier partout sur la boutique
Bouton d'achat : Bouton redirigeant vers le passage en caisse
Sur chaque type de boutons, vous aurez le contrôle sur les paramètres suivants :
Style :
Classique | Pointillait dessin | Trait dessin |
 |  |  |
Rebond | Poussoir | Remplissage |
 |  |  |
Flèches animées | Encadrement | Effet miroir |
 |  |  |
Futuriste | Collision | Entrecoupé |
 |  |  |
Afficher une ombre :
Afficher une bordure :
Aucune | Fine | Moyenne | Épaisse |
 |  |  |  |
Couleurs : Arrière-plan & Texte, normal et au survol
Bouton d'ajout au panier :
Style d'animation d'ajout au panier :
Aucune | Coche animée |
 |  |
Panier compteur animé | Panier remplissage animé |
 |  |
Icône SVG : Permet de mettre une icône SVG personnalisée pour remplacer l'existante (Tutoriel)
Icône FontAwesome : Permet de mettre une icône FontAwesome personnalisée pour remplacer l'existante (Tutoriel)
H - Produits recommandés
Ces paramètres concernent la section Produits associés présente sur un modèle produit.
Paramètres d'affichage
Afficher le bouton d'ajout au panier (Master + uniquement) : Dépend du paramètre Bouton d'ajout au panier dans Carte produit
Affichage des infos produits :
En dessous | En dessous + variantes superposées partiellement à l'image (survol) |
 |  |
Superposés entièrement à l'image (survol) | Superposés partiellement à l'image (survol) |
 |  |
Recadrage de l'image / Dimension des images : Voir tutoriel pour utiliser ce paramètre correctement
Seo du titre : Permet de gérer le Hn du titre de la section Produits associés sur un modèle produit
Couleurs du texte : Couleur des textes présents sur les cartes produits
Informations sur les variantes : Aucune / Nombre et variantes / Vignette (Tutoriel)
Disposition
Mise en page : Diaporama / Grille
Style des gouttières : Uniquement pour la Mise en page sur Grille. Permet de gérer l'espacement entre les cartes produits dans la grille
Bureau / mobile dissociés :
Total de produits affichés : Nombre de produits affichés au total
Produits affichés par ligne : Nombre de produis affichés par ligne
Attention : Vous ne pouvez pas afficher plus de produits sur mobile que sur bureau
Paramètre du diaporama
Suivez ce tutoriel afin de maitriser les paramètres de cette catégorie : Tutoriel
I - Liste de favoris (Master + uniquement)
Cette application permet de stocker les produits favoris d'un visiteur dans les cookies de son navigateur.
Créez une page avec pour modèle de page wishlist afin d'afficher les produits sélectionnés par les clients.
Permettre au client d'ajouter des produits à ses favoris : Ce paramètre active l'application Liste de favoris
Lien vers la page : Permet de rediriger le client vers la page Wishlist
Icône SVG : Permet de mettre une icône SVG personnalisée pour remplacer l'existante (Tutoriel)
Icône FontAwesome : Permet de mettre une icône FontAwesome personnalisée pour remplacer l'existante (Tutoriel)
Affichage des infos produits : Retrouvez l'aperçu des options ici
Recadrage de l'image / Dimension des images : Voir tutoriel pour utiliser ce paramètre correctement
Informations sur les variantes : Aucune / Nombre et variantes / Vignette (Tutoriel)
Produits affichés par ligne (Bureau / mobile dissociés) : Nombre de produits affichés par ligne sur la grille se trouvant dans la page du modèle Wishlist.
Attention : Vous ne pouvez pas afficher plus de produits sur mobile que sur bureau
J - SEO On Site
Cette catégorie vous permet de gérer certains paramètres concernant le SEO de votre boutique.
Mettre des pages en noindex : Permet de prévenir l'indexation de certaines pages de votre boutique pour éviter de diluer le flux entrant. Mettre l'ancre (ex: contactez-nous) des pages en séparation par une virgule (Ex: faq,infos,contactez-nous,politique-dexpedition)
Le modèle Liste de collections n'est pas accessible via le backoffice Shopify pour pouvoir modifier les attributs SEO comme le meta title ou la meta description.
Nous les avons mise à disposition ici-même :
Meta title de la page /collections/all / Meta description de la page /collections/all :
 | 
|
K - Médias sociaux
Image de partage social : Cette image s'affiche lorsque vous partagez un lien issu de votre site sur n'importe quel réseau social.
Exemple dans Messenger :
 |  |
Comptes
Dans cette partie, placez les différents liens de vos réseaux sociaux afin qu'il s'affiche à divers endroits sur votre boutique, mais aussi pour votre SEO car le navigateur pourra les lire.
Voici la liste des réseaux sociaux disponibles aujourd'hui :
Facebook
Discord
Twitter
Pinterest
Tiktok
Instagram
Linkedin
Tumblr
Snapchat
Youtube
Viméo
Partage : Permet à votre visiteur de partager vos articles de blog / produits sur les Facebook, Tweeter, Pinterest
L - Addons
Application d'avis installée : Permet d'intégrer correctement l'application au Phantom thème, que ce soit pour l'affichage des étoiles sur les cartes produits ou encore dans les données enrichies d'un produit pour Google en SEO par exemple. Liste des applications d'avis clients d'ores et déjà gérée via notre thème :
Loox
Yotpo
Ali Reviews
Ryviu
Product reviews
Rivyo
A Reviews
Afficher le bouton 'Retour vers le haut de page' :
Désactiver Clic Droit / F12 / Copier-Coller / etc... : Cette application permet d'éviter qu'un visiteur puisse copier votre contenu
Addons externes
Activer les addons suivants jouera sur la vitesse de chargement votre site.
Activer les animations Tutoriel (à définir dans les sections) : Cette application vous permet de pouvoir animer votre contenu à travers le site. Vous retrouverez un ensemble de paramètre d'animation sur les sections et blocs animables.
Activer le WebPlayer Lottie Tutoriel : Permet l'ajouter de LottieFiles sur votre boutique.
Exemple d'animation possible avec LottieFiles :
Activer les icônes Font Awesome Tutoriel : Cette application vous permet d'accéder à 95% du catalogue des icônes FontAwesome. Seule les icônes les plus récentes ne seront pas accessible, en majorité après la version 6.2.
M - Js / Css personnalisé (Phantom)
Attention : Ajouter du code dans ces champs peut rompre le bon fonctionnement de votre boutique et de ses fonctionnalités. Agissez avec prudence lorsque vous tentez de réaliser des changements dans ces paramètres.
Avant la balise </head> : Destiné à du code devant être chargé en priorité
Script : Champ permettant d'intégrer des lignes de code dans la partie <head></head> de votre code, juste avant la fermeture de la balise </head>. Utile pour intégrer des pixels, du code d'app tierces, etc.
Css : Utile pour rajouter du css à une de vos intégrations spécifiquement sur toute la boutique
Avant la balise </body> : Destiné à du code pouvant être chargé sans priorité
Script : Champ permettant d'intégrer des lignes de code dans la partie <body></body> de votre code, juste avant la fermeture de la balise </body>. Utile pour intégrer du code d'app tierces, etc.
Css : Utile pour rajouter du css à une de vos intégrations spécifiquement sur toute la boutique
N - Css personnalisé
Paramètre permettant de gérer du css globalement sur votre boutique, commun à tous thème.
Nous conversons nos paramètres Js / Css personnalisé (Phantom), car nous estimons permettre plus de possibilités quant aux changements possible, là où Shopify restreint celui-ci sur de nombreux plans.