How to connect announcement bar to pop up sign up newsletter?

[noobnoobqestio]

Here is my store: https://moc488wx5id752j7-79877701909.shopifypreview.com

I want it so people can click on my announcement bar then my pop up for the newsletter sign up shows up, how do I do this? I have Klaviyo integrated.

[azamgill · Accepted solution]

Great 😀
- in Klaviyo design a popup and set as the attached screenshot.
- Add the following script in your theme.liquid file

    <script type="text/javascript">
	document.querySelector('.announcement-bar__link').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'code here']);
	});
</script>

Notes:
- Replace the ID here with your form id
- Add a blank link in your announcement section. You can just add # as link. We need this so that text behave like link. 

[azamgill]

Hey @noobnoobqestio ,

Check this link, https://vgppapercups.myshopify.com/ do you want to achieve this ? if you click the announcement bar then Klaviyo from will popup. store password is vgp

[noobnoobqestio]

Yes! That's exactly what I'm looking for

[azamgill · Accepted solution]

Great 😀
- in Klaviyo design a popup and set as the attached screenshot.
- Add the following script in your theme.liquid file

    <script type="text/javascript">
	document.querySelector('.announcement-bar__link').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'code here']);
	});
</script>

Notes:
- Replace the ID here with your form id
- Add a blank link in your announcement section. You can just add # as link. We need this so that text behave like link. 

[noobnoobqestio]

Sorry what does this mean: - Add a blank link in your announcement section. You can just add # as link. We need this so that text behave like link. ?

Can you show how to do it

[azamgill]

Sorry that i forgot to attached this screenshot.
I believe that you are using Dawn theme. I attached a screenshot.  You just need to add a blank link. and by blank link i mean you just # in the link.

[noobnoobqestio]

The link to the popup? sorry, I'm not getting it haha, so I copy and paste the link to my popup for example #klaviyo.com/popup (but the real url)

Thanks for the help

[azamgill]

No, Just # 
I made short video clip for you. 
https://streamable.com/vl0bgc?src=player-page-share

[azamgill]

if it's not against the shopify community rules, then may i ask to give me collaborator access to your store with theme access ?

[noobnoobqestio]

Sorry, I prefer not to do this, is it possible to show me a screenshot of the # and link? You can put a fake link if you don't want ot disclose anything, thanks again.

[azamgill · Accepted solution]

in my previous message i shared a video clip with you , here it goes again https://streamable.com/vl0bgc?src=player-page-share

[noobnoobqestio]

Sorry I didn't see the clip before, thanks so much for all the help man!

[Rebeccajo]

Is there a way to do this but with a text box popup instead of newsletter sign up?

[ishaankatharos]

Hey, Is there a solution for those using shopify email app?

Would be really helpful. Thanks!

[levyelectric]

Just a heads up for some themes it's "announcement__link" instead of "announcement-bar__link" in this code here:  querySelector('.announcement-bar__link

You can see ours working here now with the Klaviyo pop-up: https://shop.levyelectric.com/