Shopify Testing Widget Images

Description: Testing images in a widget is tricky because Shopify pulls and controls these images via code. What we are going to do here is change the primary image or video shown as a test variable. To do this, we must choose another image, other than the primary image) in your widget. Note: This is an advanced tutorial and does involve some code.

Step 1: Make sure that the image you want to test as the primary image is part of your widget. If it is not, add it through your Shopify interface.

Step 2: First you need to find the parent tag ID of all images.

Open the Webpage: Visit the webpage where you want to find the parent element.

• View the Source Code: Right-click on the webpage (not on an image or link) and select “Inspect.” This opens the Developer Tools window, which shows the HTML source code.

• Locate the Element: Right-click on the specific part of the webpage you're interested in (in this case images of your eCommerce widget. This will highlight the corresponding HTML code.

• Now we will need two IDs, the first one is the ID of the parent element, second one is the ID of the image you want to use as the main image in your test!

Step 3: Find the Parent Element. Look at the highlighted code. The parent element is the tag that directly encloses the selected element.

In most of the Shopify image widgets it will be an <ul> tag (that contains <li> tags that hold the images):

In our example the parent <ul> tag ID is : "Slider-Thumbnails-template--18261879619819__main"

The above ID is highlighted in red, you will need it in a later step.

Step 4: Find the ID number of the image.  In our example, we want to sue the third image as the main image in our test. So highlight the third thumbnail, and then check for the "data-media-position" attribute, in our case, it is number 3, so it will be: "data-media-position="3""

Step 5: Update the first two lines of the script below, to reflect the parent element ID, and the image number.

The first line is the BOLDED parent <ul> tag number, second line is the BOLDED data-media-position number of the desired image:

var parent_id = 'Slider-Thumbnails-template--18261879619819__main';

var selected_id = 'li[data-media-position="3"]';

var element = document.getElementById(parent_id);

var liElement = element.querySelector(selected_id);

var buttonElement = liElement.querySelector('button');

var clickEvent = new Event('click');

buttonElement.dispatchEvent(clickEvent);

Step 6: On your test page, in the test editor pick a variable not being used currently. You can choose any variable on your page. It does not have to be associated with the widget because in many cases you will be unable to select the widget as a variable (so it can be a logo, a paragraph, or anything).

Once the variable is selected, in the variable editor pop-up, go to the Variable scripts tab, and paste in the script created in step #5:

Save the test and you're good to go!