Shopify announcement bar generator
One click and a working bar appears below. All three are ours to begin with — wording, figures and colours — and step 2 is where it becomes yours.
Pick one of the three above. The rendered bar and the code you paste both appear here — nothing is generated until you choose.
One bar, one message, every shopper.
The free snippet is hardcoded. Nudgesmart makes it conditional — scheduled, targeted, and measured. A bar pasted into your theme shows one message to everyone; in the app a notification bar is a campaign type you can gate on conditions like cart total, UTM source or number of visits, and it reports its own impressions and conversions per campaign.
How it's calculated
A Shopify announcement bar is a full width strip of text across the top or bottom of every storefront page, and here you set the message, the link, the colours and the position and get one block of HTML and CSS to paste into your theme.
No benchmark is used or implied on this page. Nobody publishes announcement bar performance with a disclosed sample, so there is no figure here to grade you against and none is invented. Everything shown is the code the settings produce.
Five settings, and only one of them changes what the snippet actually contains. Knowing which is the difference between pasting eleven lines and pasting a script you did not read.
- Message
- The sentence a shopper reads, capped at 120 characters because a longer one wraps to three lines on a phone and stops being a bar. Angle brackets and ampersands are escaped before the text reaches your theme, so a stray character in a message cannot become markup on every page of your store.
- Link mode
- None, a link after the message, or the whole bar clickable. The address is validated, not trusted: a path starting with a slash or a full https address is accepted, and everything else is refused with a reason. A protocol-relative address that starts with two slashes is refused too, because it is not a path and does not read as an external link either.
- Position
- Top or bottom, which decides where you paste it and which side of the page the script reserves space on. Bottom plus not sticky is the one combination that rarely earns its place: the message sits below the footer where nobody scrolls.
- Sticky
- Fixed to the viewport rather than part of the page. This is the only setting that changes what the snippet contains — a sticky bar is out of flow and covers what was underneath it, so the block gains a script that measures the rendered bar and pads the body to match, on load and on resize.
- Close button
- An X that hides the bar and writes one key to session storage so it stays hidden for that browser tab. Storage is read and written inside a try and catch, because it throws outright in a private window and in a sandboxed frame — the preview on this page is sandboxed, so that guard is exercised on every render rather than hoped for.
Nudgesmart is available on the Shopify App Store. Browse the template library or see what it costs.
Settings that generate, and inputs that get refused
Illustrative, not customer data. Every cell below is produced by the same function the generator above runs, so the two cannot disagree.
| Scenario | Position | Link | Snippet contains | What the generator says |
|---|---|---|---|---|
| Free shipping over a threshold, sitewide | top | inline | HTML, CSS, script | Nothing to flag |
| Sale running, bar follows the shopper down the page | top, sticky | whole | HTML, CSS, script | A close button is dropped when the whole bar is a link, because the click to close lands on the link on the way to the button. |
| Dispatch notice pinned to the bottom of the page | bottom, sticky | none | HTML, CSS, script | Nothing to flag |
| Plain notice, no script at all | top | none | HTML, CSS | Nothing to flag |
| A link address the generator refuses | top | none | HTML, CSS | Only an https address or a path starting with a slash is accepted. Anything else is refused rather than pasted into your theme, because an href is an executable context in every browser. |
| A close button asked for on a fully clickable bar | top | whole | HTML, CSS | A close button is dropped when the whole bar is a link, because the click to close lands on the link on the way to the button. |
The last two rows are the refusals, and they are the part most generators skip. Row five asks for a link address that is not a web address, and row six asks for a close button on a bar that is entirely a link. Both are refused on screen with the reason, rather than accepted and quietly dropped.
What this number doesn't tell you
One message, every shopper, every page
A bar in the theme is unconditional by construction. The shopper with two items in the cart, the shopper arriving from a paid ad and the shopper on their fifth visit all read the same sentence. That is not a flaw in the code, it is what pasting a string into a template means.
A sticky bar costs viewport, and phones have least of it
Forty-odd pixels pinned to the top of a 667 pixel phone screen is six percent of everything the shopper can see, on every page, for the whole session. That is a real price and it is paid whether or not anyone reads the bar.
Your theme may already have one
Most modern Shopify themes ship an announcement bar section in the theme editor, with schema settings a non-technical person can change. If yours does and it can say what you need, use it. Pasted code is what you reach for when the built-in one will not do the job, not a default.
It has to be removed by hand
A sale bar left up after the sale is worse than no bar. Nothing in this snippet expires, and nothing reminds you. Editing theme code is the only way it changes and the only way it goes.
There is nothing here to measure
A static bar does not know how many shoppers saw it, how many clicked the link, or whether the ones who did would have bought anyway. No reporting exists to read. That is the whole of what a pasted snippet cannot do.
Questions
How do I add an announcement bar to Shopify without an app?
Many themes ship one in the theme editor, under a section usually called Announcement bar. If yours does not, or it will not do what you need, the bar here is plain HTML and CSS: copy the block and paste it into theme.liquid, directly after the opening body tag for a top bar or directly before the closing one for a bottom bar. Duplicate your theme before editing it.
What is the difference between sticky and not sticky?
A plain bar is part of the page. It scrolls away with everything else and needs no script. A sticky bar is fixed to the viewport, which takes it out of the page flow, so it covers whatever was underneath. The snippet then includes a short script whose only job is to give the page back the space the bar is covering, on load and on resize.
Can the whole bar be a link?
Yes, and it is one of the three link modes. It comes with a trade: a fully clickable bar has nowhere safe for a close button, because the click to close lands on the link on the way to it. The generator drops the close button in that mode and tells you it has, rather than emitting a button that does not work.
Does the close button remember that I closed it?
For the rest of that browser tab session. It writes one key to session storage, wrapped in a try and catch so a private window or blocked site data hides the bar for that view rather than breaking it. Close the tab and the bar is back.
Can I put a link to another site in it?
Only an https address or a path starting with a single slash is accepted. Anything else is refused rather than written into your theme, because an href is an executable context in every browser and a generator that passes a URL through untouched hands you a script on every page of your store.
Will it work on mobile?
The block carries a small media query that reduces the text size and the side padding below 480 pixels. A long message still wraps to two lines on a narrow phone, which is why the message field stops at 120 characters.
Is anything sent to Nudgesmart when I use this?
No. The code is built in your browser from the values in the form, the preview is a sandboxed frame with no access to this page, and no account or install is required.
One bar, one message, every shopper. Or not.
A notification bar is a campaign type in Nudgesmart, so the message can change with the cart, the page or the visit.
