Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: rewrite with new screen shots.

Overview

This document will detail the There are two (2) main steps for adding images to a page in your storefront.  

Steps

...

 In this document, we'll be adding the image "bunny" to the Storefront's Contact page.  remember it's just an example.  The two steps are:

1)  Upload the desired image from your platform to the StoreFront File Manager, and 
2)  Place the image on the desired page


STEP 1: Upload the image.


Access your Storefront and navigate to the file manager tab.  From there click on the "contact" folder as shown below.


Image Added 


In the next screen, mouse over and click the "File Upload" icon as shown below. 
Image Added


The File Upload screen will appear.

Image Added

Using either of two following methods, locate your image file: 

  1.  Browse your system to locate the file; then drag and drop onto the grey, "Drag files here" area, or
  2.  Click the "Add Files" button to navigate your system and locate the file.


The File upload screen will now show your file below.

 Image Added

Click the Start Upload button once you have your image is listed.  

After uploading the file it appears in the file manager like this:

...

Image Added


STEP 2:  Placing the image onto the desired page - recall we are uploading a cute, little Bunny to our "Contacts" page.


Now that the image is uploaded into the

...

File Manager > Contacts page we'll now add the image to the Storefront page.

Navigate to StoreFronts > Pages (tab) and locate the "Contact" page. 

Image Added


A. Click the 'pencil" icon to the right of the page.
B. Click the "Content" tab.

Image Added


Insert the image onto this page by inserting the appropriate "img" tag as shown below.
 Image Added

Note: The URL is case sensitive.  Make certain that the name of the image in the code matches the image file name. 


After updating the content to include the image tag for the image, click the save and preview button to view the changes

...

.  
The following is an example of how our bunny image appears at the StoreFront Contact page. 

Image Added

Hop to it!