Hide First Image On Product Page (Dawn Theme)

[GVH]

Hi,

Is there anyway to hide the main media item (the first product image in shopify) only on the product page.
So, the main media item will show on the home page & collection page, but will be hidden on the product page. The product page will only show the second image onwards from the Shopify backend.

Would someone be able to assist with this issue?

I am currently using the Dawn Theme 2.3.0

https://globalvirginhair.com/

Thanks, 

GVH

[KetanKumar]

@GVH 

sorry for that issue but how can i check i can't see multi product image any product 

[GVH]

Hi @KetanKumar , 

Thanks for responding. 

There are multiple product images on many of the items. The ones that only currently have one image, I will upload another onto. 

Is this something you can help me with?

[KetanKumar]

@GVH 

yes, please send product url 

[GVH]

Hi @KetanKumar 

here is one https://globalvirginhair.com/products/3-bundle-collection-deepwave , but it would be for all the products on the website. 

[KetanKumar · Accepted solution]

@GVH 

thanks for url, can you please  try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-main-product.css ->paste below code at the bottom of the file.

.product__media-item:first-child {display: none;}

[GVH]

Thanks! @KetanKumar 

[KetanKumar]

@GVH 

its my pleasure  to help us 

[AndreasFandango]

Is there a way to only show the first image and not the others?

[KetanKumar]

@AndreasFandango 

yes, please share store url so i will check and update

[AndreasFandango]

https://rumags.myshopify.com/

password 1234

want to remove the thumbnail under the photo or just remove all product photos except the first one.

[KetanKumar]

@AndreasFandango 

great thanks for share us yes, please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.product--small .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide:first-child {
    display: none !important; 
}

[AndreasFandango]

Thanks @KetanKumar . The code worked when I removed :first-child, but the arrows is still there. Is it easier if I change from thumbnail carousel to stacked?

[KetanKumar]

@AndreasFandango 

yes, please 

[AndreasFandango]

Thanks @KetanKumar . I have now changed to stacked. Do you have a code for me boss?

[AndreasFandango]

Do you have a new code for me after stacking the images instead of carousel thumbnail?

[KetanKumar]

@AndreasFandango 

oh sorry for late here yes its work

[heirlooms]

Hi Ketan, 

I have craft theme and this is not working. Could you please help me? 

[KetanKumar]

@heirlooms 

can you please share store url so i will check and let you know 

[heirlooms]

sure, it is heir-looms.myshopify.com

[heirlooms]

its, heir-looms.myshopify.com... do you think you can help me please? 

[KetanKumar]

@heirlooms 

oh sorry for late reply yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide:first-child {
    display: none !important;
}

[Witness]

Is there anyway to do this with the 2nd image?

[KetanKumar]

@Witness 

oh sorry for that issue can you please share store url so i will check and let you know 

[heirlooms]

You can hide the first two images. May I know why hide the second image?

[KetanKumar]

@heirlooms 

oh sorry for that issue can you please send store url so i will check and and let you know 

[thewavv]

hello! first of all thank you so much for all the people you help. i was wondering if you could help me accomplish this as well. i tried the code you suggested but it removed the main product image display box on my product page instead of the first thumbnail.

my url is http://thewavv.myshopify.com

thanks for any help you may be able to provide!

[Abudaud]

can you do it for IMPact Theme?

[crepscity]

Hi Ketan,

How can i do this for a *specific collection of products as i don’t want to show the first image for that 1 collection only cause the first image is for homepage display only. Im using Dawn Theme.

[KetanKumar]

@crepscity oh sorry for that issue 

if possible to share more details like store url collection name or url so i will check and let you know proper solution 

[crepscity]

Hi, 

store: https://crepscity.com/

collection to trigger: https://crepscity.com/collections/m-outfit

[KetanKumar]

@crepscity thanks for details  

i have checked your all products only 1 image i can't see multiped product image can you please show me 

[crepscity]

*Note this section is created on beae editor however, im sure we can still target the collection or products individually to hide the first image on the product page only, without targeting all products on my store.

[KetanKumar]

@crepscity Thanks bt i can't see 

i think you have provide wrong url please give me your testing theme url

[crepscity]

You can observe the testing theme/products with the links i have shared above. I will add the multiple product images later in the testing products once the first image is removed.

Hope you understand.

[KetanKumar]

@crepscity without url i can't see code but can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-main-product.css ->paste below code at the bottom of the file.

.product__media-item:first-child {display: none;}

[crepscity]

I have shared the url: crepscity.com

The code you said to try semi-worked but it hid every first image product from my hole store. I want to target that 1 collection only?

[KetanKumar]

@crepscity yes i have try but it can be done some customization code

[crepscity]

so, can you provide me some code ?

[KetanKumar]

@crepscity if possible to add me staff account so  i will try to code draft theme and let you know 

[crepscity]

I need your email to add you as staff and what store permissions do you need access to?

Or you can request?

[KetanKumar]

@crepscity yes please here 

Email: bamaniyaketan.sky@gmail.com
i need only theme code access no more 

[crepscity]

I invited you.

[KetanKumar]

@crepscity thanks 

i have copy of live theme and test code for new theme see the attach 

[crepscity]

i dont understand, i dont see any changes ?

[crepscity]

Hi, I added this code below on main-product-liquid which targets the relevant product image that has the alt text 'hide-on-product-page' and after inserting the alt it worked and hid the product image on product page. Hovever, now i want to hide that specific image on the collection page also, but im not sure how. 

<script>
document.addEventListener('DOMContentLoaded', function() {
// Find all images on the product page
var images = document.querySelectorAll('.product__media-item img');

// Loop through the images and hide the one with the specific alt text
images.forEach(function(image) {
if (image.alt === 'hide-on-product-page') {
image.closest('.product__media-item').style.display = 'none';
}
});
});
</script>

[crepscity]

Hi there, i was able to add code and hide the first image only with the product images that has the alt text 'hide-on-product-page' 

Now when i add to cart, the first image that is hidden shows on the cart page? How can i hide the first image on cart page also?

Thank you in advance.