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 incorporé 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 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 :

Créer une liste à puces

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

Vous pouvez ensuite taper les articles pour créer une liste à puce :

Pour créer un nouvel élément 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 :

Saisissez ensuite les éléments de votre liste numérotée :

Pour créer un nouvel élément 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 pour l'attribuer au texte sélectionné :

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 Couleur de fond… :

  3. Cliquez sur une couleur pour l'attribuer à l'arrière-plan du texte sélectionné :

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 insérer un :

    Cela 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 http:// suivi de l'adresse web, par exemple : http://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. Par exemple, vous pouvez transformer le texte suivant en lien vers un guide des tailles au format PDF : Click here to download our sizing chart.

  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 un 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 l'image du produit que vous souhaitez insérer, vous pouvez utiliser les flèches pour la 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 d'une 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.

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.

É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 incorporé 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 votre vidéo provient de YouTube et que vous ne souhaitez pas qu'elle affiche les vidéos associées une fois la lecture terminée, recherchez l'URL de la vidéo dans le code d'intégration, puis copiez et collez ?rel=0 à la fin entre les apostrophes :

  7. Copiez la totalité du code qui se trouve dans la zone Embed code (Code incorporé).

  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.

  7. Cliquez sur View (Afficher) pour vous assurer que votre fichier audio est lu correctement.

Où utiliser l'éditeur de texte enrichi

Vous pouvez actuellement utiliser l'éditeur de texte enrichi dans l'application Shopify pour ajouter des descriptions à vos produits. Pour ajouter du texte à des pages, des articles de blogs ou des collections, vous devez le faire dans l'interface administrateur Shopify sur un navigateur web.

Formater du texte avec l'éditeur de texte enrichi

Voici les différentes options de formatage de texte que vous permet l'éditeur de texte enrichi :

  • Mettre un texte en gras
  • Mettre un texte en italique
  • Souligner un texte
  • Aligner un texte
  • Créer des listes

Mettre un texte en gras

Pour mettre votre texte en gras, mettez-le en surbrillance et appuyez sur le bouton Gras :

Mettre un texte en italique

Pour mettre un texte en italique, mettez-le en surbrillance et appuyez sur le bouton Italique :

Souligner un texte

Pour souligner un texte, surlignez-le et appuyez sur le bouton Souligné :

Aligner un texte

Étapes :

  1. Dans l'éditeur de texte, mettez en surbrillance le texte que vous souhaitez aligner.
  2. Appuyez sur le bouton Alignement :
  3. Appuyez sur l'une des options d'alignement pour sélectionner l'alignement à gauche, au centre ou à droite.

Créer des listes

Vous pouvez utiliser l'éditeur de texte pour ajouter des listes à puces ou numérotées dans votre texte.

Étapes :

  1. Dans l’éditeur de texte, appuyez sur le bouton Liste pour afficher les deux options :

  2. Appuyez sur l'option Liste à puces ou Liste numérotée pour sélectionner le type de liste que vous souhaitez ajouter.

  3. Saisissez votre liste d'éléments. Après chaque élément, appuyez sur Entrée pour passer à la ligne suivante et saisir un autre élément.

  4. Lorsque vous avez terminé la saisie de votre liste, appuyez deux fois sur Entrée.

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

Vous pouvez utiliser l'éditeur de texte pour ajouter des liens à votre texte :

  1. Dans l'éditeur de texte, sélectionnez les termes que vous souhaitez convertir en lien.

  2. Appuyez sur le bouton Lien :

  3. Dans l'écran Insert link (Insérer un lien), saisissez l'URL du lien.

  4. Saisissez le titre du lien, qui est utilisé pour l'accessibilité et le référencement naturel.

  5. Par défaut, la destination du lien s'ouvrira dans la même fenêtre. Pour que le lien s'ouvre dans une autre fenêtre, activez l'option Ouvrir le lien dans une nouvelle fenêtre.

  6. Appuyez sur Enregistrer.

Créer des liens internes et externes

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 commencer par http://.

Où utiliser l'éditeur de texte enrichi

Vous pouvez actuellement utiliser l'éditeur de texte enrichi dans l'application Shopify pour ajouter des descriptions à vos produits. Pour ajouter du texte à des pages, des articles de blogs ou des collections, vous devez le faire dans l'interface administrateur Shopify sur un navigateur web.

Formater du texte avec l'éditeur de texte enrichi

Voici les différentes options de formatage de texte que vous permet l'éditeur de texte enrichi :

  • Mettre un texte en gras
  • Mettre un texte en italique
  • Souligner un texte
  • Aligner un texte
  • Créer des listes

Mettre un texte en gras

Pour mettre votre texte en gras, mettez-le en surbrillance et appuyez sur le bouton Gras :

Mettre un texte en italique

Pour mettre un texte en italique, mettez-le en surbrillance et appuyez sur le bouton Italique :

Souligner un texte

Pour souligner un texte, surlignez-le et appuyez sur le bouton Souligné :

Aligner un texte

Étapes :

  1. Dans l'éditeur de texte, mettez en surbrillance le texte que vous souhaitez aligner.
  2. Appuyez sur le bouton Alignement :
  3. Appuyez sur l'une des options d'alignement pour sélectionner l'alignement à gauche, au centre ou à droite.

Créer des listes

Vous pouvez utiliser l'éditeur de texte pour ajouter des listes à puces ou numérotées dans votre texte.

Étapes :

  1. Dans l’éditeur de texte, appuyez sur le bouton Liste pour afficher les deux options :

  2. Appuyez sur l'option Liste à puces ou Liste numérotée pour sélectionner le type de liste que vous souhaitez ajouter.

  3. Saisissez votre liste d'éléments. Après chaque élément, appuyez sur Entrée pour passer à la ligne suivante et saisir un autre élément.

  4. Lorsque vous avez terminé la saisie de votre liste, appuyez deux fois sur Entrée.

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

Vous pouvez utiliser l'éditeur de texte pour ajouter des liens (hyperliens) à votre texte :

  1. Dans l'éditeur de texte, sélectionnez les termes que vous souhaitez convertir en lien.

  2. Appuyez sur le bouton Lien :

  3. Dans l'écran Insert link (Insérer un lien), saisissez l'URL du lien.

  4. Saisissez le titre du lien, qui est utilisé pour l'accessibilité et le référencement naturel.

  5. Par défaut, la destination du lien s'ouvrira dans la même fenêtre. Pour que le lien s'ouvre dans une autre fenêtre, activez l'option Ouvrir le lien dans une nouvelle fenêtre.

  6. Appuyez sur la coche pour enregistrer votre lien.

Créer des liens internes et externes

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 commencer par http://.

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

Essayez gratuitement