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.
Related: Speed Up a Shopify Theme.
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:
Related: Update a Product Description in Shopify.
Related: Lazy Load Videos in Shopify.
Related: Add Video to a Shopify Product Gallery.
Related: Add Animated Content in Shopify.
- 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.
FAQ
Shopify's general image limit is 20MB per file, and GIFs follow the same limit. Practical limit is much lower - anything over 5MB will visibly hurt page load speed. Aim for under 2MB for product gallery GIFs, under 500KB for small inline ones.
Almost always a file format or theme issue: (1) the file was uploaded as a single-frame GIF (no actual animation in it), (2) Shopify's image processor flattened it - upload via the Files section instead of the rich text editor and reference the URL, or (3) your theme's lazy-loading is intercepting the GIF.
Yes. In the product editor's Media section, upload the GIF, then in the Variants section click a variant and assign the GIF as its media. The GIF will display when shoppers select that variant.
Indirectly - large unoptimised GIFs hurt page speed and Core Web Vitals, which feeds into rankings. Compressed, well-sized GIFs have negligible SEO impact. A 10MB GIF in your hero section is a Lighthouse killer; a 200KB inline GIF is fine.
Video. A 5-second product demo in MP4 is typically 80-90% smaller than the same content as a GIF, plays sharper, and Shopify supports it natively in product galleries. Reserve GIFs for short, simple animations or content areas where you can't add a video. To place a looping MP4 outside the product gallery (e.g., in a custom feature section), describe what you want to Fudge and it builds the section with autoplay + muted + loop attributes.
