Comment changer la taille de police des titres sur Shopify (2026)

Dernière mise à jour
Revu par un expert
5 min de lecture
Jacques Blom
Jacques Blom
CTO chez Fudge.

Points clés à retenir

  • La taille globale des titres se définit dans Éditeur de thème > Paramètres du thème > Typographie.
  • La plupart des thèmes proposent un curseur d’échelle des titres qui ajuste proportionnellement la taille de tous les titres.
  • Pour un contrôle individuel de chaque titre (H1, H2, H3 à des tailles différentes), vous devez utiliser du CSS dans le dossier assets de votre thème.
  • Les modifications CSS nécessitent d’éditer 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 en langage naturel.

L’Éditeur de thème de Shopify vous donne le contrôle sur les polices des titres et sur une échelle de taille générale. Pour obtenir des tailles précises pour chaque niveau de 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 conçu Fudge - un éditeur de boutique IA avec une note de 4.9 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 voulez une taille pour les H1, une autre pour les H2 et encore une autre pour les H3, l’Éditeur de thème seul ne suffira pas. Vous devez ajouter du CSS personnalisé.

É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 la feuille de style principale qui porte un nom similaire.

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

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

Étape 5. Cliquez sur Enregistrer.

Utiliser des tailles responsives

Pour que votre boutique rende bien sur mobile, utilisez une media query pour définir des tailles plus petites pour 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èmeFichier CSS principal
Dawnbase.css
Debuttheme.css
Brooklynapplication.css.liquid
Thèmes sur mesureCherchez le plus gros fichier .css dans Assets

Si vous ne savez pas quel 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 titre précises sans écrire de CSS vous-même ?
Try Fudge for Free

Article lié : Améliorer l’espacement mobile sur Shopify.


Quelles unités utiliser pour la taille des polices

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

Évitez les px pour les titres - ils ne s’adaptent pas aux paramètres d’accessibilité du navigateur. Les rem le font.

Si le problème vient du système typographique dans son ensemble plutôt que d’un seul titre, notre générateur de boutique Shopify par IA gratuit propose une association de typographies et une échelle de tailles avec une palette de couleurs et un design de page d’accueil.


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

ObjectifMéthode
Ajuster la taille de tous les titres 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émentCSS dans assets/base.css
Tailles de titre responsives pour mobileCSS avec des 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 exemple, .h0, .h1-display), et non à l'élément HTML <h1> brut. 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 demandez à Fudge de la cibler.

Quelle devrait être la taille du titre H1 sur une page produit Shopify ?

Une fourchette courante est de 1.75rem à 2.5rem sur ordinateur et de 1.4rem à 1.8rem sur mobile. Les grands H1 ont un look très design mais améliorent rarement la conversion — ce qui compte le plus, c'est la hiérarchie et la lisibilité. Restez lisible aussi bien sur les écrans de 16 pouces que sur ceux de 5 pouces.

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

Oui. Shopify ajoute des classes spécifiques au modèle dans la balise <body> (par exemple, template-product, template-collection). Ciblez votre CSS de cette manière 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 un ordinateur semble généralement surdimensionné sur mobile — réduisez-le d'environ 30 à 50 % avec une media query. Sans dimensionnement responsive (adaptatif), les grands titres sur ordinateur repoussent le contenu sous la ligne de flottaison sur les téléphones et nuisent à la conversion sur mobile.

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

Non. Le SEO dépend de la hiérarchie des titres (un seul H1 par page, imbrication logique des H2/H3) et des mots-clés à l'intérieur des titres — pas de la taille visuelle. Vous pouvez modifier la taille des polices librement sans impacter le classement, tant que la structure des balises sous-jacentes reste intacte.

Jacques's signature
Obtenez des tailles de titres précises — juste en décrivant ce que vous voulez.

Article lié : Modifier les espacements dans Shopify.

You might also be interested in

Comment ajouter un lien à une image dans Shopify (2026)
Découvrez comment rendre n'importe quelle image cliquable dans Shopify — en utilisant le champ de lien de l'éditeur de thème, la vue HTML de l'éditeur de page ou du code Liquid personnalisé.
Comment masquer une section sur mobile dans Shopify (2026)
Comment masquer n'importe quelle section sur mobile dans Shopify à l'aide du bouton de visibilité de l'Éditeur de thème ou d'une media query CSS ciblant la max-width.
Comment modifier le padding et les marges dans Shopify (2026)
Découvrez comment modifier le padding et les marges dans Shopify en utilisant les curseurs de l'éditeur de thème et du CSS personnalisé pour un espacement parfait.