My shop’s main product images are animated gifs (“webps”) and it’s what sets my store apart because they’re fun and quirky. I’ve been using the animated gif product image style for over 7 years, and ever since I’ve had my store on Shop app, the products animated perfectly on there for years and brought in many sales and followers.
I recently looked at my storefront on my mobile Shop app, and all of the animations stopped working. This is due to some recent update they made and it affects both Androids and iPhones.
Shopify support didn’t provide any helpful information about whether or not the animations can be brought back. There seems to be no way to set different product images into the Shop app versus what you have in the main Shopify store.
If there is anybody who knows of a workaround to display different images in the Shop app, please let me know because my storefront on there looks terrible now (some images are literally blank, because it takes a blank frame from my animation).
Since the Shop app seems to have trouble rendering animated GIFs or WebP animations:
Consider creating a static thumbnail version of each animation. This could be the most visually appealing frame from the animation.
Replace the animated images with these static thumbnails on your Shopify product pages temporarily, as they will then sync to the Shop app.
2. Leverage Shopify Themes and Scripts
Unfortunately, Shopify doesn’t allow separate image setups for the main store and the Shop app. However, you could try this:
Use Shopify’s Metafields to store a separate static image URL for each product.
Add custom code to your theme to load the animated version only for your Shopify store while syncing static images to the Shop app. This approach might need a Shopify developer’s help.
3. Third-Party Apps for Image Management
Some Shopify apps might allow you to customize how images are displayed across platforms. For example:
Look for apps that let you sync different images to specific sales channels.
These apps can often handle different formats for mobile-optimized views, which might solve your issue with animations in the Shop app.
4. Contact Shopify Developers for Custom API Solutions- Engage a Shopify expert or developer to explore a custom API-based solution. For example:
Use Shopify’s APIs to detect requests from the Shop app and serve static versions of your animated images.
This would require advanced technical setup but is feasible for separating image content.
5. Advocate for a Fix in the Shop App
While exploring these workarounds, you might want to continue pushing Shopify for a resolution:
Join Shopify’s Community Forums to highlight your issue. Often, developers and other store owners collaborate to solve problems.
Encourage your followers and customers to report this problem to Shopify support, which can increase the urgency for a fix.