How to create a pop up message by hitting an icon on Header menu

On very top right, I have placed a little icon (a leaf).
How to initiate a pop up message when people hit this icon?
Thanks

Attachments:

You must be logged in to view attached files.

Forgot to mention that the icon is an html block.
Thanks

Hello,

Please sign the class to the icon woodmart-open-newsletter And configure the Popup in the Theme Settings > Shop > Promo popup.

Alternatively, you can add the popup element in the HTML block and set the button as an icon.

Best Regards

Can you please elaborate on the both ideas?

I need the icon to appear exactly as the screenshot aligned to the SM icons and the pop up message to appear after clicking on it.

The promo pop up has different settings. it only opens when you scroll or when the user opens first time the website.

Thanks a lot

I have attached the login details so you can have a look.

Hello,

You can create a popup in two ways:

1. Enable and configure the popup in the Theme Settings > Shop page > Popup.

2. Check seed front page, enter the icons, and check how I added the class.

Another way is to add the popup instead of the icon you have and configure: https://gyazo.com/93ef8bc469897b5453f3c65c8ef6d5dd

The difference is that the first popup would appear automatically when the user comes to the site for the first time, and the second way is called on click only.

Best Regards

Thanks a lot for your reply.
I am looking for the second option “the second way is called on click only.”

I do as you said but something breaks the site and does not load at all.

I create a new html block which I configure as pop up on elementor. I also set the jpeg I want to pop up. Finally I select this html block on header builder.

please shed some light.

thanks

Also, I need to make it transparent, so it looks native like the SM icons.

Can you help please??

Thanks

I managed to make it work! Faster than the paid support.
However, I need some help if possible!
Check the screenshot attached.

The clickable leaf icon is slightly bigger than the header and its not flush to the header.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .btn-size-small.wd-open-popup {
    font-size: 20px;
}

You can increase or decrease the font size as per your needs.

Best Regards

Actually I fixed it. Its ok now.

Problem now is that the html block with the Promo Banner size does not alter. Its always the same small one. Any idea?

Thanks

Hello,

Please check the screen: https://gyazo.com/f32fbeef4e856857c54168fe372a13c9

Best Regards

[Author]

Posts