Inserting images into text fields

Images can currently only be inserted into text fields of CMS elements with a little "trick". We explain how this works in these instructions.

1. Open the administration of your shop

2. Media Manager

   1. Switch to the Media Manager via the main navigation ("Content" => "Shopping Experiences")

   2. Browse for the desired image

   3. Now copy the path to the image to the clipboard by clicking on "Copy Link" (1, 2)

3. HTML code

   • To insert the image as an HTML element in a text field, you must insert the path in a corresponding HTML code

   • Use the following example for this: <img src="..." alt="...">

     • Replace the ellipsis in the src tag with the image path

     • Replace the ellipsis in the tag alt with a short description of the image

4. Shopping Experience Management

   1. Switch to Shopping Experience Management via the main navigation ("Content" => "Shopping Experiences")

   2. Open the desired CMS layout

   3. Click on the "gear" icon to configure the desired CMS element
   4. The pop-up "Element settings" will open

   5. Click on the "code" icon to switch to HTML mode (3)
   6. Insert the HTML code created above at the desired position

   7. Wait a moment until the HTML Sanitizer of Shopware 6 has checked the code

   8. Save your changes

You have now inserted an image into a text field.

Screenshots

Note: If an image is missing in the Storefront, the path to the image has probably changed (e.g. by renaming or moving it). Just correct the path by repeating the above steps.

Code example

<img src="..." alt="...">

---

Further information

You can find more information about inserting HTML code and the Shopware 6 HTML Sanitizer in the following article:

pageHTML code