This tool was updated mid March 2024. The bookmarklets have been enhanced to allow animations to be created both from search results pages and from collections on Zazzle.
On top of that, you can now use one of the 6 available templates to give variation to your social media shares / pins.
And an update released in late March allows you to use text on your animation with various options to refine things. See the very end of this post for more.
The only difference to this tutorial now that there are templates is that you have to chose the layout option you want when you first click one of the bookmarklets. Here’s what it looks like:
First we’ll cover Collections
If you want to use your own collection then you need to be viewing it as a customer would and NOT in your store’s back end
Everything’s pretty much the same for Zazzle Search Results Pages and Store Pages so we’ll just cover the differences for those at the end.
This works for Pinterest, Facebook and X (formerly Twitter). It works best on Pinterest and takes only 1 click. Watch this 2min vid and prepare to be astounded!
See the pin that was made in the video:
https://www.pinterest.co.uk/pin/332562753751136127 (opens in new tab)
Note that the video doesn’t show the recently added dialog box for choosing the layout but all the rest is the same
It takes a little bit more on Facebook and X but you’re given everything you need to drag and drop, copy and paste – so it’s still easier than making a cup of coffee!
Getting the Fansci-Pansci bookmarklets
Visit the following link and drag the bookmarklets to your toolbar:
https://niftytoolz.com/npcp/collections-anigif-maker.html (opens in a new tab)
Using the Fansci Pansci bookmarklets
You may need to tell your browser to allow popups from the NiftyToolZ website. Here’s a useful guide on how to do that (opens in new tab)
For the bookmarklets to work you need to be logged onto the respective social media already.
I’ll only briefly cover Pinterest – and that’ll be later because you’ve no doubt already watched the vid above.
This applies to X (Twitter) as well.
So the Facebook steps are:
- Start a new post on Facebook
- Save the animation of your collection to your desktop
- Drag and drop it from your desktop into your waiting Facebook post
- Copy the text-with-link (after adding hashtags if you like) and then paste into your post
Done!
You’ve probably already watched the vid above so this section just adds some stuff as an explainer.
The pin dialog opens automatically once the animated gif has been made. For some reason, only the top half of the gif seems to get shown at first.
Only when it’s been saved to a board to you get to see it all. You do need to leave it a short while to bake and then refresh it before you’ll see the animation. The length of time depends on how many product images are in your animation.
Another Niftyer spurred me on and we found a way to get an animated pin in the Created section of Pinterest. This is a good thing.
Read the relevant section in the FAQ to find out how.
More about what’s generated
Whichever bookmarklet you click, the first four product images are used to make the collage image on which the rest of the animation is played. The first 20 images are used in the complete animation.
The link that gets created – you’ll see it with Fansci – will recreate the search page when it’s clicked. This means that a visitor will see pretty much what they expect. Because it’s live, over time the exact search results will change but this shouldn’t lead to any surprises for a visitor because the title and description used will still apply.
The links will use a referral id and a tracking code – clean links for the promotor program aren’t approproiate for marketplace searches so aren’t available.
The referral id used will always be yours is you pay a Nifty subscription. If not, half the time on average the links will use your referral id and the other half mine. This 50/50 referral split helps make sure that if you use it for free, it’ll still contribute to paying for the Nifty servers over the long run.
Animations from Zazzle Search Results pages
Everything’s pretty much the same as for Collection pages, so I’ll only go over the differences.
The Fansci-Pansci bookmarklets can tell when you’re on a search page by checking the beginning of the address bar to see if it contains zazzle/com/s/ or zazzle/com/c/
With Pansci, it’s 1-click magic – you click the bookmarklet, choose your layout option and a pin is made for you. All you have to do after that is to choose your board and it’s done. The title and description are picked up from the search results page behind the scenes (from the page’s meta data).
Pinterest pin
This is a pin made with the Pansci bookmarklet. Click it and you’ll see the pin animating and if you then click its link you’ll see the search page used to make it.
Animations from Zazzle Store Pages
This route is great for Facebook / X (formerly Twitter) because you can edit the text you’re given so you can say what you want – but for Pinterest, not so much.
Why is that? The text Zazzle has written that goes behind-the-scenes for stores always follows the same pattern. It’s not so great and it’s what Pinterest will use without you getting a chance to edit it.
Here’s the pattern of what’s written behind the sccenes:-
for the title: Highton Ridley: Designs & Collections on Zazzle
for the description: Check out all of the amazing designs that Highton Ridley has created for your Zazzle products. Make one-of-a-kind gifts with these designs!
So for Pinterest and Stores, try this instead…
It might be better to leave your store front and try Zazzle’s marketplace search instead, using your store name as the search term. To further refine things, don’t use more search terms but instead use the Category dropdown to get what you want to promote.
That way you’ll get something fairly acceptable as the text in your pin. For example, using my store name as the search term and then choosing Business Cards from the drop-down results in this text:-
for the title: Hightonridley Business Cards | Zazzle
for the description: Get Hightonridley personalized business cards or make your own from scratch! Premium cards printed on a variety of high quality paper types. Hand out yours today!
Not brilliant but acceptable.
Options to refine your animation
Here’s a screenshot showing the options panel where you can set text and its various attributes to go with your animation
Make sure you read the updated FAQ to find out more. Enjoy 😊
Available animations
A collection of funny t-shirts has been used to demonstrate the animations. If you want to get one, here’s the link (opens in a new tab)
The option number shown under each image is the same one used by the bookmarklets
Vertical templates
Examples of animations with the vertical templates.
Animating products are at the top with the animated text starting at the bottom of the four small images and rising to their top.
Text for the static option sits at the top of the group of four small images.
Animating products in the centre with text fading out and in at the top of the two small images at the bottom.
Text for the static option sits at the bottom of the group of two small images at the top.
Animating products are at the bottom with text starting at the top of the four small images and dropping to their bottom.
Text for the static option sits at the bottom of the four small images.
Horizontal templates
Examples of animations with horizontal templates.
Above, the animating products are on the left with the animating text starting above the small images on the right and falling to their bottom. The static text sits between the top and bottom pair of images on the right.
Above, the animating products are in the middle with the text centered at the top and bottom. The text fades in and out. The static text sits in the same place.
Above, the animating products are on the right with the animating text starting above the small images on the left and falling to their bottom. The static text sits between the top and bottom pair of images on the left.