Rich-text Reply

Change product images regardless of their positions?

BradaMaxi 11-01-15
Accepted Solution

Change product images regardless of their positions?

Dear Optimizely,

My collection pages usually contain square product images (New Arrivals Page) so I wonder what would happen if I change all of them to vertical rectangular images (2x3).

I changed product image 0 to product image 0a (vertical image), image 1 to 1a, 2 to 2a, etc. and below is my current code:

However, when I go to other collection pages (New Arrivals to Tops, Newest to Oldest, etc.) or add new products, the product positions will be changed (Product 0 becomes product 1, 1 becomes 2, 2 becomes 3, etc…) so the code is wrong.
Is there any way to change the image link regardless of its positions in the current page? For example if there is a image link like “cdn.shopify.com/s/files/1/0359/2737/products/03595-QLZ_1_large.jpg?v=1446374015” it will be changed to " cdn.shopify.com/s/files/1/0359/2737/products/03595-QLZ_0_large.jpg?v=1446304730"});

(My experiment ID is 3697940897 and my email is info@brada-maxi.com)

Please check and thank you very much.

info@brada-maxi.com

Re: Change product images regardless of their positions?

Hi there,

 

Thanks for your question!

 

There are certainly ways of selecting a certain image on a page. With jQuery you can select almost any element on your page in great detail.

 

For selecting one of the images on your page, you can use this code: 

$("img[src='http://cdn.shopify.com/s/files/1/0359/2737/products/03597-DNZ_1_large.jpg?v=1445597911']")

It selects all images on your page, and then selects the one with that specific source.

 

 

See this w3 article for some more information on advanced CSS selectors.

 

I hope this helps!

 

Nils

BradaMaxi 11-06-15
 

Re: Change product images regardless of their positions?

Hi Nils,
Thank you for your reply,

I have tried your code like this:

 

$("img[src='http://cdn.shopify.com/s/files/1/0359/2737/products/03605-DLZ_1_large.jpg?v=1445597642']").attr({"src":"https://cdn.shopify.com/s/files/1/0359/2737/products/03605-DLZ_0_large.jpg?v=1446375996"});

in the first image link if I use "https" the code will only work in Editor mode, not in Preview. I change it to "http", the code doesn't work in Editor but in Preview Mode it's ok so I'm using "http" now. Am I doing it right?
--
The second problem is that my website just load the first 25 products, if visitors scroll down to the bottom of the page it will automatically load the next 25 products. However, the code only works with the first 25 products. I need it to work with at least 50 products in each product category. What should I do?
--
Besides, I added 200 lines of code to change 200 product images (50 for each of 4 categories: Tops, Pants, Dress & New Arrivals). Will it affect my site speed? Should I create 4 experiments for each category instead of just 1 experiment for all of them?
Please check and thank you again.

info@brada-maxi.com

Re: Change product images regardless of their positions?

Hi there,

 

I've had a look at your experiment, and for me your code looks fine in the editor to me. Have you tried enabling mixed content?

 

 

Since the rest of questions are very specific, I'll create a tech support ticket for you and get back to you over email (info@brada-maxi.com).

 

Best,

Nils