Aller au contenu

Commentaires

Affichez les commentaires des articles avec des contrôles de style et de mise en page flexibles pour une expérience de lecture plus claire.

Utilisez cette section pour afficher les commentaires sous un article et styliser la zone de discussion afin qu’elle s’intègre au reste de la page. Elle fonctionne mieux lorsque les commentaires sont déjà activés pour le blog ; les étapes de configuration sont incluses dans la Commentaires du thème. Pour un aperçu plus large de la manière dont le contenu des sections est organisé dans l’éditeur de thème, consultez la documentation Shopify sur les sections et les blocs

Les principaux paramètres propres à la section contrôlent le bouton d’action des commentaires. Choisissez un style qui correspond au degré de visibilité que vous souhaitez donner à l’action du formulaire, des traitements simples plus discrets aux styles principaux ou secondaires plus marqués.

Sur mobile, l’option de bouton pleine largeur peut rendre le formulaire plus facile à toucher et plus facile à repérer à la fin d’un long article. C’est particulièrement utile lorsque la zone de commentaires utilise une largeur de contenu plus étroite ou lorsque des styles de bouton plus petits sont utilisés ailleurs sur la page.

Si les commentaires ne sont pas activés pour le blog, cette section ne créera pas à elle seule une zone de commentaires active.

Paramètres d’espacement contrôlent l’espace au-dessus et au-dessous de la zone de commentaires. Augmentez l’espacement lorsque les commentaires ont besoin d’une séparation plus claire par rapport au corps de l’article, et réduisez-le lorsque des séparateurs ou un arrière-plan apportent déjà suffisamment de séparation.

Paramètres d’arrière-plan de section vous permettent de placer les commentaires sur un arrière-plan uni, dégradé, image ou vidéo. Cela peut aider à séparer la discussion du contenu de l’article, mais il est généralement préférable de garder un traitement discret afin que les fils de commentaires plus longs restent faciles à lire.

Les valeurs vides ou transparentes conservent généralement le style de secours du thème, tandis que des couleurs, dégradés et choix de médias explicites rendent la zone de commentaires plus indépendante. Si vous utilisez des images d’arrière-plan ou une vidéo, vérifiez à la fois sur ordinateur et sur mobile, car des choix de médias distincts peuvent modifier le recadrage, le chargement et la lisibilité.

Les paramètres de dégradé remplacent les paramètres de couleur unie, et les dégradés de superposition remplacent les couleurs de superposition. Si vous utilisez des images d’arrière-plan ou une vidéo, vérifiez à la fois sur ordinateur et sur mobile, car le mobile peut hériter du média principal si vous n’attribuez pas de version mobile distincte.

Paramètres de séparateur ajoutent une ligne en haut ou en bas de la section. C’est un moyen simple de séparer la zone de commentaires de l’article sans ajouter plus d’espacement ou un traitement d’arrière-plan complet.

Si vous laissez la couleur du séparateur transparente, la section utilise la couleur de bordure du thème. C’est souvent le moyen le plus simple de conserver un séparateur cohérent avec le reste de la page.

Paramètres de visibilité contrôlent si la section apparaît sur ordinateur, sur mobile ou sur les deux. C’est utile lorsque vous souhaitez une mise en page d’article mobile plus simple ou une structure de page différente selon les appareils.

Masquez la section avec précaution, car supprimer les commentaires sur un appareil peut donner à l’expérience de l’article un aspect incohérent. Si vous choisissez une visibilité spécifique à l’appareil, prévisualisez la page complète de l’article sur les deux tailles d’écran.

Paramètres de largeur contrôlent à la fois la largeur maximale du contenu des commentaires et la largeur du conteneur de section. Pour les pages où les discussions sont nombreuses, une largeur de contenu modérée est généralement plus facile à lire qu’une mise en page très large.

La largeur de section est particulièrement importante lorsque vous utilisez un arrière-plan, car elle modifie l’étendue de cet arrière-plan autour de la zone de commentaires. L’éditeur peut faire apparaître les changements de largeur différemment de la page en ligne, il vaut donc la peine de prévisualiser le résultat final dans la boutique en ligne.

  1. Activez d’abord les commentaires. Vérifiez que le blog autorise les commentaires avant de consacrer du temps au style de cette section.
  2. Vérifiez les deux mises en page selon l’appareil. Les contrôles pour ordinateur et mobile peuvent produire des comportements différents en matière d’alignement, de visibilité et de médias, donc vérifiez la zone de commentaires sur les deux tailles d’écran.
  3. Facilitez l’appui sur les actions mobiles. Utilisez le bouton mobile pleine largeur lorsque le formulaire semble à l’étroit ou facile à manquer sur les petits écrans.
  4. Préservez la lisibilité. Gardez les arrière-plans, superpositions et choix de séparateurs suffisamment discrets pour que les fils de commentaires longs restent faciles à parcourir.
  5. Utilisez la largeur pour le confort. Une largeur de contenu modérée améliore généralement la lisibilité des réponses et du texte des commentaires plus longs.
  6. Prévisualisez le flux complet de l’article. Après avoir modifié l’espacement, la visibilité ou les arrière-plans, vérifiez à quel point la zone de commentaires s’intègre naturellement à l’article au-dessus.