Images may be added to an email template by first uploading the desired images to the store's image directory, and then editing the email template to add image tags that link to those images.
Upload images to the store's image directory
To upload images to the store's image directory, from the store's admin area navigation menu, select [Design > Upload Store Graphics]. This will open the Select/Upload Images tool in a new window.
recommended reading
The various options and settings of the Select/Upload Images tool are explained in detail in the following Knowledge Base article:
Select/Upload Images
Locate the file path for each of the uploaded images
To locate the file path details for each of the uploaded images, from the store's admin area navigation menu, select [Design > Search Store Graphics].
The columns of the Store Images section of the Search Store Graphics page are customizable. If a column titled Image Paths is not currently displayed in the Store Images table, simply add the column as follows:
-
Click on the Customize table columns link just above the top right corner of the Store Images table.
-
In the Customize Search Images Table Columns popup window, select the checkbox next to Image File Path.
-
Click the Save My Changes button to save the change and close the popup window.
-
The Store Images table should now include a column titled Image Paths.
Now, browse through the images listed in the Store Images table, and locate the images to be used in the email template. To obtain the file path for each image, click on the icon in the image's Image Paths column to open the Image File Paths popup window. In order to use the image in an email, the Global Path will be needed.
The text may be copied and pasted into a text editor such as Notepad, so it is available later. Or simply leave the Search Store Graphics page open in the current browser window, and open a new browser window to use for the next step.
Add image tags to the email template
In order to add image tags to the email template, open the email template in the appropriate editor.
If the email template is one used by a store-generated email message, such as the Order Receipt email, go to [Design > Email Messages], and on the Search Store-Generated Email Message page, click on the SID number link or edit button of the desired email template. This will open the email template in the Store-Generated Email Messages Editor.
If the email template is one used by a Modular Mailer email message, go to [Modules > Modular Mailer > Search Email Templates]. On the Search Email Templates page, click on the SID number link or edit button of the desired email template. This will open the email template in the Email Template Editor.
Images will not be included in plain text versions of emails, so skip to the section titled HTML Version of Message. Confirm that the checkbox directly below the HTML Version of Message title bar is selected, to include the HTML version of the email message.
Next, click the Source button at the top left of the HTML Version of Message toolbar area. This will refresh the HTML editor pane to display the HTML source code of the selected email template.
Scroll through the source code to the desired location for the first image. Add an image tag by entering text with the following format:
<img src="http://domain/path/to/image.ext" />
http://domain/path/to/image.ext should be replaced by the image's exact file path details, which were obtained in the second part of this tutorial.
example
If the store's domain is www.mystore.com, and the image's file path details are /store/images/storelogo.png, then the exact image tag would be:
<img src="http://www.mystore.com/store/images/storelogo.png" />
Proceed through the rest of the email template, entering image tags for each image to be added to the template. Once all of the desired images have been added, click Save Changes at the bottom of the page.
Result
The desired images will now be added to email messages that are created using the selected email template. Recipients will be able to view those images, as long as their email program is set to allow images (for security reasons, some email programs disable images by default).
If the image files are ever deleted, moved, or renamed, then those images will no longer be displayed in emails, and instead a "broken link" icon will be displayed. To update the email template if the image files are moved or renamed, simply repeat the second and third parts of this tutorial, to locate the new "image path" details, and to update the email template with new "image tags" containing the new "image path" details.
|
