Utilisation de l’éditeur de texte enrichi pour le contenu

Vous pouvez utiliser l’éditeur de texte enrichi de Shopify pour mettre en forme et personnaliser le style du contenu affiché sur votre boutique en ligne.

Où utiliser l'éditeur de texte enrichi

Vous pouvez utiliser l'éditeur de texte enrichi de Shopify pour ajouter ou modifier du texte à plusieurs endroits de votre boutique :

Si vous utilisez un thème Online Store 2.0, vous pouvez ajouter des sections de texte enrichi à vos pages ou à vos modèles avec l’éditeur de thème.

Ajouter du contenu HTML avec l'éditeur de texte enrichi

Vous pouvez saisir du contenu HTML pour vos articles de blog, vos pages, vos descriptions de produit et vos descriptions de collection à l'aide de l'éditeur de texte enrichi.

Cliquez sur le bouton </> Afficher le code HTML pour afficher le code HTML du contenu dans l’éditeur de texte enrichi.

Avec l'affichage HTML, vous pouvez apporter de nombreuses modifications au contenu dans l'éditeur de texte enrichi. Vous pouvez ajouter des images, des vidéos ou des tableaux en HTML, ainsi que déboguer ou ajuster le style de la mise en page et du contenu.

Intégrer un widget multimédia

Pour intégrer un widget vidéo ou musical, vous devez d'abord l'héberger sur un service tel que Youtube, Vimeo ou SoundCloud. Ces services génèrent un code d'intégration que vous pouvez copier et coller dans l'éditeur de texte enrichi de votre interface administrateur Shopify.

Étapes :

  1. Recherchez le code d'intégration du support multimédia que vous souhaitez intégrer.

  2. Pour sélectionner la totalité du code d'intégration, cliquez dessus et appuyez sur ctrl + A sur un PC ou command + A sur un Mac.

  3. Copiez le code d'intégration en appuyant sur ctrl + C sur un PC ou command + C sur un Mac.

  4. Dans l'interface administrateur Shopify, cliquez sur le bouton Afficher le code HTML de l'éditeur de texte enrichi pour le contenu que vous modifiez.

  5. Collez le code d’intégration en appuyant sur ctrl + V sur un PC, ou sur command + V sur un Mac.

  6. Cliquez sur Enregistrer.

Formater du texte avec l'éditeur de texte enrichi

Grâce au bouton Formatage, vous pouvez créer rapidement des paragraphes, des en-têtes ou des guillemets. L'utilisation des bons formats et en-têtes facilite la lecture du contenu de votre site web par les utilisateurs et les moteurs de recherche.

Pour choisir un format de texte, mettez le texte en surbrillance, puis cliquez sur le bouton Formatage.

Options de formatage

  • Paragraphe

  • Titre (1-6)

  • Bloc de citation

Texte en gras

Pour mettre un texte en gras, mettez-le en surbrillance et cliquez sur le bouton Gras.

Mettre un texte en italique

Pour mettre un texte en italique, mettez-le en surbrillance et cliquez sur le bouton Italique.

Souligner un texte

Pour souligner le texte, mettez-le en surbrillance et cliquez sur le bouton Souligné.

Créer une liste à puces

Pour créer une liste à puces, cliquez sur le bouton Liste à puces.

Vous pouvez taper pour créer le premier élément de la liste à puces. Pour créer de nouveaux éléments de liste, appuyez sur la touche enter ou return. Pour terminer la liste, appuyez deux fois sur la touche enter ou return.

Créer une liste numérotée

Pour créer une liste numérotée, cliquez sur le bouton Liste numérotée.

Vous pouvez taper pour créer le premier élément de la liste numérotée. Pour créer de nouveaux éléments de liste, appuyez sur la touche enter ou return. Pour terminer la liste, appuyez deux fois sur la touche enter ou return.

Mettre du texte en retrait

La mise en retrait d’un paragraphe crée une marge à sa gauche. Pour mettre en retrait un paragraphe, cliquez sur le bouton Retrait.

Supprimer le retrait d'un texte

La suppression d’un retrait de paragraphe élimine toute marge de retrait appliquée au paragraphe. Pour supprimer le retrait d’un paragraphe, cliquez sur le bouton Retrait négatif.

Aligner un texte

Pour aligner un texte, sélectionnez-le, cliquez sur le bouton Alignement, puis choisissez Aligner à gauche, Centrer ou Aligner à droite.

Modifier la couleur du texte avec l'éditeur de texte enrichi

Étapes :

  1. Mettez le texte en surbrillance et cliquez sur le bouton Couleur.

  2. Cliquez sur une couleur ou saisissez un code hexadécimal pour modifier le texte en surbrillance avec cette couleur.

Modifier les couleurs d'arrière-plan d'un texte

Étapes :

  1. Mettez le texte en surbrillance et cliquez sur le bouton Couleur.

  2. Cliquez sur l’onglet Arrière-plan.

  3. Cliquez sur une couleur ou saisissez un code hexadécimal pour modifier l'arrière-plan du texte en surbrillance avec cette couleur.

Supprimer une mise en forme dans l'éditeur de texte enrichi

Pour supprimer la mise en forme d’un texte ou d’images, mettez le contenu à modifier en surbrillance, puis cliquez sur le bouton Effacer le formatage.

Insérer des tableaux avec l'éditeur de texte enrichi

Vous pouvez insérer des tableaux dans vos articles de blog, vos pages, vos descriptions de produits et vos descriptions de collections avec l'éditeur de texte enrichi. Après avoir créé un tableau, vous pouvez le remplir avec du texte, des images ou même des vidéos.

Étapes :

  1. Dans l’éditeur de texte enrichi, cliquez sur le bouton Insérer un tableau.

  2. Cliquez sur Insérer un tableau pour en ajouter un. Cette action crée un tableau comportant une rangée et une colonne.

Une fois votre tableau créé, cliquez à nouveau sur le bouton Insérer un tableau pour modifier les rangées et les colonnes du tableau :

  • Insérer une ligne au-dessus : positionnez votre curseur dans une ligne, puis cliquez sur ce bouton pour insérer une nouvelle ligne au-dessus.
  • Insérer une ligne au-dessous : positionnez votre curseur dans une ligne, puis cliquez sur ce bouton pour insérer une nouvelle ligne au-dessous.
  • Insérer une colonne avant : positionnez votre curseur dans une colonne, puis cliquez sur ce bouton pour insérer une nouvelle colonne à gauche.
  • Insérer une colonne après : positionnez votre curseur dans une colonne, puis cliquez sur ce bouton pour insérer une nouvelle colonne à droite.
  • Supprimer une rangée : positionnez votre curseur dans une rangée que vous souhaitez supprimer, puis cliquez sur ce bouton.
  • Supprimer la colonne : positionnez votre curseur dans une colonne que vous souhaitez supprimer, puis cliquez sur ce bouton.
  • Supprimer le tableau : positionnez votre curseur n'importe où dans tableau, puis cliquez sur ce bouton pour supprimer la totalité du tableau.

Insérer des liens avec l'éditeur de texte enrichi

Il est possible d'insérer des liens (hyperliens) dans des articles de blog, des pages, des descriptions de produits et des descriptions de collections avec l'éditeur de texte enrichi. Vous pouvez ainsi ajouter des liens pour diriger les clients vers des pages de votre boutique en ligne Shopify ou vers d'autres sites web. Vos liens peuvent également lancer des e-mails ou des appels téléphoniques pour aider vos clients à vous contacter.

Étapes :

  1. Mettez en surbrillance le texte ou l'image dont vous souhaitez faire un lien.
  2. Cliquez sur Insérer un lien.
  3. Saisissez l'URL de destination du lien dans le champ Lien vers :

    • Pour créer un lien vers un site web externe à votre boutique Shopify, saisissez https:// suivi de l'adresse web, par exemple : https://www.example.com.
    • Pour créer un lien vers une page de votre boutique en ligne Shopify, saisissez l'URL courte de la page, par exemple : /collections/summer-collection.
    • Pour créer un lien qui ouvre un e-mail, saisissez mailto: suivi de l'adresse e-mail, par exemple : mailto:example@example.com.
    • Pour créer un lien qui lance un appel téléphonique, saisissez tel:, suivi du numéro de téléphone, par exemple : tel:+0-123-456-7890.
  4. Saisissez une brève description du lien dans la zone Titre du lien.

  5. Choisissez le mode d'ouverture du lien avec le menu Ouvrir ce lien dans :

    • the same window (la même fenêtre) : le lien s'ouvre dans l'onglet ou la fenêtre en cours du navigateur de l'utilisateur.
    • a new window (une nouvelle fenêtre) : le lien s'ouvre dans un nouvel onglet ou une nouvelle fenêtre du navigateur.
  6. Cliquez sur Insérer un lien pour convertir le contenu en surbrillance en un lien.

Ajouter des liens internes et externes avec l'éditeur de texte enrichi

Les liens vers des pages situés à l’intérieur de votre boutique Shopify sont appelés « liens internes ». Vous pouvez utiliser des URL courtes pour créer des liens internes. Par exemple, l’URL /collections pointe vers la page des collections de votre boutique.

Pour créer un lien vers une page spécifique de votre boutique en ligne, telle qu'une page de collection ou de produit, utilisez le format d'URL suivant : /page-type/page-handle. Par exemple, pour créer un lien vers une collection que vous avez créée appelée « Collection d'été », utilisez l’URL /collections/summer-collection.

Les liens vers des sites web extérieurs à votre boutique Shopify sont appelés « liens externes ». Les liens externes doivent être saisis intégralement et commencer par http://.

Mettre en lien un fichier dans une page

Après avoir mis en ligne un fichier, vous pouvez le lier à du contenu dans l'éditeur de texte enrichi pour pouvoir le télécharger depuis une description de produit ou de collection, une page web ou un article de blog.

Étapes :

Insérer des images avec l'éditeur de texte enrichi

Il existe trois façons d'insérer une image à l'aide de l'éditeur de texte enrichi. Vous pouvez :

Mettre en ligne des images

Étapes :

  1. Dans l’éditeur de texte enrichi, cliquez sur le bouton Insérer une image.

  2. Dans la boîte de dialogue Insérer une image, cliquez sur l'onglet Images mises en ligne.

  3. Cliquez sur Mettre en ligne le fichier.

  4. Choisissez un fichier image WebP, HEIC, SVG, GIF, JPEG ou PNG sur votre ordinateur.

  5. Cliquez sur l'image que vous avez mise en ligne pour la sélectionner.

  6. Depuis le menu Taille, sélectionnez la taille d’affichage de l’image. Vous pouvez sélectionner Originale pour insérer l’image sans modifier sa taille d’affichage.

  7. Cliquez sur Insérer une image pour placer l'image dans l'éditeur de texte enrichi.

Choisir une image de produit

Étapes :

  1. Dans l’éditeur de texte enrichi, cliquez sur le bouton Insérer une image.

  2. Dans la boîte de dialogue Insérer une image, cliquez sur l'onglet Images de produits.

  3. Cliquez sur l'image que vous souhaitez insérer.

  4. Depuis le menu Taille, sélectionnez la taille d’affichage de l’image. Vous pouvez sélectionner Originale pour insérer l’image sans modifier sa taille d’affichage.

  5. Cliquez sur Insérer une image pour placer l'image du produit dans l'éditeur de texte enrichi.

Utiliser l'URL d'une image

Insérer une image à l'aide d'une URL publique :

  1. Dans l’éditeur de texte enrichi, cliquez sur le bouton Insérer une image.

  2. Dans la boîte de dialogue Insérer une image, cliquez sur l'onglet URL.

  3. Saisir l'URL publique de votre fichier image.

  4. Cliquez sur Insérer une image pour insérer l'image à sa taille originale dans l'éditeur de texte enrichi.

Déplacer et redimensionner une image dans l'éditeur de texte enrichi

Une fois que vous avez ajouté une image dans une description de produit ou de collection, une page web ou un blog, vous pouvez la déplacer au sein du même contenu.

Étapes :

  1. Dans votre interface administrateur Shopify, cliquez sur le produit, la collection, la page web ou l'article de blog contenant l'image que vous souhaitez déplacer ou redimensionner.
  2. Dans l'éditeur de texte enrichi, cliquez sur l'image :
  3. Effectuez l’une des opérations suivantes :

    • Pour déplacer l'image, cliquez dessus et faites-la glisser jusqu'à l'emplacement souhaité dans le champ Content (Contenu).
    • Pour redimensionner l'image, cliquez sur l'un des coins et faites-le glisser.
  4. Cliquez sur Enregistrer.

Modifier une image dans l'éditeur de texte enrichi

Vous pouvez modifier la taille, l'habillage du texte et l'alignement d'une image dans l'éditeur de texte enrichi. Vous pouvez également modifier l'URL de l'image ou ajouter ou modifier le texte optionnel de l'image.

Étapes :

  1. Double-cliquez sur l'image dans l'éditeur de texte enrichi pour ouvrir la boîte de dialogue Modifier l'image.
  2. Utiliser les options de taille et d’alignement pour modifier l’image :

    • Pour changer la taille de l'image, sélectionnez une option de taille.
    • Pour améliorer le référencement naturel et l'accessibilité de votre boutique en ligne, ajoutez ou modifiez le texte alternatif.
    • Pour ajouter un espacement, saisissez le nombre de pixels d’espacement souhaités de part et d'autre de l'image.
    • Pour modifier l'alignement de l'image, sélectionnez l'une des icônes représentant l'alignement à gauche, au centre ou à droite.
    • Pour ajouter un habillage de texte, cochez l'option Organiser le texte autour de l'image.
  3. Cliquez sur Modifier l'image pour enregistrer vos modifications.

Insérer des vidéos avec l'éditeur de texte enrichi

Il est possible d'insérer ou d'intégrer des vidéos dans des articles de blog, des pages, des descriptions de produits et des descriptions de collections avec l'éditeur de texte enrichi.

Pour intégrer une vidéo que vous avez créée, vous devez d'abord la mettre en ligne sur un site de streaming vidéo tel que YouTube ou Vimeo.

YouTube ne vous permet pas de désactiver les vidéos associées, mais vous pouvez spécifier que les vidéos associées doivent être du même canal que la vidéo qui vient d’être jouée.

Étapes :

  1. Copiez l'URL de la vidéo en appuyant sur ctrl + C sur un PC ou command + C sur un Mac.
  1. Rendez-vous sur Embed Responsively. Embed Responsively est un outil qui vous fournit un code d'intégration amélioré pour votre vidéo.
  1. Sur Embed Responsively, cliquez pour sélectionner le site web hébergeant votre vidéo.

  2. Sur Embed Responsively, collez l'URL de la vidéo dans la zone Page URL (URL de la page) en appuyant sur ctrl + V sur un PC ou command + V sur un Mac.

  3. Cliquez sur Embed (Intégrer). Embed Responsively vous crée un code d'intégration.

  4. Si la vidéo vient de YouTube et que vous ne souhaitez afficher que les vidéos connexes provenant de la même chaîne YouTube, recherchez l’URL de la vidéo dans le code d’intégration. Copiez et collez ?rel=0 à la fin entre les guillemets.

  5. Copiez la totalité du code qui se trouve dans la zone Embed code (Code d'intégration).

  6. Sur votre interface administrateur Shopify, cliquez sur le bouton Insérer une vidéo dans l’éditeur de texte enrichi.

  7. Collez le code d'intégration dans la zone de la boîte de dialogue Insérer une vidéo.

  8. Cliquez sur Insérer une vidéo.

  9. Lorsque vous avez terminé, cliquez sur Enregistrer pour valider les modifications que vous avez apportées à l'article.

Insérer des fichiers audio avec l'éditeur de texte enrichi

L'éditeur de texte enrichi permet d'insérer ou d'intégrer des fichiers audio dans des articles de blog, des pages, des descriptions de produits et des descriptions de collections.

Étapes :

  1. Dans l'interface administrateur Shopify, cliquez sur Paramètres, puis sur Fichiers.
  2. Cliquez sur Mettre en ligne des fichiers pour envoyer le fichier audio que vous souhaitez insérer ou intégrer dans votre magasin.
  3. Dans la section Boutique en ligne, ouvrez l'éditeur de texte enrichi pour la page ou l'article de blog où vous souhaitez publier le fichier audio.
  4. Copiez le code <div id="player"><audio controls="controls">, puis collez-le dans l’éditeur de texte enrichi pour incorporer un lecteur audio à votre page.
  5. Copiez le code suivant :

    • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  6. Collez ce code dans l'éditeur de texte enrichi à la suite du code du lecteur audio, puis remplacez https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 par l'URL que vous avez créée pour votre fichier audio lorsque vous l'avez mis en ligne sur Shopify. Vous pouvez trouver l'URL de votre fichier audio à tout moment sur la page Files (Fichiers).

  7. Cliquez sur Enregistrer.

  8. Cliquez sur Afficher pour vous assurer que votre fichier audio est lu correctement.

Ajouter ou supprimer des commentaires internes dans l'éditeur de texte enrichi

Vous pouvez utiliser les balises de commentaire <!-- et --> pour le texte interne que vous ne souhaitez pas publier dans votre boutique.

Étapes :

  1. Dans votre éditeur de texte enrichi, cliquez sur le bouton Afficher le code HTML.

  2. Pour ajouter un commentaire interne, entourez le texte que vous souhaitez masquer dans <!-- et -->. Par exemple : <!--yourtext-->

  3. Cliquez sur Enregistrer.

Les balises HTML incluses aux balises de commentaire sont enregistrées en tant que texte interne. Pour que ces balises HTML fonctionnent correctement, vous devez supprimer les balises de commentaire <!-- et --> les entourant.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement