Different Product Thumbnails

daria77
Tourist
4 0 0

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!

0 Likes
Ninthony
Shopify Partner
1973 296 782

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. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
daria77
Tourist
4 0 0

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!!

0 Likes
Ninthony
Shopify Partner
1973 296 782

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

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
daria77
Tourist
4 0 0

 

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

0 Likes
Ninthony
Shopify Partner
1973 296 782

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:

Ninthony_0-1625763543901.png


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 %}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Ninthony
Shopify Partner
1973 296 782

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:

Ninthony_0-1625764120946.png

 

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

//thumbnail code

{% endunless %}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
daria77
Tourist
4 0 0

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? Screen Shot 2021-07-08 at 1.15.10 PM.png

0 Likes
Ninthony
Shopify Partner
1973 296 782

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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes