Re: I'd like a link to open as a linked page pop up

I'd like a link to open as a linked page pop up

BTAromas
Tourist
12 0 1

Hello,

 

Please can somebody help me?

 

I'd like to have a link open as a pop up to a page. As you can see on on my first image, there is a link that opens as a pop up highlighted in red (this is the pop up link). 

 

I'd like the same sort of pop up link in the highlighted red section of my third image, (Find out more).

 

Screenshot 2024-07-15 at 10.21.32.pngScreenshot 2024-07-15 at 10.24.13.pngScreenshot 2024-07-15 at 10.24.40.png

 

Replies 13 (13)

Huptech-Web
Shopify Partner
930 187 196

Hi @BTAromas , Do you want to open the same popup on the click of the link or do you want to create a different popup modal?

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
BTAromas
Tourist
12 0 1

Hi, I'm not 100% sure what you mean, this particular link can open to the same page, as i'm going to remove the link (this is the pop up link).

 

Eventually I want different links to open to different pop up pages. But I'm assuming I can alter the code accordingly.

 

I don't understand why shopify gives you the option to put a pop up link in the product section but won't let you do the same with other links elsewhere.

 

Thanks.

 

Huptech-Web
Shopify Partner
930 187 196

Hi @BTAromas , If you want to open the same popup on the click. Add the below script to your Product template main section file or add the script in the theme.liquid at the bottom before </body> tag

<script>
const modalOpener = document.getElementById('modal-opener-footer');
const modal = document.getElementById('PopupModal-popup_CebXd8');
modalOpener.addEventListener("click", function(e) {
	e.preventDefault()
    modal.setAttribute('open', '');
});
</script>

 

 

AT

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
BTAromas
Tourist
12 0 1

Unfortunately that didn't work. 

BTAromas
Tourist
12 0 1

To be clear, I want the link that says 'Find out more' to open as a pop up.

Huptech-Web
Shopify Partner
930 187 196

Hi @BTAromas , I forgot to mention, Add "modal-opener-footer" id attribute to your link.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
BTAromas
Tourist
12 0 1

Okay, how do I do that?

 

Huptech-Web
Shopify Partner
930 187 196

Hi @BTAromas , Open the code editor from the admin in your Shopify store! To open the editor follow the steps:

1. Go to Admin -> Edit Code. It will open the code editor.
2. Find the file "multicolumn.liquid" Find the "<a>" with "animate-arrow" class and add the attribute.

Review the below screenshots for your reference:
image_2024_07_15T11_00_13_051Z.png      image_2024_07_15T11_09_11_699Z.png

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
BTAromas
Tourist
12 0 1

Worked, thank you. 

 

How do I get this other link to open as a pop up?

 

Screenshot 2024-07-15 at 12.29.22.png

BTAromas
Tourist
12 0 1

Also, now I've deleted the 'This is the Pop UP Link' which I didn't need. This other link isn't working now.

 

Huptech-Web
Shopify Partner
930 187 196

To open the popup with different links you have to create a for loop for the click event. Follow the below steps and it will open the popup.

1. Add the "modal-opener-footer" class to the "multicolumn.liquid" file.

image_2024_07_15T11_40_20_922Z.png

 

2. Replace the Javascript code with the below code:

const modalOpeners = document.querySelectorAll('.modal-opener-footer');
let modal = document.getElementById('PopupModal-popup_CebXd8');
modalOpeners.forEach((modalOpener) => {
    modalOpener.addEventListener("click", function(e) {
    	e.preventDefault()
        modal.setAttribute('open', '');
    });    
});


Also, I noticed one thing you have also removed the Popup Modal code with the "This is the Pop UP Link". That's why it is not opening the popup on the click. Add the modal code back and it will work.

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
BTAromas
Tourist
12 0 1

I don't want the 'This is the pop up link' there though. This was just for your reference, so you knew what I meant by pop up.

 

Thanks

BTAromas
Tourist
12 0 1

Please lets start again. I have removed the other code so it doesn't cause a problem.

 

Please can you help me make these links pop ups, opening their respective pages (please note they are different pages for each link).

 

Screenshot 2024-07-15 at 12.56.07.png