POP-UP on a button

[Charcopp14]

Hey, I use the Shopify Forms app. And I want to use the pop-up design but I don’t want the pop-up to appear after a couple of seconds. I want it to appear when clicking a button. Can somebody help me?

[James-Bell]

Hey @Charcopp14,

Can you please share your store url and password [if applicable] so that I can take a look and provide you the solution code.

Thanks

[Charcopp14]

hi! My store is vientodelvino.com

[James-Bell]

It would be easier if you can share the link of specific page where the popup is existing.

[Charcopp14]

Jachtdiner – Viento del Vino. it should appear when clicking on the red button!

[James-Bell]

The Register now! button is not clickable. Can you try it by yourself.

Also, I don’t see where the popup opens after a couple of seconds. By any chance can you share the exact page link where the popup open automatically and including when I click on the button.

[Charcopp14]

When using the pop-up i can only choose pages so then the pop-up will appear on all the pages but I only need it on this page when people click on the red but. but If you say that I need to make sure the pop-up appears I will do It.

[James-Bell]

Yeah, I understand this. But this need to check whether the Shopify forms provide us the trigger that we can use for button that show the popup on clicking the button. But for this I need to take a look in your store.

[Charcopp14]

Okay! I will set It up for you, I will reply if it’s live

[James-Bell]

For sure. I’ll be wait. Or you can also add me as a collaborator so that I can make it live and test though the process.

[tim_1]

Technically, you can make your pop-up form show only on selected pages.

For this you need to:

1. Turn off Forms in storewide embeds:
   
   
2. Create a special template for the page in question;
3. Add an Apps section and enable Forms in that section:
   
   

---

To make your popup form show on arbitrary button click, you can do this:

1. Configure your form teaser like this – “show first and when form is closed”:
   
   
2. Hide this element with CSS;
3. Add JS code to click this hidden button when yours is pressed.

For example, I was able to make it work with code like this in “Custom Liquid” section:

<button class="ev-card__badge" onclick=revealForm() >
  Schrijf je nu in!
</button>

<style>
shopify-forms-embed:not([reveal]) {
  display: none !important;
}
</style>

<script>
revealForm = ()=> {
  document.querySelectorAll('shopify-forms-embed').forEach(e=> {
    e.setAttribute('reveal', 'true');
    e.shadowRoot.querySelector('button[class*="_teaser"]')?.dispatchEvent(new Event('click'));
  })
}
</script>

You can see it working at https://bbkmarket.myshopify.com/
If you can’t freely edit HTML code, then the code can be changed, but

[Charcopp14]

@tim_1

<button class="ev-card__badge" onclick=revealForm() >
  Schrijf je nu in!
</button>

<style>
shopify-forms-embed:not([reveal]) {
  display: none !important;
}
</style>

<script>
revealForm = ()=> {
  document.querySelectorAll('shopify-forms-embed').forEach(e=> {
    e.setAttribute('reveal', 'true');
    e.shadowRoot.querySelector('button[class*="_teaser"]')?.dispatchEvent(new Event('click'));
  })
}
</script>

I don’t know where I need to ad the CSS? Because If I add it with custom CSS it doesn’t work. Now I have a pop-up bottun on al my pages?

[Charcopp14]

My form is live and I added the right button! Don’t know how I need to do the next step?

[tim_1]

Oops sorry – I wrote “Custom CSS” while it should be “Custom Liquid” section – I’ve edited the post above.

So I see you have the form button on the target page.
Now add my code.

This portion you may create elsewhere and add your classes/wappers, but important is to have onclick=revealForm() property on the button.

<button class="ev-card__badge" onclick=revealForm() >
  Schrijf je nu in!
</button>

The result should look like this:

[Easify-Jennifer]

Hi @Charcopp14

If you don’t want the Shopify Forms popup to appear automatically after a few seconds, another approach you can consider is using the popup (modal) from Easify Product Options and triggering it only when customers click a button.

Here’s an example I’ve created so you can see how it works:

• This is the result:

• This is the app setting:

With Easify Product Options, you can choose the Modal (popup) option, and the popup will only open when customers click.

In addition, within the Advanced settings of the modal option, you can further fine-tune the display experience in detail - for example, adding an icon or image to the popup button, adjusting the icon size, and customizing the font, colors, and styling to match your store’s design. This way, the popup appears as a clean button or link on the page, rather than an intrusive popup that opens automatically and disrupts the user experience.

Besides popup/modals, Easify also supports many other option types such as text fields, checkboxes, dropdowns, and file uploads, along with conditional logic to show or hide content based on customer selections. This not only helps you handle click-to-open popup needs, but also makes it easy to expand with additional forms or interactive options in the future without having to modify your theme code.

You’ll find this app both easy to navigate and powerful for managing custom options. And whenever you need help, Easify’s support staff is quick and friendly.

[Elfsight.Marketing]

Hello,

You have seen a bunch of good solutions to this scenario this week. Apps generally empower your popups with a decent selection of triggers. Feel free to check out our Popup app by Elfsight as well. You can select triggers as well, also you will find templates, layouts, various fields to build an engaging popup. I hope it will be a good addition to your research.

Best,

Elfsight Team