A user reported that product images fail to display on product detail pages (PDPs), while homepage and collection pages work correctly. The issue was traced to CSS code hiding the images.
Initial Solution:
Two responders identified that .is--media-hide CSS rules were preventing image display. They recommended either removing the hiding code or overriding it with display: block !important; in the bee-base.css file.
Follow-up Issue:
After implementing the fix, images appeared but with incorrect spacing/layout. A CSS adjustment using .bee-g-0 gutter spacing was provided to address this.
Current Status:
The user now wants to modify the image carousel behavior—displaying only one image at a time in the right column that updates when selecting thumbnails from the left column. One responder has requested store access to review the theme code and implement this customization.
The discussion remains ongoing as the desired carousel functionality has not yet been implemented.
Hi there!
Our product images on all our product pages are not showing for some reason. The homepage and collection pages are showing perfectly but when we click on the product, the information loads on the product page but not the product images.
Grateful for any help, thank you!
This is my URL shop:
@Bowtie It is because the images are hidden with CSS, we need to remove it to make visible. Please follow below steps to make visible the images in PDP page. Let us know whether it is helpful for you.
Go to “Online Store” → “Themes”.
Click the action button from the current theme and select “Edit code”.
Search file like base.css or bee-base.css and find the below code and remove it from the file.
Code to remove:
.bee-carousel__nav-item.is–media-hide, .bee-product__media-item.is–media-hide {
display: none;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
Hello @Bowtie
Go to online store ----> themes ----> actions ----> edit code ---->bee-base.css
add this code at the end of the file and save.
.bee-product__media-item.is--media-hide {
display: block !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Thank you for helping. It’s working but I’ve a new trouble when image is showed up.
Can you know how to solve this.
Go to online store ----> themes ----> actions ----> edit code ---->bee-base.css
add this code at the end of the file and save.
.bee-g-0 {
--ts-gutter-y: 1.5rem !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Thank you for your help. I don’t want to display all the images in the carousel. In the right column, I only want to show one image at a time from the left column. When I select an image in the left column, it should appear in the right column.
@Bowtie It seems that some code changes were made regarding the product image display. To resolve this, we’ll need to review your theme’s code. If you’re comfortable with it, could you please provide access to your store so we can investigate and fix the issue for you?
