How do I make a newsletter popup appear on click?

Store Design
,
1

I have successfully managed to duplicate and customise the ‘Newsletter popup’ but instead of having it pop up at intervals, as it contains opening hours, I’d just like it to appear when a link is clicked in the announcement bar.

Any help would be appreciated.

2

If you’ve already duplicated and customized the “Newsletter popup” on your Shopify store and you want to trigger the popup when a link is clicked in the announcement bar, here are the steps you can follow:

  1. Add the link to the announcement bar: In the Shopify admin, go to Online Store > Themes > Customize. Select the “Announcement” section and add the link that will trigger the popup to the announcement message.

  2. Identify the ID or class of the link: In order to trigger the popup when the link is clicked, you’ll need to identify the ID or class of the link you added to the announcement bar. You can do this by right-clicking on the link in your browser and selecting “Inspect” or “Inspect Element”. This will open the browser developer tools and show you the code for the link.

  3. Add a click event listener to the link: Once you’ve identified the ID or class of the link, you can add a click event listener to the link in the theme code. In the theme editor, locate the JavaScript file that controls the newsletter popup (typically called “newsletter-popup.js” or similar). Add the following code at the bottom of the file:

javascript
$(document).ready(function() { $('#your-link-id-or-class').click(function() { $('your-popup-selector').addClass('active'); }); });

 

Replace “your-link-id-or-class” with the ID or class of the link you added to the announcement bar, and “your-popup-selector” with the selector for your custom newsletter popup. This code adds a click event listener to the link, and when the link is clicked, it adds the “active” class to the newsletter popup element, which will trigger the popup to appear.

  1. Save and test: Save the changes to the JavaScript file, refresh the page, and test the link to make sure the newsletter popup appears as expected.

Note: If you’re not familiar with JavaScript or theme development, it’s recommended to make a backup of your theme before making any changes, or to work with a Shopify expert to ensure that the changes are made correctly.

3

This worked a treat in the end…

https://www.updimes.com/how-to-add-a-popup-on-shopify-store/amp/