Key takeaways
- Shopify supports GIF upload in product media, page content, and Theme Editor image blocks.
- GIFs autoplay automatically wherever they’re embedded.
- Compress GIFs before uploading - uncompressed GIFs can be very large. Use ezgif.com.
- For hero sections and large displays, an MP4 video is usually the better choice for performance.
GIFs are a quick way to show a product in motion, demonstrate a feature, or add a subtle animated accent to your store. Shopify supports them natively - here’s where and how to use them.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.
How to add a GIF to a product page
Step 1. Go to Products > select your product > scroll to the Media section.
Step 2. Click Add media and upload your GIF file.
Step 3. The GIF appears in the product gallery alongside your static images. When customers click on it, it plays in the full-size lightbox.
Step 4. Drag to reorder if needed. Save.
The GIF will autoplay in the gallery thumbnail and full view. There’s no play button or pause control - it loops continuously.
How to add a GIF to a Shopify page or blog post
Step 1. Go to Online Store > Pages (or Blog posts) and open the page you want to edit.
Step 2. In the rich text editor, click the Insert image button (the photo icon in the toolbar).
Step 3. Upload your GIF or select it from the file library.
Step 4. The GIF is inserted inline in the content and will autoplay when the page loads.
How to add a GIF via the Theme Editor
In the Theme Editor, wherever you see an Image block or section, you can upload a GIF just as you would a static image.
Step 1. Go to Online Store > Themes > Customize.
Step 2. Click the section or block where you want the GIF.
Step 3. In the image selector, upload your GIF or choose it from your files.
Step 4. Save.
The GIF will autoplay in that position on the storefront.
GIF file size - why it matters
GIFs are notoriously large files. A 5-second animation at 800px wide can easily exceed 10MB if uncompressed. Large GIFs cause:
- Slow page load times
- Poor Core Web Vitals scores
- High mobile data usage for customers
Always compress GIFs before uploading. Use ezgif.com - it’s free, requires no account, and lets you reduce colours, resize, and cut frames to dramatically reduce file size. Aim for under 2MB for any GIF you use in a product gallery or page content, and under 500KB for small inline GIFs.
GIF vs MP4 for animated content
For large animated areas - hero backgrounds, full-width banner animations, product demos that run more than 3 seconds - MP4 video is almost always the better choice.
A 5-second looping video clip in MP4 format is typically 80-90% smaller than the equivalent GIF, loads faster, and looks sharper. MP4 also supports sound and runs more smoothly on mobile.
Use GIFs when:
- You need a small, simple animated icon or badge
- You’re adding animation to a rich text content area (no video option)
- The animation is simple enough that GIF compression works well (2 colours, limited motion)
Use MP4 when:
- The animation is longer than 2-3 seconds
- You need it in a hero, banner, or full-width section
- File size or load speed is a concern
Hosting GIFs externally
Shopify’s file storage is generous but not unlimited. If you’re using many GIFs, you can host them externally (e.g., on Giphy, Cloudinary, or your own CDN) and embed them using their URL.
In the Theme Editor’s image blocks, this typically requires code to embed a URL-based image rather than using the standard file picker. Describe this to Fudge if you need it.
