Modifier votre thème

Liens en vedette

1. Modifier votre thème
2. Documentation Shopify sur l’éditeur de thème
3. Dupliquer votre thème
4. Documentation Shopify sur l’assistance relative aux thèmes
5. Télécharger des images
6. Thèmes
7. Éditeur de code
8. Modifier le texte par défaut de votre thème
9. Aperçu de votre thème
10. Documentation du thème

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez l’éditeur de thème Shopify pour ajuster le contenu, la mise en page, la typographie et les couleurs de votre thème Align sans modifier le code. Les sections et les paramètres vous permettent d’adapter votre boutique tout en travaillant dans un aperçu en direct.

Avant de personnaliser votre thème

Préparez-vous avant d’effectuer des modifications importantes afin de pouvoir expérimenter en toute confiance.

1. Dupliquez votre thème pour créer une sauvegarde. Vous pouvez ignorer les modifications et recommencer à partir de la copie si nécessaire.
2. Consultez le niveau d’assistance disponible
3. Consultez les exigences et les bonnes pratiques relatives au téléchargement d’images

Astuce

Dupliquez Align avant d’apporter des modifications importantes à la mise en page ou au contenu, en particulier lorsque vous modifiez votre thème publié.

Accéder à l’éditeur de thème

L’éditeur de thème affiche une vue arborescente du contenu du modèle que vous consultez. Sélectionnez une section ou un bloc pour ouvrir ses paramètres. Utilisez ▸ pour développer une section et ▾ pour la réduire.

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes
2. À côté du thème Align que vous souhaitez modifier, cliquez sur Personnaliser.

Utiliser la barre de menu

La barre de menu fournit des informations sur le thème, des options de navigation, des outils de modification et des commandes d’enregistrement.

Utilisez la barre de menu pour effectuer les opérations suivantes :

1. Revenir à votre interface administrateur Shopify et consulter le nom et le statut de votre thème. Un thème publié porte la mention Live ; les thèmes non publiés portent la mention Draft.

2. Ouvrir le menu des actions pour :

   • Utiliser Edit code pour ouvrir l’éditeur de code
   • Utiliser Edit default theme content pour modifier le texte par défaut de votre thème
   • Ouvrir un aperçu de votre thème
   • Utiliser View documentation pour ouvrir la documentation de votre thème.
   • Consulter les raccourcis clavier disponibles.
   • Utiliser Get support pour obtenir de l’aide

3. Passer d’un marché à l’autre et d’un modèle à l’autre.

4. Activer ou désactiver Sidekick ou l’inspecteur d’aperçu

5. Modifier l’aperçu à l’aide des commandes de taille d’écran, utiliser les commandes d’annulation et de rétablissement, puis enregistrer vos modifications.

Afficher la documentation, l’assistance et les détails du thème

Ouvrez le menu de la barre de menu pour afficher les détails du thème, notamment sa version et les informations sur le développeur. Ce même menu fournit des liens vers la documentation du thème et les informations d’assistance.

Obtenir de l’aide pour les personnalisations

Pour obtenir de l’aide sur l’utilisation ou la personnalisation d’Align, commencez par consulter la documentation de Company XYZ et contactez l’assistance de Company XYZ. Pour les questions relatives à l’interface administrateur Shopify, à la facturation, au compte ou à la plateforme, utilisez les options d’assistance Shopify. Vous pouvez également consulter les recommandations de Shopify sur la façon de contacter le développeur de votre thème pour obtenir de l’aide et les ressources supplémentaires sur l’assistance relative aux thèmes

Utiliser les raccourcis clavier

Les raccourcis clavier peuvent accélérer les tâches courantes de navigation et de modification dans l’éditeur de thème.

Catégorie	Action	Raccourci sous Windows	Raccourci sous macOS
Général	Annuler	CTRL • Z	⌘ • Z
	Rétablir	CTRL • Y	⌘ • Y
	Enregistrer	CTRL • S	⌘ • ⇧ • S
	Afficher tous les raccourcis	CTRL • /	⌘ • /
Outils	Inspecteur d’aperçu	CTRL • SHIFT • │	⌘ • ⇧ • │
	Mode aperçu	⊞ • CTRL • │	⌘ • ⌃ • │
	Sidekick	CTRL • .	⌘ • .
Navigation	Sections	⊞ • CTRL • Z	⌘ • ⌃ • 1
	Paramètres du thème	⊞ • CTRL • Z	⌘ • ⌃ • 2
	Intégrations d’applications	⊞ • CTRL • Z	⌘ • ⌃ • 3
Sections et blocs	Masquer et afficher	CTRL • SHIFT • H	⌘ • ⇧ • H
	Supprimer	SHIFT • ⭠	⇧ • ⌫
	Sélectionner l’élément précédent	SHIFT • ←	⇧ • ▲
	Sélectionner l’élément suivant	SHIFT • →	⇧ • ▼
	Ouvrir l’élément sélectionné	SHIFT • ENTER	⇧ • ▼
	Développer toutes les sections	CTRL • SHIFT • O	⌘ • ⇧ • O
	Réduire toutes les sections	CTRL • SHIFT • P	⌘ • ⇧ • P

Choisir et prévisualiser des modèles

Utilisez le sélecteur de page dans la barre supérieure pour accéder aux modèles de votre thème Align.

Avec un thème compatible, vous pouvez créer un modèle directement depuis le sélecteur de page en choisissant New template.

Prévisualiser un modèle avec une ressource spécifique

Vous pouvez prévisualiser un modèle compatible avec toute ressource correspondante de votre boutique. Par exemple, prévisualisez un modèle de produit avec différents produits pour vérifier l’affichage de leur contenu. Vous devez tout de même attribuer le modèle à la ressource dans l’interface administrateur Shopify.

Vous pouvez rechercher des modèles et des ressources depuis la barre Search du sélecteur de page, Add section, Add block ou App embeds.

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes
2. À côté du thème Align que vous souhaitez modifier, cliquez sur Personnaliser.
3. Dans le menu des modèles, sélectionnez le modèle à prévisualiser.
4. Dans la section Preview du menu latéral, cliquez sur Change.
5. Dans le menu Select, choisissez la ressource à prévisualiser.

Utiliser l’inspecteur d’aperçu

L’inspecteur d’aperçu vous permet de sélectionner directement des sections et des blocs dans l’aperçu afin de trouver rapidement leurs paramètres. Vous pouvez également réorganiser, masquer ou dupliquer des sections et des blocs depuis la fenêtre d’aperçu.

Lorsque l’inspecteur d’aperçu est actif, sélectionnez un élément encadré pour ouvrir ses paramètres. Sur un appareil mobile, sélectionnez un élément et ouvrez le panneau inférieur pour modifier ses paramètres.

Le contour indique ce que vous avez sélectionné :

1. Une ligne bleue continue identifie la section active. Ses paramètres sont mis en évidence en gris dans la barre latérale.
2. Une ligne bleue en pointillés identifie un bloc associé à la section sélectionnée. Sélectionnez-le pour ouvrir les paramètres du bloc ou de la section.

La sélection d’une zone dans l’aperçu charge ses paramètres dans la barre latérale. Sur un appareil mobile, appuyez deux fois pour parcourir le site comme le ferait un client.

Ajouter des sections et des blocs depuis l’aperçu

Vous pouvez ajouter directement des sections et des blocs depuis l’inspecteur d’aperçu. Dans l’application Shopify, appuyez longuement sur une section pour la gérer.

Outil	Description
Add section	Le bouton Add section apparaît au-dessus et au-dessous de la section sélectionnée. Sélectionnez-le pour insérer une section au-dessus ou au-dessous de la section actuelle.
Add block	Le bouton Add block apparaît lorsque vous passez le curseur sur un bloc. Placez votre curseur sur le bouton, choisissez un bloc de thème ou d’application disponible, puis modifiez le nouveau bloc dans la barre latérale droite.

Gérer les éléments depuis l’aperçu

Utilisez l’inspecteur d’aperçu pour déplacer, masquer, dupliquer ou supprimer des sections et des blocs.

Vérifier différentes tailles d’écran

Basculez l’aperçu entre les tailles ordinateur, mobile et plein écran pour vérifier le fonctionnement de vos modifications dans les différentes mises en page. Utilisez les boutons de taille d’écran de la barre de menu pour sélectionner le mode ordinateur, mobile ou plein écran.

Annuler et rétablir les modifications

Utilisez les boutons undo et redo pour annuler ou rétablir les personnalisations non enregistrées. Après l’enregistrement, ces modifications ne peuvent plus être annulées ni rétablies. Les boutons sont grisés lorsqu’aucune modification ne peut être annulée ou rétablie.

Utiliser la barre latérale

La barre latérale affiche une vue arborescente du contenu du modèle actuel. Utilisez-la pour gérer les sections, les blocs et leurs paramètres.

Modes de barre latérale

L’éditeur utilise une ou deux barres latérales selon la largeur d’écran disponible.

1. Le mode double barre latérale est utilisé sur les écrans larges. Le panneau de navigation apparaît à gauche et le panneau de paramètres à droite.
2. Le mode barre latérale unique est utilisé dans les fenêtres de navigateur plus étroites afin de conserver davantage d’espace pour l’aperçu. Le panneau de paramètres s’ouvre par-dessus le panneau de navigation lorsque vous sélectionnez une section ou un bloc.

Mode double barre latérale

Lorsque votre écran et la fenêtre du navigateur entièrement développée mesurent au moins 1 600 pixels de large, l’éditeur affiche deux barres latérales.

Pour utiliser le mode barre latérale unique sur un grand écran, réduisez la largeur de la fenêtre du navigateur jusqu’à ce que le panneau de paramètres recouvre la barre latérale de navigation ou disparaisse de celle-ci.

Mode barre latérale unique

Dans les fenêtres de navigateur plus étroites, l’éditeur affiche une seule barre latérale afin de laisser davantage d’espace à l’aperçu. Sélectionnez une section ou un bloc pour ouvrir ses paramètres par-dessus le panneau de navigation.

Gérer les sections et les blocs

La barre latérale répertorie les sections et les blocs de la page actuelle. Les blocs sont affichés par défaut, tandis que les sections d’en-tête et de pied de page sont réduites par défaut.

Comprendre les groupes de sections

Chaque modèle de page organise les sections dans les zones suivantes :

1. Header comprend l’en-tête, la barre d’annonce et les applications ou le Liquid personnalisé.
2. Template contient le contenu principal de la page, comme les articles de blog, les collages, les listes de collections ou le Liquid personnalisé.
3. Footer comprend le pied de page, l’inscription par e-mail et les applications ou le Liquid personnalisé.

Les modifications apportées à l’en-tête et au pied de page s’appliquent aux pages de votre boutique. Par exemple, le Liquid personnalisé ajouté à l’en-tête apparaît sur les pages de produits, la page d’accueil et les autres pages.

Développer et réduire les éléments

Sélectionnez le bouton situé à côté du nom d’une section pour afficher ou masquer son contenu. Sélectionnez une section ou un bloc pour ouvrir ses paramètres.

Déplacer des sections et des blocs

Faites glisser une section ou un bloc à l’aide de la poignée ::: , puis déposez-le à un emplacement disponible. Si l’emplacement n’autorise pas cet élément, celui-ci revient à sa position d’origine.

Supprimer des sections et des blocs

Supprimez une section ou un bloc de l’une des façons suivantes :

1. Placez le curseur à côté du nom de la section et sélectionnez le bouton de suppression.

   

2. Sélectionnez la section, puis choisissez Remove section dans ses paramètres.

   

Pour supprimer un élément de la barre latérale :

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes
2. À côté du thème Align que vous souhaitez modifier, cliquez sur Personnaliser.
3. Dans la barre latérale, sélectionnez la section ou le bloc à supprimer.
4. Cliquez sur Remove section ou Remove block.
5. Cliquez sur Save. Si vous modifiez un thème publié, cliquez sur Publish pour enregistrer les modifications et les mettre en ligne dans votre boutique.

Masquer des sections et des blocs

Sélectionnez le bouton 👁️ pour masquer une section ou un bloc.

Notes d’utilisation

1. Protégez votre point de départ. Créez une copie du thème avant d’expérimenter des modifications importantes.
2. Prévisualisez le contenu pertinent. Testez les modèles avec les produits, collections ou autres ressources qu’ils afficheront.
3. Vérifiez les mises en page responsives. Examinez les aperçus sur ordinateur et sur mobile avant d’enregistrer ou de publier.
4. N’oubliez pas les zones partagées. Les modifications apportées à l’en-tête ou au pied de page affectent les pages de votre boutique.
5. Enregistrez intentionnellement. Les fonctions d’annulation et de rétablissement ne concernent que les modifications non enregistrées.