Solved

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

noobnoobqestio
Excursionist
15 0 3

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.

Accepted Solutions (2)
azamgill
Shopify Partner
312 46 68

This is an 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. 

Klayvio-Screenshot1.jpg

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify

View solution in original post

azamgill
Shopify Partner
312 46 68

This is an 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

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify

View solution in original post

Replies 14 (14)

azamgill
Shopify Partner
312 46 68

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

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
noobnoobqestio
Excursionist
15 0 3

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

azamgill
Shopify Partner
312 46 68

This is an 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. 

Klayvio-Screenshot1.jpg

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
noobnoobqestio
Excursionist
15 0 3

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
Shopify Partner
312 46 68

2.jpg
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.

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
noobnoobqestio
Excursionist
15 0 3

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
Shopify Partner
312 46 68

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

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
azamgill
Shopify Partner
312 46 68

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

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
noobnoobqestio
Excursionist
15 0 3

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
Shopify Partner
312 46 68

This is an 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

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
noobnoobqestio
Excursionist
15 0 3

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

Rebeccajo
Visitor
1 0 0

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

ishaankatharos
Excursionist
29 1 10

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

Would be really helpful. Thanks!

levyelectric
Shopify Partner
6 0 0

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/