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

How to Change Image in a Variation

Last updated

Using VWO Visual Editor, you can change, insert, or edit images on a webpage without touching a single line of code. Using the editor, you can perform the following actions on your webpage:

  • Change image
  • Insert a new image.
  • Edit an existing image.

Change Image

  1. On VWO Visual Editor, click the image you want to replace and then select Change Image from the Editor Tool options.editor-28
  2. In the Change Image window, specify the image you want to upload and then enter the title, alternative text for the image, and size of the image.editor-29
    • Upload Image: To upload a new image, click Choose File to select an image from your local hard disk.
    • Specify URL: If the image you want to upload is already online, enter the URL to access the image.
    • Browse Existing Images: Browse the images you have already uploaded and then select the one that you want to upload. The images you upload are saved on VWO cloud servers, and the same are accessed using this option.
  3. Enter the title, alt text, and size of the image you want to upload and then click Done.
    PRO-TIP If the image you uploaded is bigger in size than the original version (control), the original image might appear for a moment before the new image is loaded on the webpage. To avoid flickering in such cases, first use the Hide operation on the image in the control. Next, use the Edit HTML operation or the code editor and add a style attribute with value as display:block !important to ensure that the visibility of the image is always on. When a visitor lands on the web page, the hide operation ensures that the control image is hidden and the new image is displayed when Edit Html/JavaScript code snippet has rendered the image. To learn more about the Edit HTML operation, click here.

Inserting a New Image

  1. To insert a new image to a variation page, click the element where you want to insert the image and then click the Edit HTML option from the Tools option.editor-30
  2. In the HTML window, add the <img scr=””> tag inside the parent tag of the element.editor-31
  3. Alternatively, you can also insert the new image using the Edit option from the Tools menu. Click the Image option from the Edit window to upload a new image to a variation.editor-32
  4. To insert the image, click Done.
    ATTENTION It is recommended NOT to use the Edit HTML or Edit operation on dynamic content such as product image/price/description, cart product count, dynamic headlines, and so on. Use the Edit or Edit HTML operation on elements that require minor modification or to change a single element on a web page.

Edit Image

  1. To modify an image in a variation webpage, click the image and then select the Edit Image option from the Tools menu.editor-33
  2. In the Edit Image window, you can rotate, flip, sharpen, crop, and perform other enhancements to the image.editor-34
  3. If the image you want to edit is associated with the stylesheet of the website with the tag background-image:url(‘http://image.png’), you will notice the Edit Background Image option when clicking the image. Click the option to edit the image.editor-35
  4. After making the changes, click Apply > Done to save the changes.

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

Product
Resources Home