Can I use animated icons as product images?
-
Hi, I would like to use animated icons in Giff or SVG format as product images. Is this possible. When I try the giff file, it doesn’t work. Before I purchase SVG animated icons I would like to know whether I can use them on my site.
Thanks for the help.
Suzana
-
Hi @suzana75
Thanks for reaching out!
I understand that you would like to know if it is possible to use
GIFForSVGfiles as product images on your site.I tested one GIF file on my product and it is working on my end as seen here: https://somup.com/c36YntvYkA
When I try the giff file, it doesn’t work.
Can you please provide further details on the error you encountered here so that we could address you more effectively?
If a screenshot would be helpful, I’d recommend using https://snipboard.io or https://skitch.com/. You can share the direct link to the image as a response to this topic.
Meanwhile, I found these related forum threads for your reference as well:
– Animated GIFs don’t always work in Shop thumbnails
– Resized animated GIFsBefore I purchase SVG animated icons I would like to know whether I can use them on my site.
As of now, WordPress does not support
SVGformats yet.
Image Link: https://snipboard.io/MGUv65.jpg
You can use the free SVG Support plugin to upload SVG files to your Media Library and use them like any other images.
You can also check this Github thread about Using SVG as thumbnail in product category for your reference.
Hope this helps!
Hi @suzana75
Thanks for your confiramtion that the error still persists even with the default Storefront theme and only WooCommerce plugin is enabled.
I checked your site and found that the images on the shop and single product pages are different images as seen below:
Shop page:
Image Link: https://snipboard.io/UszrdP.jpg
Image:
Image Link: https://www.paradisoperduto.org/wp-content/uploads/2022/10/bank-1-324×324.gif
Single Product Page:
Image Link: https://snipboard.io/nwGfkU.jpg
Image:
Image Link: https://www.paradisoperduto.org/wp-content/uploads/2022/10/bank-1.gif
I saved a copy of animating GIF image on my end and uploaded it to my test site and it is working on my end successfully both on the Shop and Single Product pages.
I have made a video recording for your reference here: https://somup.com/c36Oe4vuxt
Can you please share how did you add the product image to your site?
Meanwhile, can you please try to upload the animating GIF image by going to Products > Edit > Product Image > Set Product Image and see if this works?
Image Link: https://snipboard.io/6zcmiB.jpg
Let us know how it goes!
Hi there @suzana75 ??
I uploaded again the same image but it still doesn’t work. Please note that I just want to change the display on the shop page i.e. the animation should start on hover and not like in your test where the animation on both the shop page and the single product page is always running. At the moment the animation on the single product page starts on hover and I am happy with that.
Thanks for reaching back about this. I understand what is missing is to enable SVG animation on hover.
I suggest you look into resources like this video, or web search results for
animate svg on hover, as this falls outside the scope of support provided here. Here’s a link to our support policy.Regarding the media settings, feel free to uncheck the “crop” setting, for the thumbnail size, and customize the rest of the dimensions to your needs. Side note:
SVGfiles are actual code, therefore setting a custom ratio for all media would be best; the currently selected uncropped might not do them justice.I trust that points you in the right direction, but if you have more questions, let us know. We’re happy to help.
- The topic ‘Can I use animated icons as product images?’ is closed to new replies.
