Utilisation de l'éditeur de texte enrichi

Vous pouvez utiliser l'éditeur de texte enrichi de Shopify pour appliquer un format et un style au texte qui apparaît 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 :

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 Show HTML (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 command + V sur un Mac:

  6. Cliquez sur Save (Enregistrer) sur la page que vous êtes en train de modifier pour enregistrer vos modifications.

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, surlignez le texte, puis cliquez sur le bouton Formatage :

Options de formatage

  • Paragraphe

    La plus grande partie du contenu textuel de votre site web est du texte de paragraphe. Le texte de paragraphe a généralement une taille de police pouvant aller de 10 à 12 points, mais certains thèmes utilisent des tailles de police différentes.

  • Titre (1-6)

    Les titres permettent de structurer le contenu. Il existe 6 niveaux de titres. Le titre 1 est le niveau le plus important, et le titre 6 le moins important.

  • Bloc de citation

    Un bloc de citation permet d'afficher du texte qui est attribué à une autre personne : citation, extrait de livre ou de site web.

Mettre un texte en gras

Pour mettre un texte en gras, surlignez-le et cliquez sur le bouton Gras :

Mettre un texte en italique

Pour mettre un texte en italique, surlignez-le 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 les premiers éléments 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

Pour mettre en retrait un paragraphe, cliquez sur le bouton Retrait :

La mise en retrait d'un paragraphe crée une marge à sa gauche.

Supprimer le retrait d'un texte

Pour supprimer le retrait d'un paragraphe, cliquez sur le bouton Retrait négatif :

Le retrait négatif d'un paragraphe supprime toute marge de retrait appliquée au paragraphe.

Aligner un texte

Pour aligner du 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 le formatage d'un texte ou d'images, surlignez le contenu à modifier, puis cliquez sur le bouton Supprimer 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.
  • Delete row (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.
  • Delete table (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. Surlignez le texte ou l'image dont vous souhaitez faire un lien.

  2. Cliquez sur Insert link (Insérer un lien).

  3. Saisissez l'URL de destination du lien dans le champ Link to (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.

  1. Saisissez une brève description du lien dans la zone Titre du lien.

  2. Choisissez le mode d'ouverture du lien avec le menu Open this link in (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.

  1. Cliquez sur Insert link (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 les pages de votre magasin Shopify sont appelés liens internes. Vous pouvez utiliser des URL courtes pour créer des liens internes. Par exemple, l'URL /collections dirige vers la page des collections de votre magasin.

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 les sites web extérieurs à votre boutique Shopify sont appelés des 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 :

  1. Copiez l'URL du fichier que vous souhaitez mettre en lien.

  2. Dans l'interface administrateur Shopify, cliquez sur le produit, la collection, la page web ou l'article de blog où vous souhaitez ajouter le fichier.

  3. Dans l'éditeur de texte enrichi, saisissez ou choisissez le texte du lien.

  4. Sélectionnez le texte du lien.

  5. Cliquez sur Insert link (Insérer un lien) :

  6. Dans le champ Lien vers, collez l'URL du fichier que vous souhaitez mettre en lien.

  1. Cliquez sur Insert link (Insérer un lien). Dans l'éditeur de texte enrichi, le texte du lien s'affiche en bleu et est souligné.

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
  • choisir l'une de vos images de produit
  • utiliser une URL d'image publique.

Mettre en ligne des images

Étapes :

  1. Dans l'éditeur de texte enrichi, cliquez sur le bouton Insert image (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 une image au format JPG ou PNG sur votre ordinateur.

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

  6. Dans le menu Size to insert (Taille d'insertion), sélectionnez la taille d'affichage de l'image. Vous pouvez sélectionner Original pour insérer l'image sans modifier sa taille d'affichage.

  7. Cliquez sur Insert image (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 Insert image (Insérer une image) :

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

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

    Si vous ne voyez pas le support multimédia du produit que vous souhaitez insérer, vous pouvez utiliser les flèches pour le chercher sur d'autres pages.

  4. Dans le menu Size to insert (Taille d'insertion), sélectionnez la taille d'affichage de l'image. Vous pouvez sélectionner Original pour insérer l'image sans modifier sa taille d'affichage.

  5. Cliquez sur Insert image (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 Insert image (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 Insert image (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. Apportez vos modifications :

- 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.

  1. Cliquez sur Save (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 Edit image (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 changer d'image, indiquez une nouvelle URL d'image. - 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 Habillage du texte autour de l'image.

  1. 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.

  2. Rendez-vous sur Embed Responsively. Embed Responsively est un outil qui vous fournit un code d'intégration amélioré pour votre vidéo.

  3. Sur Embed Responsively, cliquez pour sélectionner le site web hébergeant votre vidéo.

  4. 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.

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

  6. Si la vidéo vient de YouTube et que vous souhaitez afficher uniquement les vidéos associées sur le même canal YouTube, recherchez l’URL de la vidéo dans le code d'intégration. Copiez et collez ?rel=0 à la fin entre les guillemets :

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

  8. Dans l'interface administrateur Shopify, cliquez sur le bouton Insert video (Insérer une vidéo) de l'éditeur de texte enrichi :

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

  10. Cliquez sur Insert video (Insérer une vidéo).

  11. Lorsque vous avez terminé, cliquez sur Save (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>

    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).

  6. Cliquez sur Save (Enregistrer).

  7. Cliquez sur View (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 Show HTML (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 Save (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