Diminuer taille des titres H1 - fiches produits - thème REFRESH

Français Discussions Questions et réponses sur des sujets techniques
1

Bonjour,

Je suis sur le thème shopify REFRESH, et chercher à diminuer la taille de police des titres H1 dans les fiches produit.

Dans “boutique” - “thème” - “personnaliser” - “produit” - “paramètre” - “typographie” - “échelle de taille de produit” - on peut diminuer l’échelle de taille de police mais c’est pas ça, je suis déjà à 100%,

=> il faut aller dans le code, mais je ne vois pas où faire cela

2

D’après la démo du Theme Refresh, on va utiliser le fichier “section-main-product.css”
Boutique en ligne > Thèmes > Le thème Actuel : clique sur les 3 points > modifier le code

HenriB_0-1701335079682.png
HenriB_0-1701335079682.png462×299 7.1 KB

Recherche “section-main-product.css”

Dans ce fichier on va rechercher (avec CTRL + F) “.product__title” et on peux ajouter après

.product__title h1 {
    font-size: 2rem;
}
@media only screen and (min-width: 750px) {
  .product__title h1 {
    font-size: 3rem;
  }
}

Ce qui nous donne pour mobile 2rem soit 21px (selon le calcul de base de la taille de la police)
On peut lui passer simplement des “px” comme “22px” ou faire comme pour le thème un calcul :

font-size: 20px; //valeur en pixel
font-size: 2rem; //valeur en fonction de la taille déclarer depuis "html" 
font-size: calc(var(--font-heading-scale) * 2rem); // calcul par défault

Pour la dernière on modifiera seulement la fin “2rem”, le theme calcul avec 3rem pour mobile par default.

La deuxième entrée correspond à la taille de la police au delà de 750px soit un format tablette, la encore on peut choisir la taille avec “px”, “rem” ou le calcul.

J’espère avoir été clair.

1 Like
3

Bonjour,

Merci pour votre réponse.

Je suis allé dans la partie indiquée, mais après ne suis pas sûr d’avoir compris :

je dois copier coller ce que vous avez mis sur votre message juste en dessous de la ligne en bleu, c’est cela ? en laissant le reste qui commence par “word-break” en dessous ?

product title.JPG
product title.JPG1309×482 35 KB

4

Navré pour cette partie je n’arrivais pas à bien formuler ma phrase.

On va se positionner après l’accolade ligne 320 donc ça nous donne en css :

//ligne 317 .product__title{
//ligne 318 word-brek: break-world;
//ligne 319 margin-bottom: 1.5rem
//ligne 320 }
//ligne 321 On se positionne ici
.product__title h1 {
    font-size: 2rem;
}
@media only screen and (min-width: 750px) {
  .product__title h1 {
    font-size: 3rem;
  }
}

C’est simplement pour s’y retrouver si jamais il y a besoin de future modifications, on respect un minimum l’ordre comme cela.

La partie sur les valeurs possibles de taille de police (font-size) était claire ?

1 Like
5

Merci c’est super cela fonctionne.

J’ai une autre demande mais peut être faut il ouvrir un autre sujet (?) , je voudrais pouvoir modifier ces titres en les centrant

6

Pour centrer le titre on va simplement rajouter une ligne de css :

.product__title h1 {
    font-size: 2rem;
    text-align: center;
}

Peut-être qu’en format “Ordinateur” ça rendra pas si bien d’avoir le texte centré donc on peut, encore une fois, utiliser le responsive avec :

@media only screen and (min-width: 750px) {
  .product__title h1 {
    font-size: 3rem;
    text-align: start;
  }
}
1 Like
7

Super, ça marche au top. merci beaucoup c’est très sympa de votre part