Shopify themes, liquid, logos, and UX
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
Thanks,
GVH
Solved! Go to the solution
This is an accepted solution.
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;}
sorry for that issue but how can i check i can't see multi product image any product
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?
yes, please send product url
Hi @KetanKumar
here is one https://globalvirginhair.com/products/3-bundle-collection-deepwave , but it would be for all the products on the website.
This is an accepted solution.
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;}
its my pleasure to help us
Is there a way to only show the first image and not the others?
yes, please share store url so i will check and update
password 1234
want to remove the thumbnail under the photo or just remove all product photos except the first one.
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;
}
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?
yes, please
Thanks @KetanKumar . I have now changed to stacked. Do you have a code for me boss?
Do you have a new code for me after stacking the images instead of carousel thumbnail?
oh sorry for late here yes its work
Hi Ketan,
I have craft theme and this is not working. Could you please help me?
can you please share store url so i will check and let you know
sure, it is heir-looms.myshopify.com
its, heir-looms.myshopify.com... do you think you can help me please?
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;
}
Is there anyway to do this with the 2nd image?
oh sorry for that issue can you please share store url so i will check and let you know
oh sorry for that issue can you please send store url so i will check and and let you know
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!
can you do it for IMPact Theme?
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.
@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 thanks for details
i have checked your all products only 1 image i can't see multiped product image can you please show me
*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.
@crepscity Thanks bt i can't see
i think you have provide wrong url please give me your testing theme url
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.
@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;}
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?
@crepscity yes i have try but it can be done some customization code
so, can you provide me some code ?
@crepscity if possible to add me staff account so i will try to code draft theme and let you know
I need your email to add you as staff and what store permissions do you need access to?
Or you can request?
@crepscity yes please here
Email: bamaniyaketan.sky@gmail.com
i need only theme code access no more
I invited you.
@crepscity thanks
i have copy of live theme and test code for new theme see the attach
i dont understand, i dont see any changes ?
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>
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.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024