Newsletter popup when announcement bar clicked - Omnisend

[RubyExsto]

Hi,

Hi,

I have created a ‘custom trigger’ newsletter sign up form on Omnisend and would like it to pop up when the announcement bar is clicked. Is there anyway to do this?

My store is https://www.soremi-jewellery.co.uk/

And the code provided by omnisend is:

window.omnisend = window.omnisend || ;
window.omnisend.push([‘openForm’, ‘67d0c52207be655774af913b’]);

I’d really appreciate any help!

Thanks,

Ruby

[Shadab_dev]

I see you are using the dawn theme, so probably won’t need Collab access to store since i can try that out on my development store.

Will try out and update the code with you.

[OmnisendSupport]

Hi Ruby,

Great question — let’s get you set up! Customizing your Omnisend pop-up is a fantastic way to capture more sign-ups.

This can be achieved in two ways:

• If the announcement bar is custom-made (meaning you have access to its code and can modify it), you can adjust it to function as a button and follow this approach.

• If the announcement bar is part of the theme and modifying its code isn’t an option, you can add additional JavaScript directly to the theme’s Liquid file. This script would act as an event listener, detecting clicks on the website. If the click happens to be on the announcement bar, the Omnisend form script will run, triggering the pop-up.

In either case - Shopify’s theme code has to be accessed from Shopify admin → Online store → Themes → Active theme>Actions>Edit code → Find theme.liquid or another specific page where the announcement bar is visible, in most cases - it will be theme.liquid

For the second option, the code needs a specific element ID or a unique class to identify the clicked element and trigger the form.

Here’s an example script that can be added directly to theme.liquid:

Please kindly note the:

querySelector('#announcement-bar'); // or use '.your-class-name' for class

where

#announcement-bar

should be replaced with the announcement bar’s ID or class as mentioned in the comment.

Checking the store, we can see that there’s already an announcement bar linking to Omnisend’s landing page. If this is the same announcement bar, you can find its class here:

So, to adjust the event listener code for the current announcement bar, it would look like this:

We understand that every business has unique needs, and it’s important for us to help you find the best solution for yours. Please feel free to let us know if this works as expected or if you need any further adjustments. Don’t hesitate to ask if anything else comes up — we’ve got your back.

[RubyExsto]

Thanks! I will try this out and let you know if it works

[RubyExsto]

Thanks so much, this worked!

One thing I did need to do (for anyone else trying this out) was replace the link on the announcement bar with a ‘#’ like the below image.

This is great as now I don’t have to direct people off the website to receive a discount code

Thanks again!

[OmnisendSupport]

Thanks for sharing this with the Shopify community! It’s great to hear that it worked for you. Ensuring that Omnisend is the perfect fit for your business and setting you up for successful marketing is our top priority.

We’re always here to help if you need anything else — wishing you continued success!