For the complete documentation index, see llms.txt. This page is also available as Markdown.

Add animation to a badge

Add animation effects like pulse to your badges to grab customer attention on your storefront.

Add animation effects to draw customer attention to sales, limited-time offers, and important product information.

How to add an animation

1

Open the badge editor

From Sami Product Labels, go to Badges & Labels. Click Edit badge/label for an existing badge, or click Create badge and complete the initial badge setup.

2

Open Design

The editor opens on Design by default. If you are on another tab, click Design.

3

Expand Advanced settings

Scroll to the bottom of Design, then click Advanced settings.

Advanced settings section at the bottom of the Design tab
Expand Advanced settings to find the animation controls under Effects.
4

Enable Use animation

Under Effects, turn on Use animation. The animation type, speed, and repeat controls appear.

5

Select the animation type

Choose one of the 13 available effects: Pulse, Flash, Bounce in, Bounce out, Swing, Wobble, Flip, Gelatine, Roll in, Roll out, Rotate in down left, Rotate in up left, or Hi there.

Animation type, speed, and repeat controls
Choose an animation effect, then adjust its speed and repeat count.
6

Set the animation speed

Use the Animation speed slider or number field to set a value from 0 to 10. Watch the live preview as you adjust it so the effect remains noticeable without distracting from the product.

7

Set the repeat count

Use the Animation Repeat slider or number field to set a value from 0 to 100.

8

Save and preview

Check the effect in the live preview. You can switch between collection and product page previews and between desktop and mobile views. When the animation looks right, click Save at the top of the editor.

Also verify the saved badge on the storefront. Theme CSS and page layout can affect how an animation feels in context.

Next steps

  • Change badge style — Customize fonts, colors, borders, and backgrounds for your badge.

  • Use custom CSS — Use custom CSS for advanced styling and animation fine-tuning.

Last updated

Was this helpful?