How do I add a GIF to my product page?

Solved
Tourist
4 0 2

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.

2 Likes

Success.

Astronaut
1003 129 235

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

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
2 Likes

Success.

Shopify Staff
Shopify Staff
847 46 144

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

Peter | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 

To learn more visit the Shopify Help Center or the Shopify Blog

3 Likes
New Member
1 0 0

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?

0 Likes
Astronaut
1003 129 235

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

 

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
3 Likes
New Member
2 0 0

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 

0 Likes
Astronaut
1003 129 235

@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. 

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
New Member
1 0 1

Hello,

 

I can't add GIF to my product description page. I have tried uploading the GIF as a file but Shopify keeps saying it's corrupt.
I also tried uploading it on Giphy and embedding the link but the GIF is clickable and would end up taking people off the page. Can anyone help me, please?

1 Like
New Member
1 0 0

I also want to upload a gif animation, but it doesn't work with me either. I also notice that the file is corrupt. I had the gif animation made especially for the website.

0 Likes
Tourist
3 0 0

Thank you For the answer Peter, however when embeded, it is definately shown oversized in the mobile view!

 

How can we fix this? 

PS: I use giphy

 

Regards,

0 Likes