Points clés
- Les templates personnalisés vous permettent de donner une mise en page complètement différente à des pages, produits ou collections spécifiques.
- Créez-les dans l’éditeur de code : dossier templates → nouveau fichier (par ex.,
page.custom.jsonouproduct.feature.json).- Les templates JSON définissent quelles sections s’affichent sur la page — aucun code HTML requis.
- Assignez un template à une page, un produit ou une collection via le menu déroulant “Modèle de thème” (Theme template) dans l’éditeur.
Une seule mise en page ne convient pas à toutes les pages. Votre page À propos a besoin d’une mise en page différente de celle de votre page Contact. Un produit phare mérite une autre présentation que votre template produit standard. Le système de templates personnalisés de Shopify rend tout cela possible sans avoir à créer plusieurs thèmes.
Comment créer un template personnalisé sur Shopify ?
Les modèles personnalisés se trouvent dans le dossier templates/ de votre thème. Chaque modèle est un fichier JSON qui définit quelles sections s’affichent sur ce type de page.
Convention de nommage :
page.custom.json— un modèle de page personnalisé (accessible en tant que “page.custom” dans le sélecteur de modèle)product.feature.json— un modèle de produit personnalisécollection.seasonal.json— un modèle de collection personnaliséarticle.long-form.json— un modèle d’article de blog personnalisé
La partie avant le point est le type de page. La partie après est votre nom personnalisé. Vous pouvez nommer la partie personnalisée comme vous le souhaitez (pas d’espaces, en minuscules, tirets uniquement).
À lire aussi : Créateur de pages Fudge.
À lire aussi : Créer une nouvelle page sur Shopify.
Étape par étape — créer un template de page personnalisé
Étape 1 - Dupliquez votre thème. Boutique en ligne → Thèmes → menu aux trois points → Dupliquer.
Étape 2 - Ouvrez l’éditeur de code sur le thème dupliqué. Boutique en ligne → Thèmes → Actions → Modifier le code.
Étape 3 - Allez dans le dossier templates/.
Étape 4 - Cliquez sur “Ajouter un nouveau modèle” (le bouton + à côté du dossier, ou cherchez l’option “Ajouter un modèle”).
Étape 5 - Sélectionnez le type de modèle (page, product, collection, etc.) et donnez-lui un nom (ex. : “landing”).
Étape 6 - Shopify crée un nouveau fichier JSON : page.landing.json.
Étape 7 - Le contenu par défaut ressemble à peu près à ça :
{
"sections": {
"main": {
"type": "main-page",
"disabled": false,
"settings": {}
}
},
"order": ["main"]
}Ce modèle utilise actuellement la même section de contenu principal que le modèle de page standard. Vous pouvez ajouter d’autres sections ici.
À lire aussi : Ajouter des blocs à une section Shopify.
Ajouter des sections à votre template personnalisé
Pour ajouter une section image hero (ou bannière) à votre modèle de landing page :
{
"sections": {
"hero": {
"type": "image-banner",
"settings": {
"image_height": "large",
"show_text_below": false
}
},
"main": {
"type": "main-page",
"settings": {}
},
"testimonials": {
"type": "testimonials",
"settings": {
"title": "What our customers say"
}
}
},
"order": ["hero", "main", "testimonials"]
}Important : La valeur "type" doit correspondre au nom exact du fichier de la section dans votre dossier sections/ (sans l’extension .liquid). Utilisez les noms exacts.
Le tableau "order" contrôle l’ordre dans lequel les sections s’affichent sur la page.
À lire aussi : Créer une section personnalisée sur Shopify.
Comment assigner un template à une page ?
Pour les pages :
- Allez dans Boutique en ligne → Pages → sélectionnez la page
- Regardez dans la barre latérale droite — trouvez “Modèle de thème”
- Sélectionnez votre nouveau modèle dans le menu déroulant (ex. : “page.landing”)
- Enregistrez
Pour les produits :
- Produits → sélectionnez le produit
- Barre latérale droite → “Modèle de thème”
- Sélectionnez votre modèle (ex. : “product.feature”)
- Enregistrez
Pour les collections :
- Produits → Collections → sélectionnez la collection
- Barre latérale droite → “Modèle de thème”
- Sélectionnez votre modèle
Le menu déroulant des modèles n’affiche que les modèles correspondant au type de contenu actuel : les modèles de page pour les pages, les modèles de produit pour les produits, etc.
Modifier le contenu du template dans l’éditeur de thème
Une fois qu’un template personnalisé est assigné à une page, vous pouvez le modifier dans l’Éditeur de thème :
- Boutique en ligne → Thèmes → Personnaliser
- Utilisez le sélecteur de page en haut pour naviguer vers la page utilisant votre template personnalisé
- Les sections définies dans votre template JSON apparaissent dans la barre latérale de gauche
- Modifiez les paramètres des sections, ajoutez de nouvelles sections (dans la portée du template) et réorganisez-les selon vos besoins
Les modifications effectuées dans l’Éditeur de thème mettent à jour le fichier template JSON de manière automatique.
Comment uploader un template ?
Vous ne pouvez pas importer directement un fichier de template pré-construit (upload) via l’interface d’administration de Shopify. À la place :
- Créez des templates en ajoutant de nouveaux fichiers JSON dans l’éditeur de code (comme expliqué plus haut)
- Copiez des templates depuis un autre thème en copiant le contenu JSON de l’éditeur de code d’un thème pour le coller dans un nouveau fichier au sein de l’éditeur de code de votre thème
- Importez via la CLI Shopify (pour les développeurs) — cela permet de pousser des fichiers de thème incluant des templates depuis une machine locale
Pour les marchands, la création de templates via l’éditeur de code reste l’approche standard et la plus simple.
Cas d’usage courants pour les templates personnalisés
Modèle de landing page. Pas de navigation dans le header, pas de footer, hero en pleine largeur, un seul CTA. À assigner aux pages de campagnes venant de publicités.
Modèle de produit phare. Page produit plus immersive avec une section vidéo dédiée, plus de détails sur les ingrédients/matériaux, et un tableau comparatif. À assigner aux produits phares.
Page d’histoire de la marque. Grande typographie, images en pleine largeur, section équipe. À assigner à la page À propos.
Page de vente en gros. Affichage différent des prix, section formulaire, contenu spécifique B2B. À assigner aux pages de vente en gros masquées.
FAQ
En partie. Certains thèmes vous permettent de "Créer un modèle" directement depuis l'éditeur de thème, ce qui génère un nouveau fichier JSON en arrière-plan. Au-delà, tout ce qui est plus avancé (renommer des sections, structure JSON personnalisée, importer des modèles) nécessite l'éditeur de code ou un outil comme Fudge qui génère le JSON pour vous.
Dans l'éditeur de code, ouvrez le dossier templates/, trouvez le fichier JSON de votre modèle personnalisé, puis cliquez sur le menu aux trois points → Supprimer. Avant de le supprimer, réattribuez toutes les pages, produits ou collections qui utilisent actuellement ce modèle à un autre, sinon ils repasseront sur le modèle par défaut pour ce type de ressource.
Pas directement. Shopify ne propose pas d'action pour renommer. À la place, créez un nouveau modèle avec le nom souhaité, copiez le contenu JSON de l'ancien, réattribuez vos pages/produits/collections au nouveau modèle, et supprimez l'ancien fichier.
Oui. Ouvrez l'éditeur de code du thème source et copiez le JSON de votre fichier de modèle personnalisé. Dans le thème de destination, créez un nouveau modèle avec le même format de nom (page.landing.json, etc.) et collez le JSON. Important : toutes les sections référencées dans le JSON ("type": "image-banner", etc.) doivent également exister dans le thème de destination, sinon le modèle affichera des erreurs.
Un modèle est un fichier JSON qui définit la mise en page d'une page spécifique (quelles sections apparaissent et dans quel ordre). Une section est l'élément de base - un fichier Liquid avec du HTML, CSS et des paramètres - qui est affiché dans un modèle. Les modèles organisent les sections ; les sections affichent le contenu.
À lire aussi : Personnaliser votre page produit Shopify.