Hi there,
How do i set the product slider/featured collection as default or hide each mini product images on the product page as these mini products are for homepage display only, and the image background is set as white therefore, i dont want any of the mini products displaying for there own product page when a customer clicks any of the mini products as i already have images for them and set to the original product image background ‘grey’. I have shared my mini product slider that i created with Beae editor 2.0 and i have another website that was able implement this.
To further cement, i want to hide this specific product image on the product page as this image is for homepage display only and i already have the original images for that said product.
I added this code below and it hid the first image on the product page on my site however, i only want to hide the first product image for that section of products only?
.product__media-item:first-child {display: none;}
Shopify assigns a unique ID to each section, which allows you to hide the first image on a product page by applying CSS like:
#sction-id .product__media-item:first-child { display: none; }
This will hide the first image only within that particular section.
Additionally, if you’re familiar with Shopify templates, you can add a specific class to the product section, such as class=“{{ product.title | downcase | replace: ’ ', ‘_’ }}”, and then target this class in your CSS to style just that specific product section.
I hope this helps! If you need further assistance, feel free to share your store URL.
Hi, thank you for your reply. I need further assistance. \
URL: crepscity.com
Collection to target: https://crepscity.com/collections/m-outfit
*NOTE - What ever products i put in this collection, i want the first image to not show on the product page page.
*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.
Hi @crepscity
You can hide the first image of a product by using a tag, follow these steps:
-
Tag Your Product:
Add the tag “hide_first_image” to the product where you want the first image to be hidden.
-
Update the Liquid File:
In the Theme Editor, open the main-product.liquid file and locate this line:
Replace it with:
- Add CSS:
Include the following CSS in your base.css file:
.hide-first-image .product__media-item:first-child {
display: none;
}
This approach will hide the first image of any product tagged with “hide_first_image.”
If this solution resolves your issue, please mark it as solution!
1 Like
Hi, thank you for your reply. 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.
