HIDE product photos

[BelK-AWCC]

Hi, 

My product photos - all have a transparent background for visual purposes when viewing collections to keep them all consistent with each other. Once someone clicks onto the product page; I would like to hide this single image without a background, and show only the other images set on that product.

I would also like this image to be hidden when running meta ads, or the likes of where data is drawn from our website - I would like these to also default to the other product photos that do feature a background. 

Is there a way to do this? 

We are currently using the 'REFRESH' theme, but looking at changing over to 'FEATHER' so are open to options on either of these where possible. 

Thank you for any assistance.

I have tried to include 3x reference images. 

Pic 1: Shows our products on the collections feed, with no background on images. 

Pic 2: The way our product page currently displays with noBG image, and then remaining images. 

Pic 3: The way we want our product page to display without the noBG image visible at all. 

 

[Moeed]

Hey @BelK-AWCC 

Share your Store URL and Password if enabled.

Best,

Moeed

[BelK-AWCC]

The live website is not the website I am looking to change the design on.

[rifat_Shopidevs]

I think you  can follow this step:

1, 

<style>
  .product-single__media-item:nth-child(1) { display: none !important; }
</style>

2,

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.product-single__media-item').forEach(el => {
      if (el.querySelector('img').src.includes('noBG')) {
        el.style.display = 'none';
      }
    });
  });
</script>

also there is another thing is 
Once the noBG image is removed from the product page, Shopify’s product feed will automatically use the next available image with a background. No additional configuration needed, just ensure the noBG image is no longer recognized as the featured image.

Hope its work for you.
Thank you

[BelK-AWCC]

Thanks for taking the time to reply. Where should I be adding this code, sorry?