How to modify an image in an email template?
🇺🇸 How to modify an image in an email template?
[This article concerns Bigblue email templates. It is also available in French.]
As your brand evolves (new products, new visual identity...), you will want to modify the tracking emails you send to your client. This article aims at explaining you how to modify an image in an email template.
In a few words, you will have to locate the
img tag corresponding to the image you want to modify, and change its old address with the new image address.
You can find a step by step tutorial below.
1. Find the code corresponding to the image
Look for the
<img> tag that is the code counterpart of the image you want to edit.
Tutorial to find the image in the code
In the template code (left-hand side panel), your image will be represented by one of the
<img (...)> tag.
The image address is the link that follows the
src word in the tag. In the example above, it is https://i.imgur.com/Ago5ov7.png.
align = "center"enforces the image to be aligned to the center of the template.
style = "max-width:500px"specifies the style of the image, and especially its maximum width here
src="https://i.imgur.com/Ago5ov7.png"specifies the path of the image
How to locate img tags?
To spot it, clicking on the code panel, you can do a word search to highlight all the
img occurrences (
CTRL + F for Windows users,
CMD + F for Mac users).
There could be multiple image tags, and therefore multiple images in the template. You will need to find the good one that corresponds to the image you want to modify.
How to spot the right
Advice: images are listed from top to bottom, text blocks also. So you can look for the given image between two code blocks you can see on your screen.
Another way is to consult the image path, via its address, by typing it in your browser search bar → https://i.imgur.com/Ago5ov7.png
When you have spotted the right image tag, you will only have to replace the old path with the new one.
2. Change the image address
Then, modify the previous address
<img src="http://www.old-link.com" alt="www.old-link.com"> with the new address
Tutorial to change the image address
In order for an image to be accessible on the internet, it is required that it has an internet address. That is to say a link that can points out directly to the image. One can also use the words path, source, link.
All the images accessible on your e-commerce site have an internet address. To access it, on any image online, you can first right click and then click on
Copy image address.
If you haven't added the image yet to your e-commerce site, you can add it to your store platform (Shopify, Woocommerce, Magento, Wix, ...), and retrieve its link by right clicking on the image.
You can also use tools like Imgur to host your images online, and make them accessible via an internet link.
Drop your images on Imgur
- Visit the page https://imgur.com/upload
- Drag and drop the image(s) that you want to host online
- Your image is now hosted. You can right click on it, then click on
Copy image addressto get its address.
Now, replace the old link by the new one.
<img align="center" (...) src="https://i.imgur.com/Ago5ov7.png" /><br>
<img align="center" (...) src="https://i.imgur.com/z7dRau5.png" /><br>
Gif tutorial accessible below
You are done! Good job! 🎉