Make Button Open Pop Up

Technical Q&A
, , , ,
1

Hi!

I’m trying to make my video hero’s button open my “sign up" popup when you click on it.

I guess I would need to deactivate the popup’s normal appearing system (x time, x scrolling, etc…) and make it only appear when you click the button, every time, anytime

How can I achieve this?

This is my video hero with the button that should open the popup when clicked:

Screenshot 2026-03-27 at 18.14.16
Screenshot 2026-03-27 at 18.14.16502×492 4.32 KB

And this is the popup that should be opened only when you click on the previous button:

Screenshot 2026-03-27 at 18.14.27
Screenshot 2026-03-27 at 18.14.271396×804 29.1 KB

Ive been trying to code this by myself with the help of Claude but nothing seems to work… :sleepy_face:

My website is https://npp48r7xu7tnmhl8-60150284501.shopifypreview.com

The theme is Stiletto

And the password is y22

1 Like
2

Opening a popup with a button is pretty straightforward. Inspect webpage, look for the popup in the html, get the ID or class, trigger it manually and get the open class, then add some Javascript, like

document.getElementById('open-newsletter-btn').addEventListener('click', function () {

  document.querySelector('#YOUR-POPUP-SELECTOR').classList.add('YOUR-OPEN-CLASS');

});

And put the correct selectors for the button and popup.

3

Check the theme for a size-guide popup type system, or if it’s newletter is a popup system, etc etc etc.
It’s a way saner approach to just use/generalize a pattern of html&css&js that already exists in a theme.

There’s also just using newer html features.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover

If DIY’ing without programming knowledge ask the shopify-sidekick to generate a simplified section based on your requirements with info from this thread.
Then use the patterns in that generated section to DIY.

1 Like
4

Hi @martujv

You’ve currently added a collection link to the sign-up button. Could you replace it with the sign-up popup link? Also, could you please provide collaborator access so I can fix it directly in your store?

Best regards,
Devcoder :laptop:

5

Hey, thanks for your reply! I wish I would know some more coding to understand what all that means, like I get the ID part, but how do I trigger it manually? Where do I add all the code? and how do I prevent the signup from opening normally?

1 Like
6

Alright I’ll walk you through it briefly. First, right click and click inspect. Popups and modals sometimes have a different class name when open. Since your popup opens immediately, it already has the “open” class.

Screenshot 2026-03-28 010434
Screenshot 2026-03-28 010434594×451 11.7 KB

Screenshot 2026-03-28 010319
Screenshot 2026-03-28 010319559×535 9.88 KB

So we have your newsletter ID: popup_signup_KjfyyB

And we have the “open” state: visible and animation--popup-revealed

For your button, I would suggest deleting it entirely, add a new button, and in the link put this:

#newsletter

Select it when it pops up.

I forgot to mention that it’s a good idea to wrap the javascript in DOMContentLoaded, that way it will wait until page loads.

So starting fresh:

  1. Add button, put #newsletter in the link
  2. Add “custom liquid” section anywhere on the homepage template.
  3. Paste this script in the liquid box and save:
<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('a[href="#newsletter"]').addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector('[data-id="popup_signup_KjfyyB"]').classList.add('visible', 'animation--popup-revealed');
  });
});
</script>

So the idea is using a javascript function to listen for a click on the button, then open the signup popup. Let me know if you have any issues

1 Like
7

Thank you for such a detailed answer!!

1 Like