Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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.
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
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
Yes! That's exactly what I'm looking for
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.
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
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.
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
No, Just #
I made short video clip for you.
https://streamable.com/vl0bgc?src=player-page-share
if it's not against the shopify community rules, then may i ask to give me collaborator access to your store with theme access ?
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.
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
Sorry I didn't see the clip before, thanks so much for all the help man!
Is there a way to do this but with a text box popup instead of newsletter sign up?
Hey, Is there a solution for those using shopify email app?
Would be really helpful. Thanks!
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/
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024