Comment centrer la description sous l'image sur Shopify ?

Résumé : Pour centrer la description sous une image sur Shopify, suivez ces étapes :

• Modifier le code HTML et CSS de votre thème.
• Utilisez la balise <div> autour de votre texte avec une classe spécifique.
• Appliquez le style text-align: center; dans la feuille de style CSS de cette classe.
• Enregistrez et vérifiez le résultat sur votre page de produit.

En savoir plus : Shopify Help Center

Comment centrer la description sous une image dans Shopify

Le positionnement des éléments sur votre boutique en ligne Shopify peut grandement influencer l'apparence générale et l'expérience utilisateur. Centrer une description de produit en dessous d'une image rendra votre boutique plus esthétiquement agréable et professionnelle. Pour réaliser cette tâche, vous devrez accéder au code source de votre thème Shopify et faire quelques modifications.

Accéder au code source de votre thème

Pour centrer une description, vous allez devoir accéder au code source de votre boutique:

1. Connectez-vous à votre tableau de bord Shopify.
2. Allez dans Boutique en ligne puis dans Thèmes.
3. Trouvez le thème que vous utilisez actuellement et cliquez sur Actions, puis sur Modifier le code.

Modifier le code HTML

Dans la section des fichiers de votre thème, repérez le fichier qui gère l'affichage des descriptions de produits, cela peut être product.liquid, ou tout autre fichier avec un nom similaire, cela dépend de votre thème.

• Recherchez la portion du code où la description est ajoutée, habituellement sous ou autour d'une balise <img>.
• Encapsulez cette section avec une div ayant une classe spécifique, par exemple :

  <div class="product-description-center">
      <!-- Votre description de produit ici -->
  </div>
  

Ajouter ou modifier le CSS

Ensuite, modifiez la feuille de style de votre thème (souvent nommée theme.scss.liquid ou similaire) pour appliquer le style souhaité à la classe que vous avez ajoutée :

1. Ajoutez le code CSS suivant :

   .product-description-center {
      text-align: center;
   }
   

2. Assurez-vous que le style est appliqué uniquement à la description sous l'image pour éviter de centrer d'autres textes sur votre site par erreur.

Tester et ajuster

Après toute modification, il est crucial de :

• Enregistrer les changements
• Rafraichir votre page de produit pour voir si la description est correctement centrée.
• Ajuster si nécessaire, en prenant soin de vérifier l'affichage sur divers appareils pour s'assurer d'une compatibilité mobile.

Conseils supplémentaires

• Utilisez Shopify Theme Editor pour prévisualiser vos changements en temps réel.
• Si vous rencontrez des problèmes, n'hésitez pas à consulter les forums Shopify ou à demander de l'aide à un développeur professionnel.

En suivant ces étapes, la description de vos produits devrait être joliment centrée sous vos images, offrant une expérience utilisateur améliorée et une présentation produit professionnelle.