How can I set a unique thumbnail image for my products?

[daria77]

Hi - how can I put an image as my product thumbnail but then not include that image when you actually click on the product? There is an overlay I want to do on the thumbnails to match my store page but I don't want the overlay to show up on the actual product page images.

Thank you!

[Ninthony]

What is the overlay going to be? It would be better to do this with code rather than upload a separate image with an overlay. 

[daria77]

I don't have the image yet, but it's going to be a drawing (so not just solid color). Could you tell me where I can find the code and what I would have to change? Thanks!!

[Ninthony]

Are they all going to be different relative to the product you're on? Or is it the same thing every time?

What theme are you using? Also, could you provide a store URL and password if password protected -- Online Store > Preferences > Password Protection

[daria77]

I'm using Debut. I'd prefer different overlays on the products but I could also manage with using the same one.

shop: revewood.myshopify.com

password: bliltu

[Ninthony]

Well one way you can do this is to give your thumbnail photo you want to use some unique alt text. Let's say for instance you just set the alt text to be "productThumbnail". In product-grid-item.liquid in your snippets folder, at around line 18 the preview image gets assigned. You could loop through the product images right after that, check if their alt text has "productThumbnail" and assign that image to the variable instead. So it would look like this:

And here's the code if you want to copy and paste:

  {% for image in product.images %}
    {% if image.alt == 'productThumbnail' %}
      {%- assign preview_image = image -%}
    {% endif %}
  {% endfor %}

[Ninthony]

Oops, also forgot to mention you need to make an unless statement on the product-template.liquid file in your sections folder at around line 87:

{% unless media.alt contains "productThumbnail" %}

//thumbnail code

{% endunless %}

[daria77]

So close - I did both of those, the only issue is that now the thumbnail for all of the products is the same. Is there any way to make it different based on the product? 

[Ninthony]

So what happened is you replaced the original preview_image variable. You need to leave that as it was, and use your forloop after it so that if it has a preview with that alt text it'll replace the preview image, but otherwise it should be a normal thumbnail. Look at my initial screenshot, it should be exactly like that with the assignment occurring twice.