Solved

Hiding Product Thumbnail from Gallery on Product Page (Slick Slide)

GetClickt
Shopify Partner
9 1 8


Unfortunately, unlike 99.99% of Shopfronts, Shopify does not allow you to upload a specific image to be a collection page thumbnail, a specific image to be a banner, a specific image to be a product image etc - and hide them from the product page gallery. (WHY???)

I'm using Slick Slide on my product page to show Product Images - with other images in the thumbnail gallery. As I can't hide the collection thumbnail via Shopify's settings, I need to hide it via code. What I therefore need to do then, is load the second image - and hide the thumbnail of the first.

Current State:
Dave_Product1.PNG

 

 

 

 

 

 

 

 

 

 

 

Required State:

Dave_Product2.PNG

What's the best way to do this? Is there a custom script I can use to do this, or is this better handled via custom CSS? I think I can use a script to append a class to each image 'product_thumbnail_(nth)' and then display:none, and for each n after 0, display:block - but I'm sure there's a more elegant method. 

Any help would be most appreciated.

Page: https://studio52-magic.myshopify.com/products/dave-is-the-best-wristband
P: ShopifyHelp1

Thanks!

Accepted Solution (1)
GetClickt
Shopify Partner
9 1 8

This is an accepted solution.

@KetanKumar Thanks again. I've worked this one out by doing exactly what @Shopify  should have built from the start - the ability to define a product thumbnail for collection pages separately to images uploaded for the product. 

I created a Product Metafield for each product, then altered the custom product-item-grid.liquid file to pull the image uploaded to that metafield for each product, in place of the product image field.

Replacing product.featured_image.src with product.metafields.collectionthumbs.imageurl.value

 

Old:

 

 

<div class="boximages">

      <a href="{{ product.url | within: collection }}" class="engoj_find_img">
        <img style="width: 100%" src="{{ product.featured_image.src | img_url: 'master' }}" class="img-responsive imgproduct" alt="{{ product.featured_image.alt | escape }}">
        {% for image in product.images %}
        {% if forloop.last %}
        <img style="width: 100%" src="{{ image.src | product_img_url: 'master' }}" class="img-responsive absolute img-product-hover imgproduct" alt="{{ product.featured_image.alt | escape }}">
        {% endif %}
        {% endfor %}
      </a>

    </div>

 

 


New: 

 

 

<div class="boximages">

      <a href="{{ product.url | within: collection }}" class="engoj_find_img">
        <img style="width: 100%" src="{{ product.metafields.collectionthumbs.imageurl.value | img_url: 'master' }}" class="img-responsive imgproduct" alt="{{ product.featured_image.alt | escape }}">
        {% for image in product.images %}
        {% if forloop.last %}
        <img style="width: 100%" src="{{ image.src | product_img_url: 'master' }}" class="img-responsive absolute img-product-hover imgproduct" alt="{{ product.featured_image.alt | escape }}">
        {% endif %}
        {% endfor %}
      </a>

    </div>

 

 

 

At the moment I've retained the loop that allows the last image uploaded to the product page to be the ALT image on hover, however I may end up replacing this with a metafield alternative as well. This does mean I upload each image to the FILES section and then set it in the product metafield, rather than the original solution of hiding the featured_image from the product page - but what I do like about it is that there's no shudder to reshuffle images while the css loads. 

View solution in original post

Replies 7 (7)

KetanKumar
Shopify Partner
36855 3637 11978

@GetClickt 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.js_prod_sub .slick-track .engoj_img_variant:first-child {
    display: none;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GetClickt
Shopify Partner
9 1 8

@KetanKumar @ Thanks for that, but the hiding the thumbnail part I pretty much had handled - it was the combination of hiding the thumbnail and making the second thumbnail active in the slider that I'm struggling with. Your solution works to hide the thumbnail, but still keeps that image as the main image. How do I make the second thumbnail the active one in the slider?

Essentially I'm trying to get the Product Page to completely ignore the image that is used on the Collection Page. As @Shopify doesn't provide the 'Hide from Product Page' feature on the collection page thumbnail that other, more competent eCommerce platforms do, I'm stuck with creating workarounds. 

Thanks again for your help!

KetanKumar
Shopify Partner
36855 3637 11978

@GetClickt yes it can be done customization code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GetClickt
Shopify Partner
9 1 8

This is an accepted solution.

@KetanKumar Thanks again. I've worked this one out by doing exactly what @Shopify  should have built from the start - the ability to define a product thumbnail for collection pages separately to images uploaded for the product. 

I created a Product Metafield for each product, then altered the custom product-item-grid.liquid file to pull the image uploaded to that metafield for each product, in place of the product image field.

Replacing product.featured_image.src with product.metafields.collectionthumbs.imageurl.value

 

Old:

 

 

<div class="boximages">

      <a href="{{ product.url | within: collection }}" class="engoj_find_img">
        <img style="width: 100%" src="{{ product.featured_image.src | img_url: 'master' }}" class="img-responsive imgproduct" alt="{{ product.featured_image.alt | escape }}">
        {% for image in product.images %}
        {% if forloop.last %}
        <img style="width: 100%" src="{{ image.src | product_img_url: 'master' }}" class="img-responsive absolute img-product-hover imgproduct" alt="{{ product.featured_image.alt | escape }}">
        {% endif %}
        {% endfor %}
      </a>

    </div>

 

 


New: 

 

 

<div class="boximages">

      <a href="{{ product.url | within: collection }}" class="engoj_find_img">
        <img style="width: 100%" src="{{ product.metafields.collectionthumbs.imageurl.value | img_url: 'master' }}" class="img-responsive imgproduct" alt="{{ product.featured_image.alt | escape }}">
        {% for image in product.images %}
        {% if forloop.last %}
        <img style="width: 100%" src="{{ image.src | product_img_url: 'master' }}" class="img-responsive absolute img-product-hover imgproduct" alt="{{ product.featured_image.alt | escape }}">
        {% endif %}
        {% endfor %}
      </a>

    </div>

 

 

 

At the moment I've retained the loop that allows the last image uploaded to the product page to be the ALT image on hover, however I may end up replacing this with a metafield alternative as well. This does mean I upload each image to the FILES section and then set it in the product metafield, rather than the original solution of hiding the featured_image from the product page - but what I do like about it is that there's no shudder to reshuffle images while the css loads. 

KetanKumar
Shopify Partner
36855 3637 11978

@GetClickt 

wow that would be great thanks for update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ejunkins
Visitor
2 0 1

Hi, 

 

Can you tell me how I can hide the 2nd photo on my product page?

https://wildenergyco.com/products/wild-energy-meters

KetanKumar
Shopify Partner
36855 3637 11978

@ejunkins 

yes sure i can do but current only 1 product image can you please add and let me know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing