In this example, we will describe the steps required to create a widget for highlighting the image that generates the most conversions on the page:

Accessing the Image Matchmaker widget

1. Open the variation editor on the desired website.
2. Click Widgets in the toolbar on the right-hand side.
3. Enter Image Matchmaker in the search field.
4. Click the Image Matchmaker card.

You can now start configuring your modal. The Content tab is displayed by default.

Content tab

1. In the [JS Code] - Get number of image thumbs field, enter the JavaScript code for recovering the number of images on the page.
   In this case: document.querySelector(‘.swiper-wrapper’).children.length;
   In the example above, the JavaScript code is broken down as follows:
   
   

   document.querySelector(‘.swiper-wrapper’).children.length;	Indicates that the search is being carried out throughout the entire document (i.e. the entire page).
   document.querySelector(‘.swiper-wrapper’).children.length;	Function that returns the first element in the document with a “swiper-wrapper” class.
   document.querySelector(‘.swiper-wrapper’).children.length;	Name of the class containing miniature images.
   document.querySelector(‘.swiper-wrapper’).children.length;	Function that indicates the need to select the children of elements with a “swiper-wrapper” class.
   document.querySelector(‘.swiper-wrapper’).children.length;	Function that enables you to count the number of child elements.

   This function thus enables you to return the number of children in the “swiper-wrapper” class of the document, in other words, the number of miniature images included on the page.

2. In the [JS Code] - Change current img with __INDEX__ field, enter the JavaScript code that matches the position of the image highlighted on the page.
   In this case: document.querySelector(‘.gallery-thumbs. swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).click();
   In the example above, the JavaScript code is broken down as follows:
   
   

   document.querySelector(‘.gallery-thumbs .swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).click();	Indicates that the search is being carried out throughout the entire document (i.e. the entire page).
   document.querySelector(‘.gallery-thumbs. swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).click();	Function that returns the first element of the document with the selector (‘.gallery-thumbs. swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).
   document.querySelector(‘.gallery-thumbs. swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).click();	Name of the class containing the “swiper-wrapper” class. “Gallery-thumb” is thus the parent of “swiper-wrapper”.
   document.querySelector(‘.gallery-thumbs. swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).click();	Name of the class containing the “swiper-slide” class. “Swiper-wrapper” is thus the parent of “swiper-slide”.
   document.querySelector(‘.gallery-thumbs. swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).click();	Name of the class containing miniature images.
   document.querySelector(‘.gallery-thumbs. swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).click();	Specifies the number of the child to be selected. The number is returned thanks to the INDEX variable.
   document.querySelector(‘.gallery-thumbs.swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).click();	Variable that returns a number. This number coincides with the number of the miniature image the virtual click must be carried out on.
   document.querySelector(‘.gallery-thumbs.swiper-wrapper > .swiper-slide:nth-child(_INDEX_)’).click();	Function that enables a virtual click on the selected element.

   This function thus enables a virtual click on a miniature image to change the image highlighted on the page.

3. Click Select element.
4. Select the Call to action button on your page. In this case, the “Travel” button.
   A contextual menu is displayed.
5. Click Select this element
   (if necessary, use the Select. parent or Select. children option to select the right element).
   The code that matches the selected element is displayed in the configuration form. In this case:BODY BUTTON
6. Click Save.

Related articles

Image Matchmaker widget