How do I add a GIF to my product page?

[Rach434]

I tried uploading a GIF by clicking "insert image" but it failed. I wanted to try adding it via video, but I didn't have an embed code, just the gif file saved on my computer.

[Ninthony · Accepted solution]

You can upload the gif in the shopify admin in the bottom left by clicking settings, it will bring you to a new page and you'll want to click on "Files". Once you upload, it'll provide you with a link which you can add as the src attribute in an <img> tag. Given that you tried to upload it already, I assume you're using something that comes with your theme in the customize section. In which case they may not allow gif uploads, so you would have to do it manually and then insert it with some HTML

[Peter · Accepted solution]

Hey, Rach434!

Peter here from Shopify Support!

If you're hoping to include a GIF in your product descriptions then the best way to go about this would be by embedding the GIF into the page. In this case, what you'll want to do is head on over to Giphy.com, select upload in the top right corner, and follow the prompts. Once uploaded, the website will give you an embed code which you can then use within the rich text editor of your product page. 

If there's anything else I can help with please don't hesitate to reply back and I'll happily help out!

All the best,

Peter 
Shopify Support

[SE]

I have a question Peter :)

I Embedded my giphy code into the rich text, but whenever I click on it (on my website), it redirects me to GIPHY.

How do I stop that from happening?

[Ninthony]

I don't believe there is a way to not link it to giphy. Just upload it to your cdn and put the url it give you inside an image tag.

 Go to Settings in the bottom left of the Shopify Admin. Then go to Files. Then in the top right you should see Upload Files. Just upload your file there, it will provide you a url, then place this in your code where you want the gif to show up. The src should be the url you are provided on upload:

<img src="https://cdn.shopify.com/s/files/1/0016/3387/8103/files/sweating.gif?1601">

[weareallone]

Hey, the gif image which i use in my product page is not optimizing well on mobile device.. its oversized

Is there any way how i can fix that, so it fits both desktop and mobile ?? 

Thanks in advance 

[Ninthony]

@weareallone could you show us your page with your gif so that we can take a look? I don't exactly know what you mean by oversized.