How do I add a GIF to my product page?

Solved
Tourist
4 0 1

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.

1 Like

Success.

Astronaut
835 95 178

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
1 Like

Success.

Shopify Staff
Shopify Staff
698 36 99

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

2 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
Highlighted
Astronaut
835 95 178

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
2 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
835 95 178

@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