How can I start a GIF animation on hover?

Store Design
1

Hi! I was wondering if anyone knows the code to make the gif start after you hover? The gif has a static image (the first image of the gif) and then once its hovered it starts. Hope someone can help me thanks!!

1 Like
2

Hi Anabell,

Thanks for your answer. I already have the GIF in my store, would you be so king to provide the code and where to put it to achieve this effect? Thank you for your time

3

Hi @muse21

Please share your website so we can provide the code appropriate for you

4

You will need 2 images: 1 static and 1 GIF. On hover, we will hide the static and show the GIF version. Please refer to this code snippet to learn how

https://codepen.io/QDeltaE/pen/VWGYOB

1 Like
5

Thank you so much!! Could you please tell me where should I put the code? Sorry I’m very new to shopify and still getting the hang of everything :slightly_smiling_face:

6

It really depends on your theme and can not be done easily. I’m sorry but if you are not comfortable with coding then I think you need to hire someone to do the task.

7

The theme is DAWN, I am familiar with code but not so much with liquid. Hiring is not a possibility for me now :disappointed_face: I’ll try to figure it out. Thanks anyways!

1 Like
8

Thanks Ribe the theme is DAWN and this is the website https://d29e31-2.myshopify.com/

9

Liquid is very easy. You can learn basic here

https://shopify.github.io/liquid/

Hope you the best!

1 Like