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

Dernière mise à jour
•
Revu par un expert
•
5 min de lecture

Points clés

  • Les tailles globales des titres se règlent dans l’Éditeur de thème > Paramètres du thème > Typographie.
  • La plupart des thèmes proposent un curseur d’échelle des titres qui ajuste toutes les tailles de titres de façon proportionnelle.
  • Pour un contrôle titre par titre (H1 vs H2 vs H3 à des tailles différentes), tu as besoin de CSS dans le dossier assets de ton thème.
  • Les modifications CSS nécessitent d’éditer assets/base.css ou similaire - duplique d’abord ton thème.
  • Fudge peut écrire et appliquer le CSS pour toi à partir d’une description en langage naturel.

Pour modifier la taille de la police des titres dans Shopify, va dans Boutique en ligne > Thèmes > Personnaliser > Paramètres du thème > Typographie et fais glisser le curseur d’échelle des titres. Pour des tailles précises par titre, ajoute du CSS.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge, l’opérateur IA pour les boutiques Shopify, 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 l’ensemble de ta boutique.

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

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

Étape 3. Ouvre la section Typographie.

Étape 4. Trouve les paramètres de police des titres. La plupart des thèmes incluent un curseur Taille des titres (Heading size) ou Échelle des titres (Heading scale). Fais-le glisser pour augmenter ou diminuer la taille de tous les titres proportionnellement.

Étape 5. Clique sur Enregistrer.

Ce que cela contrôle : Cela ajuste l’échelle de base des titres utilisée par le CSS de ton thème. C’est un multiplicateur - une valeur plus grande rend tous les titres plus grands par rapport au texte de ton corps de page.

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

Pour modifier la police de caractères des titres elle-même, consulte comment mettre à jour les polices dans Shopify.


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

Si tu as besoin d’un H1 à une certaine taille, d’un H2 à une taille différente et d’un H3 à une autre, l’Éditeur de thème seul ne suffira pas. Tu dois ajouter des remplacements CSS.

Étape 1. Duplique d’abord ton thème. Va dans Boutique en ligne > Thèmes, clique sur le menu à trois points (…) à côté de ton thème, puis sur Dupliquer. C’est ton filet de sécurité.

Étape 2. Sur la copie, clique sur le menu à trois points (…), puis sur Modifier le code.

Étape 3. Dans le navigateur de fichiers, ouvre le dossier Assets. Cherche base.css, theme.css, ou une feuille de style principale portant un nom similaire.

Étape 4. Fais défiler jusqu’au bas du fichier et ajoute tes règles de taille de titre :

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

Étape 5. Clique 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
Thèmes personnalisésCherche dans Assets le fichier .css le plus volumineux

Si tu ne sais pas quel fichier modifier, cherche dans le code une règle h1 ou h2 existante pour trouver où les styles de titre sont déjà définis.

Tu veux des tailles de titre précises sans écrire le CSS toi-même ?
Démarrer l'essai gratuit

Pour des mises en page plus compactes sur téléphone, consulte comment améliorer l’espacement mobile dans 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 :

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

É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 tu n’es pas à l’aise avec la modification directe des fichiers CSS, Fudge, l’opérateur IA pour les boutiques Shopify, peut s’en charger dans son éditeur de boutique. Décris simplement ce que tu veux :

“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 te montre un brouillon à vérifier avant que quoi que ce soit ne soit mis en ligne. Ta boutique en ligne reste telle quelle jusqu’à ce que tu publies.


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 spécifiques définies par le thème (par ex. .h0, .h1-display), et non à l'élément HTML brut <h1>. Si ton H1 ne réagit pas au curseur, inspecte l'élément dans les DevTools pour voir quelle classe contrôle sa taille, puis mets à jour cette classe via CSS ou demande à Fudge de le cibler.

Quelle taille devrait avoir le 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. De grands H1 donnent un aspect avant-gardiste mais améliorent rarement la conversion — ce qui compte le plus, c'est la hiérarchie et la lisibilité. Vérifie le rendu sur ordinateur et sur téléphone.

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

Oui. De nombreux thèmes ajoutent des classes de template à la balise <body> (par exemple template-product) ; si le tien ne le fait pas, ajoute class="template-{{ template.name }}" dans theme.liquid. Cible ton CSS de cette façon 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 ordinateur semble généralement disproportionné sur mobile — réduis-le d'environ 30 à 50 % avec une media query. Sans redimensionnement responsive, les grands titres sur ordinateur repoussent le contenu en dessous de la ligne de flottaison sur les téléphones et nuisent à la conversion mobile.

Le fait de modifier 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 — et non de la taille visuelle. Tu peux modifier la taille de la police librement sans impacter le classement, tant que la structure des balises sous-jacente reste intacte.

Jacques's signature
Obtiens des tailles de titre précises — juste en décrivant ce que tu veux.

You might also be interested in

Jacques Blom
Jacques Blom
CTO chez Fudge.