{"id":1720,"date":"2023-03-06T11:31:02","date_gmt":"2023-03-06T11:31:02","guid":{"rendered":"https:\/\/blog.hostinger.io\/fr\/support\/2023\/03\/06\/6823389-hostinger-createur-de-sites-web-comment-changer-la-couleur-du-texte-dans-la-boutique-en-ligne\/"},"modified":"2025-08-26T21:04:02","modified_gmt":"2025-08-26T21:04:02","slug":"6823389-hostinger-createur-de-sites-web-comment-changer-la-couleur-du-texte-dans-la-boutique-en-ligne","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/fr\/support\/6823389-hostinger-createur-de-sites-web-comment-changer-la-couleur-du-texte-dans-la-boutique-en-ligne\/","title":{"rendered":"Hostinger Cr\u00e9ateur de Sites Web : Comment Changer la Couleur du Texte dans la Boutique en Ligne"},"content":{"rendered":"<p class=\"no-margin\">D&eacute;couvrez comment changer la couleur du texte dans les zones suivantes de votre boutique en ligne :<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_7b2b1f104e\" target=\"_blank\" class=\"intercom-content-link\">Section Liste de Produits<\/a><\/b><\/p>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Couleur du Ruban<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Couleur du Bouton &ldquo;Ajouter au panier<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Changez la Couleur du Titre du Produit Individuellement<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Changez la Couleur de la Pagination Individuellement<\/b><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_9a8f7e3ac3\" target=\"_blank\" class=\"intercom-content-link\">Section de Produit Unique et\/ou Page de Produit<\/a><\/b><\/p>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Couleur de la Description du Produit<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Couleur du Bouton &ldquo;Ajouter au Panier&rdquo;<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Changez la Couleur du Titre du Produit Individuellement<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Changez la Couleur du Sous-Titre du Produit Individuellement<\/b><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul><hr><p class=\"no-margin\">\n<\/p><h1 id=\"h_7b2b1f104e\">Section Liste de Produits<\/h1><p class=\"no-margin\">Cliquez sur la <b><a href=\"\/fr\/support\/6538352-createur-de-sites-web-sections-de-produits#h_12ed7e1bc2\" target=\"_blank\" class=\"intercom-content-link\">section de la liste de produits<\/a><\/b>, s&eacute;lectionnez <b>Modifier la section<\/b> et modifiez la couleur du texte dans l&rsquo;onglet <b>Style <\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/271c96c6-03e9-43d9-8e0f-4f56408d8ea8.jpg\"><\/div><p class=\"no-margin\">La modification de la couleur du texte dans les param&egrave;tres de style aura une incidence sur <b>le titre du produit<\/b>, <b>le prix<\/b> et<b> les boutons de pagination<\/b>. S&rsquo;il y a un prix de vente, le prix original sera toujours un peu plus clair.<\/p><p class=\"no-margin\">\n<\/p><h3 id=\"h_64b8f320cc\"><b>Couleur du Ruban<\/b><\/h3><p class=\"no-margin\">Cliquez sur la <b><a href=\"\/fr\/support\/6538352-createur-de-sites-web-sections-de-produits#h_12ed7e1bc2\" target=\"_blank\" class=\"intercom-content-link\">section de la liste de produits<\/a><\/b>, s&eacute;lectionnez <b>Modifier la section <\/b>et modifiez la couleur du ruban dans l&rsquo;onglet <b>Rubans <\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/36216bc6-dd85-4d7a-a5a3-63bbf5b95106.jpg\"><\/div><p class=\"no-margin\"><b>REMARQUE <\/b>: Vous pouvez ajouter un ruban dans <b><a href=\"https:\/\/support.hostinger.com\/en\/articles\/6538340-website-builder-how-to-access-the-online-store-settings#h_67a57a5e72\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">la zone de gestion des produits<\/a><\/b><\/p><p class=\"no-margin\">\n<\/p><h3 id=\"h_77285ba822\"><b>Couleur du Bouton &ldquo;Ajouter au panier<\/b><\/h3><p class=\"no-margin\">Cliquez sur la <b><a href=\"\/fr\/support\/6538352-createur-de-sites-web-sections-de-produits#h_12ed7e1bc2\" target=\"_blank\" class=\"intercom-content-link\">section de la liste de produits<\/a><\/b>, s&eacute;lectionnez <b>Modifier la section<\/b> et changez la couleur du bouton dans l&rsquo;onglet <b>Bouton Ajouter au panier<\/b> :<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/fe85ea75-c291-4493-88e2-e18644ff6003.jpg\"><\/div><h3 id=\"h_ce538a7669\"><b>Changez la Couleur du Titre du Produit Individuellement<\/b><\/h3><p class=\"no-margin\">Copiez le code ci-dessous, remplacez <b><a href=\"https:\/\/htmlcolorcodes.com\/color-picker\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">le code HEX<\/a><\/b> par le code souhait&eacute; et collez-le dans le champ &rdquo; <b><a href=\"\/fr\/support\/6445594-createur-de-site-web-comment-ajouter-un-code-personnalise-a-la-partie-head-head-du-code-d-un-site-web\" target=\"_blank\" class=\"intercom-content-link\">Code Personnalis&eacute;<\/a><\/b> &rdquo; des param&egrave;tres d&rsquo;int&eacute;gration de votre site Web :<\/p><p class=\"no-margin\">\n<\/p><pre><code>&lt;style&gt;<br>\/*Product list: Product title*\/<br>.product-list-item__title {<br>color: #FF0000 !important;<br>}<br>&lt;\/style&gt;<\/code><\/pre><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/0a0e7710-66ce-46da-8886-d2b2bdb898d3.jpg\"><\/div><h3 id=\"h_5065d4e2b8\"><b>Changez la Couleur de la Pagination Individuellement<\/b><\/h3><p class=\"no-margin\">Copiez le code ci-dessous, remplacez <b><a href=\"https:\/\/htmlcolorcodes.com\/color-picker\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">le code HEX<\/a><\/b> par le code souhait&eacute; et collez-le dans le champ &rdquo; <b><a href=\"\/fr\/support\/6445594-createur-de-site-web-comment-ajouter-un-code-personnalise-a-la-partie-head-head-du-code-d-un-site-web\" target=\"_blank\" class=\"intercom-content-link\">Code Personnalis&eacute;<\/a><\/b> &rdquo; des param&egrave;tres d&rsquo;int&eacute;gration de votre site Web :<\/p><p class=\"no-margin\">\n<\/p><pre><code>&lt;style&gt;<br>\/*Product list: Pagination color*\/<br>.pagination__button{<br>color: #FF0000 !important;<br>}<br>\/*Product list: Current page number color*\/<br>.pagination__trigger--current{<br>color: #00FF00 !important;<br>}<br>\/*Product list: Pagination hover color*\/<br>.pagination__button:hover, .pagination__button:active{<br>color: #0000FF !important;<br>}<br>&lt;\/style&gt;<\/code><\/pre><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/9c5f4f7a-94e3-485c-8592-cebb05fe8885.jpg\"><\/div><hr><p class=\"no-margin\">\n<\/p><h1 id=\"h_9a8f7e3ac3\">Section de Produit Unique et\/ou Page de Produit<\/h1><p class=\"no-margin\">Cliquez sur la <b><a href=\"\/fr\/support\/6538352-createur-de-sites-web-sections-de-produits#h_12ed7e1bc2\" target=\"_blank\" class=\"intercom-content-link\">section de la liste de produits<\/a><\/b>, s&eacute;lectionnez<b> Modifier la section<\/b>, puis modifiez la couleur dans l&rsquo;onglet <b>Style <\/b>:<\/p><ul>\n<li>\n<p class=\"no-margin\">Couleur du texte<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Couleur des fl&egrave;ches sur les images des produits<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Couleur des fl&egrave;ches dans la galerie de produits<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Couleur de l&rsquo;arri&egrave;re-plan de la section (ou de l&rsquo;image d&rsquo;arri&egrave;re-plan)<\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/aedaa988-4f24-40c0-a4ff-e31af97f7f48.jpg\"><\/div><p class=\"no-margin\">La modification de la couleur du texte dans les param&egrave;tres de style aura une incidence sur <b>le titre<\/b>, <b>le sous-titre<\/b>,<b> le prix<\/b>,<b> les options<\/b> et<b> la description des produits<\/b>. S&rsquo;il y a un prix sold&eacute;, le prix original sera toujours plus clair.<\/p><p class=\"no-margin\">\n<\/p><h3 id=\"h_56ba09770a\"><b>Couleur de la Description du Produit<\/b><\/h3><p class=\"no-margin\">Dans <b><a href=\"https:\/\/support.hostinger.com\/en\/articles\/6538340-website-builder-how-to-access-the-online-store-settings#h_67a57a5e72\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">la zone de gestion des produits<\/a><\/b>, recherchez le champ de description et modifiez la couleur &agrave; l&rsquo;aide des outils d&rsquo;&eacute;dition de texte :<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/7a81a1ad-b110-44fa-94e4-28995248554c.jpg\"><\/div><h3 id=\"h_8dfa070191\"><b>Couleur du Bouton &ldquo;Ajouter au Panier&rdquo;<\/b><\/h3><p class=\"no-margin\">Cliquez sur la <b><a href=\"\/fr\/support\/6538352-createur-de-sites-web-sections-de-produits#h_12ed7e1bc2\" target=\"_blank\" class=\"intercom-content-link\">section de la liste de produits<\/a><\/b>, s&eacute;lectionnez <b>Modifier la section<\/b> et changez la couleur du bouton dans l&rsquo;onglet <b>Bouton <\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/8f2b8d9b-5539-4b8c-90b5-9508213cfd9a.jpg\"><\/div><h3 id=\"h_c969ab74a7\"><b>Changez la Couleur du Titre du Produit Individuellement<\/b><\/h3><p class=\"no-margin\">Copiez le code ci-dessous, remplacez <b><a href=\"https:\/\/htmlcolorcodes.com\/color-picker\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">le code HEX<\/a><\/b> par le code souhait&eacute; et collez-le dans le champ &rdquo; <b><a href=\"\/fr\/support\/6445594-createur-de-site-web-comment-ajouter-un-code-personnalise-a-la-partie-head-head-du-code-d-un-site-web\" target=\"_blank\" class=\"intercom-content-link\">Code Personnalis&eacute;<\/a><\/b> &rdquo; des param&egrave;tres d&rsquo;int&eacute;gration de votre site Web :<\/p><p class=\"no-margin\">\n<\/p><pre><code>&lt;style&gt;<br>\/*Single product: Product title*\/<br>.block-product__title {<br>color: #FF0000 !important;<br>}<br>&lt;\/style&gt;<\/code><\/pre><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/50534b7b-4a2b-4166-b853-171e1c648a69.jpg\"><\/div><h3 id=\"h_ea78807ec9\"><b>Changez la Couleur du Sous-Titre du Produit Individuellement<\/b><\/h3><p class=\"no-margin\">Copiez le code ci-dessous, remplacez <b><a href=\"https:\/\/htmlcolorcodes.com\/color-picker\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">le code HEX<\/a><\/b> par le code souhait&eacute; et collez-le dans le champ &rdquo; <b><a href=\"\/fr\/support\/6445594-createur-de-site-web-comment-ajouter-un-code-personnalise-a-la-partie-head-head-du-code-d-un-site-web\" target=\"_blank\" class=\"intercom-content-link\">Code Personnalis&eacute;<\/a><\/b> &rdquo; des param&egrave;tres d&rsquo;int&eacute;gration de votre site Web :<\/p><p class=\"no-margin\">\n<\/p><pre><code>&lt;style&gt;<br>\/*Single product: Product title*\/<br>.block-product__subtitle {<br>color: #FF0000 !important;<br>}<br>&lt;\/style&gt;<\/code><\/pre><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/fr\/support\/wp-content\/uploads\/sites\/56\/2023\/03\/336db5aa-99f8-4a8e-9576-89c93817a18b.jpg\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>D\u00e9couvrez comment changer la couleur du texte dans la boutique en ligne en utilisant le Cr\u00e9ateur de sites Web Hostinger<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[261],"tags":[],"class_list":["post-1720","post","type-post","status-publish","format-standard","hentry","category-boutique-en-ligne"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6823389-hostinger-website-builder-how-to-change-text-color-in-the-online-store\/","default":1},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6823389-hostinger-createur-de-sites-web-comment-changer-la-couleur-du-texte-dans-la-boutique-en-ligne\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6823389-hostinger-svetainiu-kurimo-irankis-kaip-keisti-spalvas-el-parduotuveje\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6823389-hostinger-criador-de-sites-como-mudar-a-cor-do-texto-da-loja-online\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/posts\/1720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/comments?post=1720"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/posts\/1720\/revisions"}],"predecessor-version":[{"id":2693,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/posts\/1720\/revisions\/2693"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/media?parent=1720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/categories?post=1720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/support\/wp-json\/wp\/v2\/tags?post=1720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}