how to create a modal/pop up window on product page in supply theme

Solved
MinuSak
Excursionist
28 0 9

hello,

I want to add a modal/pop up in product page. I need it for displaying extra information about the variant selection, so the pop up needs to be opened on clicking an i symbol as image in product page below the price.

can anyone please help me with this.

Thanks in advance.

KetanKumar
Shopify Partner
20594 2133 7796

@MinuSak 

yes please try this code and modification ad you like

https://codepen.io/fancyapps/pen/OOXxLa

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Ninthony
Shopify Partner
1975 296 784

Should mention that this demo is using fancybox:

https://fancyapps.com/docs/ui/fancybox/

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
MinuSak
Excursionist
28 0 9

Thank you so much.. which files should I add these codes to?

KetanKumar
Shopify Partner
20594 2133 7796

@MinuSak 

you have modification code

you have add fancybox css and js file on theme.liquide and html code on product page as demo

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MinuSak
Excursionist
28 0 9

Thank you so much..

I want only #1 Default modal , so i should i add only the html code on product page? But the modal is not opening, only the button is displayed. Im using supply theme.

Thank in advance.

KetanKumar
Shopify Partner
20594 2133 7796

This is an accepted solution.

@MinuSak 

please check this its easy for your its simple css and html popup code can you please just copy past

https://codepen.io/imprakash/pen/GgNMXO

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MinuSak
Excursionist
28 0 9

thank you so much.. it is working,, but i wanted to click on an image.. when i replaced <a> with <img> the pop up is not opening. is there anyway solution for that?

Also, can we open the pop near the button/image? now it is opening on top of the screen.

i want something like this.

Picture1.png

 

on clicking i image, this should pop up.

Picture2.png

Thanks in advance.

 

Ninthony
Shopify Partner
1975 296 784

Put the image inside of the <a> tag, it needs the anchor tag to function, I just changed that and a little css and saved it out:

https://codepen.io/ninthony/pen/vYmYMab

If this works for you please don't accept my solution as the answer, as it is @KetanKumar who did the work.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
KetanKumar
Shopify Partner
20594 2133 7796

@MinuSak 

yes please just add image in a tag for exampel <a> your image here </a>

 

@Ninthony thanks for it

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing