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 styliser le contenu qui s’affiche sur votre boutique en ligne.

Où utiliser l’éditeur de texte enrichi

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

• Descriptions de produits
• Descriptions de collections
• Articles de blog
• Pages
• Politiques de la boutique

Si vous utilisez un thème compatible, 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 produits et vos descriptions de collections avec l’éditeur de texte enrichi.

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

Dans la vue 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 utilisant le code HTML, et vous pouvez déboguer ou affiner la mise en page et le style du contenu.

Intégrer un widget multimédia

Si vous souhaitez intégrer un widget vidéo ou musical, vous devez d’abord l’héberger sur un service comme 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. Sélectionnez l’intégralité du code d’intégration en cliquant dessus et en appuyant sur Ctrl + A sur un PC ou sur Cmd + A sur un Mac.
3. Copiez le code d’intégration en appuyant sur Ctrl + C sur un PC ou sur Cmd + C sur un Mac.
4. Dans votre interface administrateur Shopify, cliquez sur le bouton Afficher le code HTML dans 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 Cmd + V sur un Mac.
6. Cliquez sur Enregistrer.

Mettre en forme du texte avec l’éditeur de texte enrichi

Avec le bouton Mise en forme, vous pouvez rapidement créer des paragraphes, des titres ou des citations. L’utilisation d’une mise en forme et de niveaux de titre appropriés aide les internautes et les moteurs de recherche à lire le contenu de votre site web.

Pour choisir un format pour le texte, surlignez le texte, puis cliquez sur le bouton Mise en forme.

Options de mise en forme

• Paragraphe

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

• Titre (1-6)

  Les titres sont utilisés pour structurer le contenu. Il existe 6 niveaux de titre. Le Titre 1 est le niveau le plus important et le Titre 6 est le moins important.

• Citation

  Une citation est utilisée pour afficher du texte attribué à quelqu’un d’autre, comme une citation ou un extrait d’un livre ou d’un site web.

Mise en gras du texte

Pour mettre du texte en gras, surlignez le texte et cliquez sur le bouton Gras.

Mise en italique du texte

Pour mettre du texte en italique, surlignez le texte et cliquez sur le bouton Italique.

Soulignement du texte

Pour souligner du texte, surlignez le texte et cliquez sur le bouton Souligner.

Créer une liste à puces

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

Vous pouvez saisir le premier élément de la liste à puces. Pour créer de nouveaux éléments dans la liste, appuyez sur la touche Entrée ou Retour. Pour terminer la liste, appuyez deux fois sur la touche Entrée ou Retour.

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 saisir le premier élément de la liste numérotée. Pour créer de nouveaux éléments dans la liste, appuyez sur la touche Entrée ou Retour. Pour terminer la liste, appuyez deux fois sur la touche Entrée ou Retour.

Mettre le texte en retrait

La mise en retrait d’un paragraphe ajoute une marge sur son côté gauche. Pour mettre un paragraphe en retrait, cliquez sur le bouton Mettre en retrait.

Supprimer le retrait du texte

La suppression du retrait d’un paragraphe supprime les marges de retrait qui lui ont été appliquées. Pour supprimer le retrait ou effectuer un « retrait négatif » d’un paragraphe, cliquez sur le bouton Supprimer le retrait.

Aligner le texte

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

Changer la couleur du texte

1. Surlignez le texte et cliquez sur le bouton Couleur.
2. Cliquez sur une couleur ou saisissez un code hexadécimal pour que le texte surligné prenne cette couleur.

Changer la couleur d'arrière-plan du texte

1. Surlignez le texte 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 que l’arrière-plan du texte surligné prenne cette couleur.

Effacer la mise en forme dans l'éditeur de texte enrichi

Pour supprimer la mise en forme du texte ou des images, surlignez le contenu, puis cliquez sur le bouton Effacer la mise en forme.

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 y insérer 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 insérer un tableau. Un tableau d’une ligne et d’une colonne est alors créé.

Après avoir créé un tableau, cliquez de nouveau sur le bouton Insérer un tableau pour modifier les lignes et les colonnes du tableau :

• Insérer une ligne au-dessus : placez votre curseur dans une ligne et cliquez sur ce bouton pour insérer une nouvelle ligne au-dessus.
• Insérer une ligne en dessous : placez votre curseur dans une ligne et cliquez sur ce bouton pour insérer une nouvelle ligne en dessous.
• Insérer une colonne avant : placez votre curseur dans une colonne et cliquez sur ce bouton pour insérer une nouvelle colonne avant celle-ci.
• Insérer une colonne après : placez votre curseur dans une colonne et cliquez sur ce bouton pour insérer une nouvelle colonne après celle-ci.
• Supprimer la ligne : placez votre curseur dans la ligne que vous souhaitez supprimer, puis cliquez sur ce bouton.
• Supprimer la colonne : placez votre curseur dans la colonne que vous souhaitez supprimer, puis cliquez sur ce bouton.
• Supprimer le tableau : placez votre curseur n’importe où dans le tableau, puis cliquez sur ce bouton pour supprimer le tableau entier.

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

Vous pouvez insérer des liens (hyperliens) dans les articles de blog, les pages, les descriptions de produit et les descriptions de collection avec l’éditeur de texte enrichi. Vous pouvez ajouter des liens qui redirigent les clients vers des pages de votre boutique en ligne Shopify et vers d’autres sites web. Vous pouvez également ajouter des liens qui ouvrent un e-mail ou qui permettent de passer un appel téléphonique, afin d’aider les clients à vous contacter.

Étapes :

1. Surlignez le texte ou l’image que vous souhaitez transformer en 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 qui n’appartient pas à 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, 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:exemple@exemple.com).
   • Pour créer un lien qui passe 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 case Titre du lien.
5. Choisissez comment le lien s’ouvrira avec le menu Ouvrir ce lien dans :
   • la même fenêtre : le lien s’ouvrira dans l’onglet ou la fenêtre du navigateur de l’utilisateur.
   • une nouvelle fenêtre : le lien s’ouvrira dans un nouvel onglet ou une nouvelle fenêtre du navigateur.
6. Cliquez sur Insérer un lien pour convertir le texte surligné en lien.

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

Les liens vers des pages 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 renverra à la page des collections de votre boutique.

Pour créer un lien vers une page spécifique de votre boutique en ligne, comme une page de collection ou de produit, utilisez le format d’URL /type-de-page/ancre-de-page. Par exemple, pour créer un lien vers une collection que vous avez créée et appelée Collection d’été, utilisez l’URL /collections/summer-collection.

Les liens vers des sites web qui n’appartiennent pas à votre boutique Shopify sont appelés liens externes. Les liens externes doivent être saisis en entier et commencer par http://.

Créer un lien vers un fichier dans le contenu d'une page

Après avoir importé un fichier, vous pouvez le lier au contenu dans l’éditeur de texte enrichi pour le rendre téléchargeable à partir d’une description de produit ou de collection, d’une page web ou d’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 :

• charger des images
• choisir parmi vos images de produit
• utiliser une URL d’image publique.

Charger 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 chargées.

3. Cliquez sur Charger un fichier.

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

5. Cliquez sur l’image que vous avez chargée pour la sélectionner.

6. Dans le menu Taille, 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 Insérer une image pour placer l’image dans l’éditeur de texte enrichi.

Choisir parmi les images 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 produit.

3. Cliquez sur l’image que vous souhaitez insérer. Si vous ne trouvez pas le support multimédia de produit que vous souhaitez insérer, vous pouvez utiliser les boutons fléchés pour parcourir les différentes pages.

4. Dans le menu Taille, 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 Insérer une image pour placer l’image de produit dans l’éditeur de texte enrichi.

Utiliser une URL d’image

Pour 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. Saisissez l’URL accessible publiquement de votre fichier image.
4. Cliquez sur Insérer une image pour insérer l’image dans l’éditeur de texte enrichi à sa taille d’origine.

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

Après avoir ajouté une image dans la description d’un produit ou d’une collection, une page web ou un blog, vous pouvez la déplacer vers un autre emplacement dans le contenu.

Étapes :

1. Dans votre interface administrateur Shopify, cliquez sur le produit, la collection, la page web ou l’article de blog qui inclut 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 vers un autre emplacement dans le champ 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 alternatif 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. Utilisez les options de taille et d’alignement pour modifier l’image :
   • Pour modifier la taille de l’image, sélectionnez une option de taille.
   • Pour améliorer le référencement naturel (SEO) et l’accessibilité de votre boutique en ligne, ajoutez ou modifiez le texte alternatif de l’image.
   • Pour ajouter un espacement, saisissez le nombre de pixels d’espace que vous souhaitez de chaque côté.
   • 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 l’habillage du texte, cochez Habiller 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

Vous pouvez insérer ou intégrer des vidéos dans des articles de blog, des pages, des descriptions de produits et des descriptions de collections à l’aide de l’éditeur de texte enrichi.

Si vous souhaitez intégrer une vidéo que vous avez créée, vous devez d’abord la charger sur un site de streaming vidéo tel que YouTube ou Vimeo.

YouTube ne vous permet pas de désactiver les vidéos suggérées, mais vous pouvez spécifier que les vidéos suggérées doivent provenir de la même chaîne que la vidéo qui vient d’être lue.

Étapes :

1. Copiez l’URL de la vidéo en appuyant sur ctrl + C sur un PC ou sur command + C sur un Mac.

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

3. Sur Embed Responsively, cliquez pour sélectionner le site web où se trouve votre vidéo.
4. Collez l’URL de la vidéo que vous avez copiée dans le champ Page URL sur Embed Responsively en appuyant sur ctrl + V sur un PC ou commande + V sur un Mac.
5. Cliquez sur Embed. Embed Responsively créera le code d’intégration pour vous.
6. Si la vidéo provient de YouTube et que vous souhaitez afficher uniquement les vidéos associées 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.
7. Copiez tout le code qui se trouve dans la zone Embed code.
8. Dans votre interface administrateur Shopify, cliquez sur le bouton Insérer une vidéo dans 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 Insérer une vidéo.
11. Cliquez sur Enregistrer lorsque vous avez terminé pour enregistrer vos modifications sur l’article que vous étiez en train de modifier.

Insertion de fichiers audio avec l’éditeur de texte enrichi

Vous pouvez utiliser l’éditeur de texte enrichi pour insérer ou intégrer des fichiers audio dans des articles de blog, des pages, des descriptions de produits et des descriptions de collections.

Étapes :

1. Depuis votre interface administrateur Shopify, allez à Contenu > Fichiers.

2. Cliquez sur Charger des fichiers pour charger le fichier audio que vous souhaitez insérer ou intégrer à votre boutique.

3. Depuis la section Boutique en ligne, ouvrez l’éditeur de texte enrichi pour la page ou l’article de blog où vous souhaitez afficher le fichier audio.

4. Copiez <div id="player"><audio controls="controls">, puis collez le code dans l’éditeur de texte enrichi pour intégrer un lecteur audio sur 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 votre éditeur de texte enrichi après le 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 chargé sur Shopify. Vous pouvez retrouver l’URL de votre fichier audio à tout moment sur la page Fichiers.
7. Cliquez sur Enregistrer.
8. Cliquez sur Afficher pour vous assurer que votre fichier audio se lit correctement.

Ajout ou suppression de commentaires internes dans l’éditeur de texte enrichi

Vous pouvez utiliser les balises de commentaire <!-- et --> pour du 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, placez le texte que vous souhaitez masquer entre <!-- et -->. Par exemple : <!--yourtext-->.
3. Cliquez sur Enregistrer.

Les balises HTML placées entre les 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 --> qui les entourent.

Fonctionnement de l’éditeur de texte enrichi

L’éditeur de texte enrichi est intégré à TinyMCE, un réseau de diffusion de contenu (CDN) tiers. Cette intégration a des implications importantes :

• Limite de contenu : une limite stricte de 64 Ko s’applique au contenu saisi dans l’éditeur de texte enrichi. Cela s’applique aux Pages, aux articles de blog et aux scripts supplémentaires.
• Nettoyage du code HTML : TinyMCE fournit une logique de filtrage de contenu qui corrige automatiquement le formatage HTML pour éviter les dysfonctionnements de la boutique en ligne et les risques de sécurité. Bien que vous puissiez modifier manuellement le code HTML pour rétablir sa forme d’origine, il est recommandé de tenir compte de ces modifications automatiques pour éviter les problèmes potentiels.

Résolution de problèmes avec l’éditeur de texte enrichi

Si vous rencontrez des problèmes avec l’éditeur de texte enrichi, consultez les étapes de résolution de problèmes et les problèmes courants suivants.

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>

mailto:email@example.com