Introduction

While preparing your store and uploading your content, you go by an editor that looks like the image below.

OB 4.7.1

4.7.1

This editor is called the “Wysiwyg” Editor, and it’s an abbreviation for “What You See Is What You Get”. It means the content you put in it will appear on your front-end just as it is.

In this article we will be explaining to you how to use it to upload images to your website.

Images uploaded using this editor at any part of your store are actually stored in your site’s “Media” folder. You might be editing a static block, the content of a page, or a blog post, using the editor tools and controls is the same wherever you use it.

To upload an image, kindly follow the below steps:

  • From the editor’s tool bar reach for the small tree image icon, and click on it.

OB 4.7.2

4.7.2

  • A dialog box will appear. Next to the field titled “Image URL“, click on the small button to add a new image.

OB 4.7.3

4.7.3

  • Another dialog will appear to upload images to your media folder. In the dialog window, click on “Browse Files” button to choose an image from your computer.

OB 4.7.4

4.7.4

  • After choosing an image file from your computer and clicking “Open“, a box will appear in the upload dialog window showing the name of the image you chose, and the “Upload Files” button also will appear, click on it to start uploading the image you chose from your computer to your website.

OB 4.7.5

4.7.5

  • When the upload is finished, the new image will appear among the images you see in the media folder, click only once on it, and then click on the button “Insert File” that just appeared.

OB 4.7.6

4.6

  • Now the new image URL will be added to the “Image URL” field in the first dialog window, to insert it to the content you are editing, only click on “Insert“. Choosing a description and a title for the image is optional.

You can see the image you uploaded now in the editor’s content box.

Outcome

You’re now able to use the content editor to upload images to your website