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

[GetClickt]

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:

Required State:

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!

[KetanKumar]

@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;
}

[GetClickt]

@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]

@GetClickt yes it can be done customization code

[GetClickt · 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]

@GetClickt 

wow that would be great thanks for update

[ejunkins]

Hi, 

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

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

[KetanKumar]

@ejunkins 

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