Passer au contenu principal

Utiliser les modèles sur le Phantom Thème

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

Introduction

Depuis juin 2021, Shopify a crée le principe de modèles de page dynamique, avec la possibilité d’en ajouter / supprimer avec une limite très large.

Ce principe permet d’obtenir des modèles différents pour chaque type de page comme les pages produits, collections, blogs, articles, etc...

Ces modèles peuvent ensuite être associés de manière unique et indépendante à des pages de votre boutique.7

Ainsi, si vous le souhaitez, vous pouvez par exemple avoir une page produit unique pour chacun de votre produit.

✅ Complétez vos modèles avec les champs métas, vous permettant de rendre un paramètre dynamique suivant le contenu affiché : le produit, la collection, ou encore une variante d’un produit.

1 - Création

Dans la personnalisation de votre Phantom Thème, rendez-vous dans l’en-tête et cliquez sur le sélecteur de modèle de page :

Nous prendrons comme exemple les pages produits.

Cliquez sur Produits, puis Créer un modèle :

Une popup s’ouvre vous demandant de renseigner le nom de votre nouveau modèle, et également de sélectionner le modèle de départ pour le créer.

Cliquez ensuite sur Créer une modèle :

Vous pouvez ici choisir le nom de votre modèle. Pensez au fait que le modèle sera ensuite stocker sur Shopify en minuscule, et les espaces seront remplacés par des "-".

Il vous est possible de créer un modèle à partir d'un modèle existant. Naturellement pour le 1er, vous n'aurez pas le choix de le créer via le seul modèle disponible, celui par défaut. En revanche par la suite, admettons vous créé un modèle appelé mon-produit-personnalisé, vous pourrez partir de cette base pour créer mon-produit-personnalisé-2.

Une fois créé, sur la colonne de gauche, vous retrouverez le nom de votre modèle, le nombre de pages attribuées à ce modèle (ici produits), et enfin la page permettant d’obtenir un aperçu de ce modèle.

Cliquez sur Modifer permettra de changer de page pour l’aperçu, et ainsi tester différents contenus.

Cliquez sur le nom de la page vous renverra vers le paramétrage de celle-ci dans votre backoffice Shopify :

2 - Attribution d’un modèle

Pour associer un modèle produit à vos produits, rendez-vous dans votre boutique sur Produits, puis cliquez sur l’un d’entre eux pour lequel vous souhaitez attribuer votre modèle précédemment créé et arrivé dans sa fiche backoffice.

Sur la colonne de droite de cette page produit dans Shopify, en bas de celle-ci, vous retrouverez Boutique en ligne avec un sélecteur ayant pour label Modèle de thème :

Comme vous le constatez, votre modèle se retrouve alors dans la liste, et vous pouvez le sélectionner afin que ce produit ci bénéficie de ce modèle en particulier.

⚠️ Les modèles de la liste sont ceux présents dans le thème publié uniquement.

3 - Supprimer un modèle

Sur Shopify, il n'est pas encore possible depuis l'interface de supprimer facilement un modèle crée.
Pour ce faire, il faut se rendre dans le code, mais je rassure, c'est très simple !

Il faut dans un premier temps cliquer sur Modifier le code sur le thème concerné :

La partie qui nous intéressera sera celle de gauche.

En effet ici vous retrouverez la totalité des fichiers permettant à votre thème de fonctionner !

⛔ Ne supprimer ou modifier par n'importe quel fichier sans le savoir, vous pourriez nuire au fonctionnement de l'ensemble de celui-ci et revenir en arrière n'est pas toujours possible !!

Dans ce colonne de gauche, nous retrouvons des dossiers, dont le dossier Modèles.
Dans celui-ci, admettons vous souhaité supprimer le modèle guide-des-tailles que vous auriez précédemment créé sur le modèle produit, vous devez alors chercher dans la liste des fichiers modèles ce fichier : product.guide-des-tailles.json.
Le fichier sera toujours nommé avec en prefix le nom du modèle de base, puis le nom que vous avez donné, et enfin le format du fichier ici qui est json.
En haut de la colonne de gauche, vous pouvez également utilisé la colonne de gauche pour le trouver en tapant le nom que vous avez donné à votre modèle.

⚠️ N'oubliez pas, le nom de votre fichier sera en minuscule avec des tirets à la place des espaces.

Cliquez ensuite sur le fichier concerné dans la colonne de gauche et l'icône d'une poubelle apparaîtra, il vous suffira alors de supprimer le modèle.

⛔ Cette action est irréversible, assurez vous de ne plus utiliser ce modèle pour pouvoir le supprimer sans accrocs.

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