2.1K members online now
2.1K members online now
Discover how to select who is eligible to be in your experiment, and when they’re served experiment variations.
Guide Me

Changing Product Images on both Product Page as Shop Collection Page

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭



When I change the product images in my A/B test to other product images, the images will only change on the product page itself, but the "original" product images will be shown on the shop collection page (where all the products are shown). Is it possible to target and run the script for both the product page as the shop collection page for changing the product images?

1 Expert replyverified_user

Changing Product Images on both Product Page as Shop Collection Page

Google Employee
# 2
Google Employee

Yes, sure


Have you noticed the Targeting tab in the Experiment details page? There, you may go and change the targeting rules of your experiment, so that your change may apply not only on the page that you edited, but on multiple pages (or even your whole site).


You may provide just a list of all the pages where your experiment will run, or use more advanced options like a regular expression on the URL, or other targeting rules (i.e. domain etc).


Now depending on how your site is organized, you probably need to do one of the following:


1) Both pages include exactly the same image element, with the same ID or class:

Just expand your targeting rules to include the second page.


2) The pages use the image in different areas/elements, but at least both images have the same URL:

You can use the power of CSS selectors: replace the CSS selector that the editor came up with :  img[src="<your image url>"]. Then change your targeting rules as above (case 1)


3) The images are different photos of the same product, and the URLs are different:

Use the editor to go on the first page and modify the first image. It will be better to use the trick mentioned above (case 2) to make sure that you will always change this particular image no-matter-what.

Then use the "interactive mode" of the editor and navigate to the second page and do the same (and save again).

Now go back to targeting and change your rules as in case 1.


As long as there are no unwanted conflicts of your CSS selectors (should not be the case if you used the img[src] trick), there will be no problem - the first change will be applied when users visit the first page, and the second on the other.