FROM CACHE - en_header

How do I add a GIF to my product page?

Solved
Rach434
Tourist
4 0 3

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.

Accepted Solutions (2)

Accepted Solutions
Ninthony
Shopify Partner
2272 342 944

This is an 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

If my solution helped you, please like it and accept it as the solution!
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 😄

View solution in original post

Trevor
Community Moderator
Community Moderator
3223 436 751

This is an accepted solution.

Hey, Rach434!

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!

Trevor | Community Moderator @ Shopify (Out of Office until Sept 7th)
 - 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

View solution in original post

Replies 21 (21)
Ninthony
Shopify Partner
2272 342 944

This is an 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

If my solution helped you, please like it and accept it as the solution!
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 😄
Trevor
Community Moderator
Community Moderator
3223 436 751

This is an accepted solution.

Hey, Rach434!

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!

Trevor | Community Moderator @ Shopify (Out of Office until Sept 7th)
 - 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

SE
New Member
1 0 1

I have a question 🙂

 

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
Shopify Partner
2272 342 944

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 my solution helped you, please like it and accept it as the solution!
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 😄
weareallone
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 

Ninthony
Shopify Partner
2272 342 944

@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 my solution helped you, please like it and accept it as the solution!
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 😄
chuka007
New Member
1 0 3

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?

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

hemrey
Tourist
4 0 0

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

 

How can we fix this? 

PS: I use giphy

 

Regards,

Trevor
Community Moderator
Community Moderator
3223 436 751

Hey, everyone!

 

If you find issues with embedding a gif (i.e. sizing issues, it redirects incorrect, etc.), then you would want to reach out to a Shopify Expert or create a new thread here on the Community Forums to seek further assistance. Shopify is unable to provide troubleshooting support on third-party coding; however, creating a new thread will increase your chances of this issue being seen by someone in our Community that may be able to assist you. 

Trevor | Community Moderator @ Shopify (Out of Office until Sept 7th)
 - 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

KennyB
Tourist
5 0 1

 I did just this and my GIFs for some reason are too wide on mobile so it gets cut off. How do I get the entire GIF picture to fit in the center of the screen?

JB199113
New Member
1 0 5

https://www.youtube.com/watch?v=_epwy9Y1A3U 

 

I was desperately searching for the solution. I found this video on Youtube. This guy explains it very well! Thanks to him I am finally capable of adding GIFs, if the GIF is too big on mobile devices go for ´´Small´´ and not regular link. The link still has to ends with .gif

 

Hopefully it is going to help you all 🙂

hemrey
Tourist
4 0 0
Very helpful video, thank you!!!


Michelle717
New Member
1 0 0

Hi~I tried to add gif to the product description and it didn't work so I searched the help centre and found 2 possible solutions which is via setting upload file  ( which it failed.) and second solution was to go to Giphy and upload the file then get the embed code then edit on the rich text of the product page yet again it didn't work. Would love to have more in-depth help please!

Scomincer
New Member
1 0 0

Glad there was a video 

grupozetashop
New Member
1 0 0

Con la página giphy.com he conseguido hacerlo, lo recomiendo. Solo tienes que abrirte una cuenta en ésta página y crear tu gif y después lo puedes insertar como imagen en la página de artículo en shopify con la URL que te facilitan en giphy. Espero que les sirva de ayuda. Saludos.

 

pd: probé de diversas formas dentro de la app de shopify pero no pude, me daba error, insertando en la página de artículo, añadiendo archivo en la página de contros...etc.

SolarLightHub
New Member
2 0 0

This video explained the issue and fixed forwarding your customers to giphy, WITHOUT having to hire a shopify expert. thankyou!! 

tatianaurben
New Member
1 0 0

What if I wanted to add a link to the gif (when the person clicks on the gif it redirects them to a website page)? Thank you, that was really helpful!

Ninthony
Shopify Partner
2272 342 944

Just add an anchor tag around the image:

<a href="https://www.google.com">
  <img src="/path-to-your-image.gif" />
</a>

 

If my solution helped you, please like it and accept it as the solution!
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 😄