This website works best with JavaScript enabled. Learn how to enable JavaScript.

How to Add a New Image to a Variation

Last updated

A variation of your website may contain any change that you feel can boost conversions. If you decide to create a more visual impact, adding an image can serve the purpose just right. Using VWO, there are three simple ways to add an image to a variation:

  • Using Copy and Paste Operations in Visual Editor
  • Using the Select Parent and Edit HTML operations
  • Using Custom JS code

Using Copy and Paste Editor Operations

  1. In the visual editor, select any existing image on the webpage and then select Copy. new-image1
  2. Select the position on your webpage where you want to add a new image and then click Paste. Next, select Before this element or After this element to paste the copied image at this position. new-image2
  3. To replace the copied image with the new image, select the copied image from the previous step and then select Change Imagenewimage3
  4. You have three options:
    • Upload an image from your local hard drive.
    • Type a URL to specify the image location.
    • Use an existing image. While choosing the image, you can also type the title, alternative text, and size of the image to be uploaded. newimage4

Using the Select Parent and Edit HTML Operations

  1. In the visual editor, select any existing image on the webpage and then select Copy.
  2. On your webpage, select the position where you want to add a new image and then select Paste. Next, select Before this element or After this element to paste the copied image at this position.
  3. Select the copied image from the previous step and then select the Select Parent option to edit the element container. new-image-5
  4. To replace the selected element with the image, select the Edit HTML operation. newimage6
    For example, <p><em> This is a placeholder </em></p>. In this HTML code snippet, <em> is the copied element and <p> is the parent element. In the code editor window, replace the <em> tag with an image as follows:
    <p><img src=”images/img1.jpg” /></p>

Using Custom JS Code

You can directly add the JS code snippet in the code editor window to add an image on the page. Example:

 

if (window.timerX) clearInterval(window.timerX);

window.timerX = setInterval(function() {

if (vwo_$('CSS path of element').length) {

vwo_$("CSS path of element").after("<img src='images/img1.jpg' />");

clearInterval(window.timerX);}

}, 100);

This code snippet adds the image with src as images/img1.jpg after the element with the CSS selector provided in the code. Follow the best practices while using custom JS code.

 

Was this article helpful?

Thanks for your feedback!
Please email us at support@vwo.com to tell us what you were looking for. We'll send the answer to your inbox.

Contact Us / Login