09 - Bar with Animated Coupon

This Promo Kit super power puts a sticky bar on the top or bottom of the page showing an animated 'coupon' code that is sure to get attention

EXPERIENCE IT: Head over to the demo page and see this super power in action

How to use this super power

1) Add the Promo Kit Sections to the page

• Make sure you have the Promos Kit installed into your site

• On a site page, add (or copy) the Base kit Section that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections.

• Add a section and search for "Promo (09)" and add it to your page

2) Update the visibility settings

• Open the Visibility settings group

• Set the Delay to appear slider to the number of seconds that you want to wait until the popup is shown. It is recommended to have a small delay so that your reader is not caught off guard when the page loads. It is more likely they will pay attention to the popup instead of showing it right away.

• Set the Promo ID if you want to track apply these identify this popup across different pages. For example, if you want to only allow this popup to be shown once, but are using it on many pages, be sure they all have the same Promo ID

• Set the Limit times shown slider to be the number of times you would like to show the promo bar.

3) Update the text and styles you would like to use

• Update the styles and colors that will be used for the text, background and coupon. Be sure to check the guide on how to use named colors, custom fonts and more.

4) Choose the location and coupon animation

• Open up the Bar Location settings group and choose if you would like the bar to be shown on the top or on the bottom.

• Set the animation style you wish to use for the coupon text

🔥PRO TIP: Keep the message short and sweet so it stays on one line and is easier to read. Choose colors that will make the bar "pop" on the page.