The process of adding a new e-commerce image starts with (1) Creating & uploading the enlargement and thumbnail, (2) Adding the image ID to your e-commerce data, and finally (3) Adding the image to the page itself. Read the instructions below for specifics...

+How To Add A New Gallery Image

Prepare the enlargement with the longest edge being 750 px. Keep your file sizes under ±300 KB and they should never exceed 500 KB (½ megabyte).
Name it using alphabetical & under_score characters only, very important - no white space, numbers or any other characters. For the sake of an example, we will call the image “Hana_Hula_Dancer.jpg” and we will assume the image is a vertical at 500 × 750 px.
Create the thumbnail for this image. If your image is a vertical, then resize the thumbnail to 210 px high. If your image is a horizontal, then resize the thumbnail to 140 px high. You will name it exactly as the first image but add “_Sm” to the large image name. Per our example, the thumbnail image for “Hana_Hula_Dancer.jpg” will be “Hana_Hula_Dancer_Sm.jpg”
Upload both images & keep the image uploader open as it references the image names that you will need in later steps.
Referring to the JavaScript E-Commerce data below (the last of the 2 text boxes), create a new ID value. Per our example, the ID will be: ID.Hana_Hula_Dancer = [ "Hula Dancer at Hamoa Beach", 500, 750 ]; The name w/i double quotes is the user-friendly name that clients will see as the title for this image, 500 & 750 are the width and height respectively. The ID value (Hana_Hula_Dancer) is used internally by the e-commerce software and is not visible to the public. It’s value must exactly match (case-sensitive) the large image name (w/o the .jpg).
Now publish the JavaScript data, when the page loads, you will not see any changes just yet so continue on...
Not scroll to the HTML content section and locate the row where you would like to place this image:
1. For nicest appearance, keep verticals and horizontals on their own rows (don't mix them within a row). There can be up to 5 verticals per row, but don't exceed 3 horizontals per row.
2. If the row has room for another image, then you will add your new image to this row. You do this by copying, pasting then modifying an existing line starting with <td> and ending with </td>. On the other hand, if you need to make a new row you will copy and existing image row, and paste it in as a new row at the bottom. Then you will remove all but one existing image in this row.
3. Now, overtype the old Existing_Image_Name_Sm.jpg with your new image name Hana_Hula_Dancer_Sm.jpg. Then type in the width & height of your new thumbnail.
At this point you have modified the HTML so that your new image will show, go ahead and publish the HTML. If you have done everything correctly your new thumbnail will show. If not an error message will display, if so make sure the ID value in the JavaScript data matches (case-sensitive) the name of the large image with the trailing .jpg removed.
Click the thumbnail to ensure the large image shows. If the large image does not show make sure you have followed the naming conventions outlined in these instructions and/or upload it again.