Pourquoi le curseur d'échelle des titres de Shopify ne modifie-t-il pas mon H1 ?

Certains thèmes appliquent l'échelle de taille des titres uniquement à des classes spécifiques au thème, et non aux balises H1 de base. Inspectez l'élément dans les DevTools pour trouver la classe qui le contrôle, puis mettez-la à jour via CSS.

Puis-je avoir différentes tailles de titres selon les types de pages Shopify ?

Oui. Shopify ajoute des classes spécifiques aux modèles dans la balise body. Ciblez votre CSS avec body.template-product h1 pour appliquer des tailles par modèle sans affecter les autres pages.

Les titres Shopify doivent-ils avoir la même taille sur mobile et sur ordinateur ?

Non. Un titre conçu pour l'ordinateur semble surdimensionné sur mobile - réduisez-le d'environ 30 à 50 pour cent avec une media query. Sinon, les gros titres poussent le contenu sous la ligne de flottaison.

Le changement de taille des titres affectera-t-il le SEO Shopify ?

Non. Le SEO dépend de la hiérarchie des titres et des mots-clés contenus à l'intérieur, pas de la taille visuelle. Vous pouvez modifier les tailles de police librement tant que la structure des balises sous-jacente reste intacte.

Changer la taille de police des titres sur Shopify : Paramètres & CSS (2026)

Points clés

Les tailles de titres globales se définissent dans l’Éditeur de thème > Paramètres du thème > Typographie.

La plupart des thèmes proposent un curseur d’échelle de titre qui ajuste proportionnellement la taille de tous les titres.

Pour contrôler chaque titre individuellement (H1 vs H2 vs H3 à des tailles différentes), vous aurez besoin de CSS dans le dossier assets de votre thème.

Les modifications CSS nécessitent de modifier assets/base.css ou similaire - dupliquez d’abord votre thème.

Fudge peut écrire et appliquer le CSS pour vous à partir d’une simple description.

L’Éditeur de thème de Shopify vous donne le contrôle sur les polices de titres et une échelle de taille générale. Pour des tailles précises par titre, vous devrez ajouter du CSS. Voici comment faire les deux.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge - un éditeur de boutique IA noté 5.0 sur le Shopify App Store.

Méthode 1 - Changer la taille des titres dans l’Éditeur de thème

Cela modifie l’échelle globale des titres sur toute votre boutique.

Sur le même sujet : Changer le padding et la marge sur Shopify.

Voir aussi : Changer la couleur de police sur Shopify.

Sur le même sujet : Mettre à jour les polices sur Shopify.

Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.

Étape 2. Dans la barre latérale de gauche, faites défiler vers le bas et cliquez sur Paramètres du thème.

Étape 3. Ouvrez la section Typographie.

Étape 4. Trouvez les paramètres de la police des titres. La plupart des thèmes incluent un curseur Taille des titres ou Échelle des titres. Faites-le glisser pour augmenter ou diminuer proportionnellement la taille de tous les titres.

Étape 5. Cliquez sur Enregistrer.

Ce que ça contrôle : Cela ajuste l’échelle de base des titres utilisée par le CSS de votre thème. C’est un multiplicateur - une valeur plus élevée agrandit tous les titres par rapport au texte de votre corps de page.

Ce que ça ne contrôle pas : Le ratio entre les tailles H1, H2 et H3. Pour ça, il vous faut du CSS.

Méthode 2 - Changer individuellement la taille des titres avec du CSS

Si vous avez besoin d’un H1 d’une certaine taille, d’un H2 d’une autre taille et d’un H3 encore différent, l’Éditeur de thème seul ne suffira pas. Vous devez ajouter des règles CSS.

Étape 1. Dupliquez d’abord votre thème. Allez dans Boutique en ligne > Thèmes > Actions > Dupliquer. C’est votre filet de sécurité.

Étape 2. Sur votre thème actif, allez dans Actions > Modifier le code.

Étape 3. Dans l’explorateur de fichiers, ouvrez le dossier Assets. Cherchez base.css, theme.css, ou une feuille de style principale avec un nom similaire.

Étape 4. Faites défiler jusqu’en bas du fichier et ajoutez vos règles de taille de titres :

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

Étape 5. Cliquez sur Enregistrer.

Utiliser des tailles responsives

Pour une boutique dont le rendu est parfait sur mobile, utilisez une media query pour définir des tailles plus petites sur les petits écrans :

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }

@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}

Trouver le bon fichier CSS

Le nom du fichier varie selon le thème :

Thème	Fichier CSS principal
Dawn	`base.css`
Debut	`theme.css`
Brooklyn	`application.css.liquid`
Thèmes sur mesure	Cherchez dans Assets le fichier `.css` le plus volumineux

Si vous n’êtes pas sûr du fichier à modifier, cherchez une règle h1 ou h2 existante dans le code pour trouver où les styles de titres sont déjà définis.

Vous voulez des tailles de titres précises sans écrire de CSS vous-même ?

Try Fudge for Free

Sur le même sujet : Améliorer l’espacement sur mobile sur Shopify.

Quelles unités utiliser pour la taille des polices

Le rem est l’unité recommandée pour la taille des polices. C’est relatif à la taille de police de base du navigateur (généralement 16px), ce qui signifie que :

1rem = 16px
1.5rem = 24px
2rem = 32px
2.5rem = 40px

Évitez les px pour les titres - cette unité ne s’adapte pas aux paramètres d’accessibilité du navigateur. Le rem s’adapte.

Utiliser Fudge pour modifier la taille des titres

Si vous n’êtes pas à l’aise pour modifier directement les fichiers CSS, Fudge peut s’en charger. Décrivez ce que vous voulez :

“Mets les titres H1 à 2.5rem sur ordinateur et 1.8rem sur mobile. Mets les titres H2 à 2rem.”

Fudge identifie le bon fichier, écrit le CSS, et vous montre un aperçu à examiner avant de tout mettre en ligne. Aucun risque de casser vos styles actuels.

Référence rapide

Objectif	Méthode
Ajuster toutes les tailles de titre en même temps	Éditeur de thème > Paramètres du thème > Typographie > Échelle des titres
Définir une taille spécifique pour H1, H2, H3 séparément	CSS dans assets/base.css
Tailles de titres responsive pour le mobile	CSS avec media queries

FAQ

Pourquoi le curseur d’échelle des titres ne modifie-t-il pas mon H1 ?

Certains thèmes appliquent l’échelle de taille des titres uniquement à des classes de titres spécifiques définies par le thème (par ex., .h0, .h1-display), et non à l’élément HTML <h1> de base. Si votre H1 ne réagit pas au curseur, inspectez l’élément dans les DevTools pour voir quelle classe contrôle sa taille, puis mettez à jour cette classe via CSS ou utilisez Fudge pour la cibler.

Quelle taille devrait avoir le H1 sur une page produit Shopify ?

Une fourchette courante se situe entre 1.75rem et 2.5rem sur ordinateur et entre 1.4rem et 1.8rem sur mobile. Les grands H1 ont un look plus design mais améliorent rarement la conversion — ce qui compte le plus, c’est la hiérarchie et la lisibilité. Assurez-vous que ça reste lisible sur des écrans de 16 pouces comme de 5 pouces.

Puis-je avoir différentes tailles de titres selon le type de page ?

Oui. Shopify ajoute des classes spécifiques aux modèles dans la balise <body> (par ex., template-product, template-collection). Ciblez votre CSS avec quelque chose comme body.template-product h1 { font-size: 2rem; } pour appliquer des tailles par modèle sans affecter les autres pages.

Les titres doivent-ils avoir la même taille sur mobile et sur ordinateur ?

Non. Un titre dimensionné pour l’ordinateur semble généralement surdimensionné sur mobile — réduisez-le d’environ 30 à 50 % avec une media query. Sans un dimensionnement responsive, les gros titres de la version bureau poussent le contenu sous la ligne de flottaison sur les téléphones et nuisent à la conversion sur mobile.

Est-ce que le changement de taille des titres affectera le SEO ?

Non. Le SEO dépend de la hiérarchie des titres (un H1 par page, une imbrication logique des H2/H3) et des mots-clés contenus dans ces titres — pas de leur taille visuelle. Vous pouvez modifier les tailles de police librement sans impacter votre référencement, tant que la structure des balises sous-jacente reste intacte.