Hide One Product Image on Individual Product Page -- Brooklyn Theme?

Tourist
53 0 1

I've been trying to solve this for a week and even posted a Shopify Experts job but no one can figure it out. 

 

I added icons to the front-facing bottle image on each individual product page on my site (https://illuminatelabs.io/products/ginkgo-biloba-extract), but wanted the images on the All Products page to be the plain version (without icons -- see here: https://illuminatelabs.io/collections/all). The only way to do this is to have both images in Shopify and point in the code to the second image for the grid page.

 

But what I want to do is to remove or hide that plain front bottle image from the individual product pages. You can see on the individual product pages how the first two images are the same front-facing bottle (https://illuminatelabs.io/products/ginkgo-biloba-extract). Can I hide that second image somehow?

0 Likes

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.product-single__photos div.product-single__photo--flex-wrapper:nth-child(2) {
display: none;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
53 0 1

Amazing -- thank you so much! It looks far better now.

0 Likes
Tourist
53 0 1

I just realized that the code you sent me works perfectly for desktop but it distorts the mobile product pages. They are showing a distorted version of the second, hidden image, rather than the first image with the icons like on Desktop view.

 

Do you have any idea why this might be happening?

0 Likes