If you are trying to figure out how to add gif to Shopify product page then you are probably seeing the Shopify error saying that your file is corrupt and you are unable to upload it.
This drove me crazy and even though I was able to repair the gif file it only worked every now and again. I finally figured out a perfect solution that always works. It is a bit cumbersome but once you get it set up it is an easy process.
Using animated gifs on your Shopify product pages is a great strategy. This works particularly well for problem solving products because you can place short animations into your product copy to quickly illustrate how a product works.
What is an animated Gig and why use it in Shopify?
An animated Gif is an image file that contains a sequences of images compiled into a single file. You can think of it as a video clip but it behaves like an image.
You do not need a video player to view it and you do not have any controls to start or stop it.
These are important points because if you embed a Gif image into your Shopify product page, your customers can not help but see the clip.
Gifs have an incredibly high engagement rate. Unlike video where someone has to click play and wait for the video to load, this is immediate.
One Gif image can tell an entire story and illustrate your entire product’s benefits in just a few seconds.
People are lazy and tend to only skim over text. They will easily miss important benefits of your product if you rely on text and/or images alone.
With Gifs you can make sure people see the best features of your product immediately.
Making a Gif and Adding It To Your Shopify Product Page – Step-by-Step
I’ve split this up into 2 parts. The first part is creating the Gif file and making sure you get the file size down as low as possible. This will compress the Gif which will ensure it does not cause too much lag on your product page.
The second part is uploading the gif file to your Shopify product page. I will also show you how to deal with the “Corrupt file” error that Shopify tends to show when you try and upload the compressed gif.
Part 1: Creating The Gif file
To start off you will need a video clip. You can use your favorite video editor like After Effects or Animoto. I suggest you cut the clip to be as short as possible. Eventually we want our Gif image to be as small as possible in terms of file size.
Step #1:
Now that you have your short video clip in MP4 format, head over to a website called EZgif.com.
Click on Video to Gif and upload your video clip. This will take a few minutes to upload.
Once the video has uploaded scroll down and click on Create Gif. For now you do not have to mess around with any settings.
Step #2:
You can now see the gif preview. It will be in the original dimensions of your video. We need to trim it down to make sure there’s no blank spaces as that will waste valuable file size.
Click on Crop and drag the minimum area you want to show in your Gif frame. Cut out everything that is not absolutely necessary.
Then, click on Crop Image!
Step #3:
Our gif is now starting to take shape. At this point we want to start looking at both the image size and the file size.
In our case, the Gif is 410 x 329 px which is adequate. I would recommend you stick to a width below 500 px otherwise the gif just gets too big. The problem with our Gif at the moment is that it is 11.03MB.
That is WAY too big.
Step #4:
We need to drastically reduce the size of the Gif. To do that, click on Optimize and select “Lossy Gif” for Optimization method.
You will need to play around with the compression level.
It is a balance between image quality and file size.
If I set the compression level to 200 then my file size drops down all the way to 4.16MB.
Step #5:
Even though 4.16MB is much better than 11MB it is still too high. I want it even lower. The next thing you can do is to remove some of the frames.
The animation does not have to be as smooth as a video.
To do this, click on Optimize again and for Optimization Method, select “Remove every 3rd frame”. You can of course play around with this to get the best results.
This reduces our Gif image down to just 2.9MB.
Step #6:
Now that we’ve removed some frames the animation is very fast. We need to fix that. The way to do it is to adjust the frame rate.
Click on Speed and select about 60% of current speed. This looks fine.
Click on Save.
This will download the gif to your computer.
Part 2: Inserting The Gif File Into Shopify Product Page
Step #1:
Go to your Shopify product page where you want to insert the gif animation in your product copy.
Side note:
Do not try and insert the gif into your “normal” product images. You want to add it into your product description field.
When you click on Insert Image (like you would for any other image) you will be taken to Shopify’s standard image uploading interface
When you upload the Gif file you just created Shopify will most likely give you the following error message:
“The uploaded image is corrupt and cannot be processed. Please try a different image.”
Step #2:
We can try and edit our gif but to be honest, it is not worth the effort. After banging my head over this for days I found the BEST solution.
If you host your Gif image outside of Shopify then it solves all the problems. Trying to upload your gif images to Shopify simply does not work.
The solution:
Host your Gif image on any cloud server!. You do not have to host your images on Shopify. I prefer Amazon S3 because I’ve been using it since forever but yu can use anything – you can even host it on your Google Drive.
Step #3:
Upload your gif image on your favourite cloud server and grab the image URL.
Step #4:
In Shopify, follow the same steps as before to upload your image but this time, instead of trying to upload the image, select URL and Paste image URL.
The gif image should now show on your Shopify product page immediately. You can save it and do a preview to make sure it looks good.
The gif was inserted perfectly without any issues at all. No Corrupt image warnings from Shopify either.
A Couple of Things to Consider When Using Gif Images in Shopify
You want to use animated gif images sparingly. They are large files by nature and even if you do your compression really well, they will stil slow down your store.
As we know, slower load speeds do affect conversion rates.
There is always a trade-off between image quality and image size. Remember that the majority of users will be viewing your store on a mobile device which is a small screen.
Do not be afraid to scale your gifs down and sacrifice quality for speed. Our gif example could probably have been scaled down smaller and we could have worked on it a bit more to get the file size under 2MB.
If you are struggling to get your file size down, consider splitting the gif into 2 or even 3 seperate gif files. You can spread them apart in your product pages.
This can help make your product page more interesting and you can even build your entire store around the gif files.
Avoid using animated gif files unless it is absolutely necessary to illustrate a product’s features or benefits.
Avoid using large animated gifs as fancy slideshows or just for the sake of looking good. It may look good but it will slow your store down.
Avoid using animated gifts for your actual product pages. The Shopify product image sliders do not cope well with gifs. Stick to placing it in your product descriptions.
