When animation helps, and when it doesn't
A small amount of motion draws the eye. On a busy collection grid, a badge that pops in or gently pulses can help a limited-time offer or a new drop stand out. The same motion on every product has the opposite effect: everything competes, and the page feels restless.
A good rule is to animate one message at a time, and to choose subtle, short effects for anything that stays on the page.
- Good fits: a flash sale, a launch badge for a few days, a single "Last chance" message.
- Poor fits: permanent badges on every product, long text, or several animated badges on the same card.
Your options on Shopify
Shopify themes generally don't include settings to animate product badges. Adding motion yourself means writing CSS animations in your theme and attaching them to the right badge elements, then checking they still work after theme updates.
With a label app, the animation is part of the label's design, so you can turn it on, change it or switch it off from the label editor without touching theme code.
What to decide before you add motion
- Which single message deserves attention? Usually the one tied to a deadline or a big discount.
- How long will it run? For a few days, a looping effect is fine. For a permanent badge, a one-time entrance is kinder to shoppers.
- What else moves on the page? If your theme already has sliders, hover zooms or a scrolling announcement bar, a quieter badge will feel calmer.
Step by step: animate a badge
- Open or create a label
Go to Product Labels and click Edit on an existing label, or + Add Label / + Add Automation Label to start a new one.
- Go to the Design tab
Finish the basics first: Label Text, colours, Position and Label Size.
- Choose an Animation
Open Animation and pick an effect. The Label Preview on the right helps you judge how it looks.
- Combine with rotation if you like
Rotation and Animation work together, so a tilted ribbon can still pulse or swing.
- Activate and save
Click Activate (new labels start Inactive), then Save. Refresh a collection page to see the effect on real product cards.
One-time effects play when the badge is added to the page. On collection pages that load more products as you scroll or filter, newly loaded cards play the entrance when they appear.
The 19 animation effects
Effects fall into two groups. Entrance and one-time effects play once when the badge appears. Looping effects keep moving while the badge is on screen.
| Effect | Behaviour | Good for |
|---|---|---|
| Fade In, Fade In Down, Fade In Left | Plays once | Subtle entrance for any badge |
| Fly, Slide in | Plays once | Badges that should arrive from the side or top |
| Pop | Plays once | Short badges such as NEW or -20% |
| Jello, Wobble, Tada, Swing, Rubber Band | Plays once | Playful brands, short campaigns |
| Head Shake, Shake X, Shake Y | Plays once | Urgent notes such as Last one |
| Pulse, Header Beat | Loops | One standout badge, such as a flash sale |
| Groove, Swerve | Loops | Gentle floating or rocking motion |
| Flash | Loops | Use sparingly; it blinks continuously |
If you aren't sure, start with Fade In or Pop. They add a little life without distracting from the product.
Example: one animated flash-sale badge
A sports store runs a weekend flash sale and wants only the sale items to catch attention, while its everyday badges stay still:
- Manual label, Products set to Collections with the flash-sale collection.
- Text type, circle shape, Label Text
-{{sale_percent}}, bright background. - Position Top-Right, Animation Pulse.
- Visibility Date: Custom Date with the weekend as Start date and End date, so the moving badge disappears when the sale ends.
- The store's permanent New arrival automation label keeps Animation set to None.
After the weekend the dates expire and the pulsing badge disappears by itself, while the still New arrival badge carries on. If the store wanted a softer version the following week, it could switch the same label to Fade In, change the dates and save, without redesigning anything.
Tips and common mistakes
- Don't animate everything. If several labels on the same card move, none of them stands out. Keep looping effects for one label at a time.
- Prefer one-time effects for permanent badges. Fade In or Pop plays once and then the badge sits still.
- Be careful with Flash. Continuous blinking can be uncomfortable for some shoppers. Use it briefly, if at all.
- Check on mobile. Movement feels stronger on small screens. If it's too much, use a smaller Label Size on mobile or a gentler effect.
- To stop the animation, set Animation back to None and save.
Frequently asked questions
How many animation effects are there?
19 effects, plus None. They include Fly, Slide in, Pop, Pulse, Tada, Swing, Flash and three fade-ins.
Do animations loop?
Pulse, Header Beat, Groove, Swerve and Flash loop while the badge is visible. The other effects play once when the badge appears.
Can I animate image labels?
Yes. Animation is on the Design tab for all label types: Text, Image and Upload.
Can a rotated label still be animated?
Yes. Rotation and Animation work together.
Does animation cost extra?
No. The app is completely free, including animations and unlimited labels.
