Different Images for All Products Page and Individual Product Pages?

Solved
Tourist
27 0 0

My site is built with Brooklyn theme. I recently added icons to each main product image to highlight brand benefits. This looks how I want it to on the individual product pages (https://illuminatelabs.io/products/panax-ginseng-extract), but looks visually redundant on the All Products page (https://illuminatelabs.io/collections/all) because the icons are the same. 

 

I'm hoping to use the standard product images (without icons) for the All Products page and keep the icon-images as the main images for each individual products page.

 

Is there a way to do this in Brooklyn theme?

0 Likes

Success.

Shopify Partner
1927 321 406

Hi @CalCook100 

Yes you can do that just follow this:

1. Open Snippet->product-grid-item.liquid-> find all "featured_image" and replace with images[1].

So right now its look like:

product.featured_image

After changes look like:

product.images[1]

Note: replace all on this page. That will show 2nd image of product on collection page grid and keep same on individual product page.

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
27 0 0

Hi, thank you for your response! This is a good workaround but I'm curious if there's a way to include an image which isn't in the product images at all. Since I have a product image with the icons, having the same product image without the icons on each product page would look weird.

 

Ideally what I'm looking to do is have the image of the product without the icons on the All Products page, and the image with the icons on the individual product pages. These are two distinct images. Or is there a way to add the icon-free image to Shopify but somehow hide them on the individual product pages?

0 Likes
Highlighted
Shopify Partner
2569 39 592

Yes, it's possible, for example Boundless theme shows first product image on collection pages (as most themes do), but allows you to skip it on product page.

Similar code can be added to most themes.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Tourist
27 0 0

Do you think I could just copy and paste the relevant section into my Brooklyn theme or would I need to custom code it?

0 Likes
Shopify Partner
2569 39 592

No, you can't copy-paste.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes