We built an online dress store for a dress manufacturer that we branded and built from the ground up to bring a direct-to-consumer (D2C) offering to the marketplace. Their leadership is always working with us on collaborative ideas for the next campaign or strategy that we’re executing. As part of their implementation, we deployed Klaviyo for Shopify Plus. Klaviyo is a well-known marketing automation platform with very tight integration to Shopify as well as many Shopify Apps.
According to a study, using animated GIFs can increase click-through rates by 42%, conversion rates by 103%, and revenue by 109%.MarketingSherpa
A favorite feature of mine is their A/B testing in Klaviyo. You can develop different versions of an email, and Klaviyo will send a sampling out, wait on a response, and then send the remaining subscribers the winning version – all automatically.
Our client subscribes to fashion emails in the industry and continued to remark how much they liked some emails with a slideshow of product photos. They asked if we could do that and I agreed and built a campaign with an A/B test where we sent one version with an animation of 4 products, and another with a single, beautiful, static image. The campaign is for a blowout sale of their fall dresses as they’re bringing on new product lines.
Version A: Animated GIF
Version B: Static Image
The photo credit goes to the talented folks at Zeelum.
The campaign sampling is still running right now, but it’s pretty clear that the email with the animated graphic is far outperforming the static image… by about a 7% open rate… but an astounding three times the click-through rate (CTR)! I think the fact that the animated GIF put several different styles in front of the subscriber led to far more visitors.
How To Make An Animated GIF Using Photoshop
I’m not a pro with Photoshop. The only times I typically use Adobe Creative Cloud’s Photoshop are to remove backgrounds and layer images, like placing a screenshot on top of a laptop or mobile device. However, I dug online and figured out how to make an animation. The user interface for this isn’t the easiest, but within 20 minutes and after reading some tutorials, I was able to knock it out.
Preparing our source images:
- Dimensions – Animated GIFs can be quite large, so I made sure to set my photoshop file dimensions up to exactly match our 600px wide email template width.
- Compression – Our original images were high resolution and very high file size, so I resized them and compressed them with Kraken to JPGs with a much smaller file size.
- Transitions – While you might be tempted to add animation tweens (eg. fading transition) between frames, that adds a lot of size to your file so I’d avoid doing that.
To build the animation in Photoshop:
- Create a new file with the dimensions that match the exact dimensions you are placing in your email template.
- Select Window > Timeline to enable the timeline view at the base of Photoshop.
- Add each image as a new layer within Photoshop.
- Click Create Frame Animation in the Timeline Region.
- On the right hand-side of the Timeline region, select the hamburger menu and select Make Frames from Layers.
- Within the Timeline region, you can drag the frames into the order that you’d like the images to appear in.
- Click on each frame where it says 0 sec, and select the time that you’d like that frame to display. I chose 2.0 seconds per frame.
- In the dropdown below the frames, select Forever to ensure the animation loops continously.
- Click the Play Button to preview your animation.
- Click File > Export > Save for Web (Legacy).
- Select GIF from the options on the top left of the Export screen.
- If your images aren’t transparent, uncheck the Transparency option.
- Click Save and export your file.
That’s it! You now have the animated GIF to upload to your email platform.