Adding Non-Product Images

Non-product images can be added when needed to a page on your website. You can also make a non-product image a hyperlink. Non-product images can be in JPG, PNG, or GIF format and should be store in the Images folder on your staging site.

Upload the image to your Images folder using your SFTP program (BitVise or Cyberduck).
In your STFP program, locate page you want to edit and open that file in your HTML editor.
Locate the place on the page you want to add the image.
In code view, enter the image code <img src="images/filename" alt="description"> replacing filename with the actual name of your image (i.e. college-campus.jpg) and description with information about the image.
When you click down to design view you will see a placeholder for the added image.
Save the page.
View the page in your web browser to verify the image is loading correctly.

Note: If you already have the page open in your web browser, you will need to refresh the page.

Optional Method:

Upload the image to your Images folder using your SFTP program (BitVise or Cyberduck).
In your STFP program, locate page you want to edit and open that file in your HTML editor.
Place the image on your workstation in an images folder.
Click and drag the image file from your workstation into the Design view (bottom) pane of your page, wherever you would like to place it.
Tip: If you have trouble placing the image accurately, try adding an empty paragraph where you want the image to be placed. Then drag the image there.
When you release your mouse, an Accessibility Properties dialog box will appear. Enter a brief description of the image in the Alternate Text field.
Note: This alternative text will provide accessible information about the image to shoppers with a visual disability, who may be navigating your site with a screen reading program.
Click OK. The image will be added to the page.
Tip: You can align your image using the text alignment buttons
Right-click the image and select Picture Properties.
In the Picture field, remove everything up to the word images from the very beginning of the picture path. For example, if the original path to your image was “../images/nameofimage.jpg”, the new path would be “images/nameofimage.jpg”.
Click OK. The image will disappear and be replaced with a broken image icon – this is normal and the image will display correctly when you view the page in your browser.
Save the page.
View the page in your web browser to verify the image is loading correctly.

Note: If you already have the page open in your web browser, you will need to refresh the page.

First Published 06/24/2020

Edited 06/24/2020