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.

⌨️ Be able to code (and know the basis of HTML coding) is not necessary here but if you want to know what the HTML code refers to above, you can unfold the section below.
What does align="center"... mean?
These terms encode some image attributes in the HTML language.
- 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 <img> tag?

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 src="http://www.new-link.com".

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
  1. Visit the page https://imgur.com/upload
  2. Drag and drop the image(s) that you want to host online

  3. Your image is now hosted. You can right click on it, then click on Copy image address to get its address.

πŸ‘‰ To verify that you have copied the right address, visit the link in your browser, the image should be displayed.

Now, replace the old link by the new one.

Before

<img align="center" (...) src="https://i.imgur.com/Ago5ov7.png" /><br>
	

Previous image

After

<img align="center" (...) src="https://i.imgur.com/z7dRau5.png" /><br>
	

New image

Gif tutorial accessible below

You are done! Good job! πŸŽ‰

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us