How to create a pop up / lightbox for additional info on product pages

n_bcn
Excursionist
17 1 1

Hi, 

 

Currently the content on each of my product pages ends with "full ingredient list" (I am selling skincare products). Some of these ingredients are very long and visually it doesn't look good on my product page (see 1st image).

 

I have seen other websites offer a button that you can click on to reveal the full ingredients list, which pops up like a lightbox (see 2nd and 3rd image). 

 

I have found a tutorial for how to install a pop up for size charts on product pages however the content on mine would need to be different for each product as each product has different ingredients.

 

Is there any way for me to do this without having to create a separate URL for each product ingredient list?Screenshot 2019-07-29 at 22.54.13.pngScreenshot 2019-07-29 at 22.54.29.pngScreenshot 2019-07-29 at 22.54.38.png

 

Thanks!

0 Likes
Jasoliya
Shopify Expert
4124 569 998

Hi @n_bcn 

If you want to add popup then you can use this link

add your description or content on this popup.

Add css in theme.scss file and js in theme.js file

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
n_bcn
Excursionist
17 1 1

Hi

 

Thank you for sending the link.

 

It is not clear to me which part I am to add to theme.scss and which part to add to theme.js?

 

Also, once I have done this how will I add the content to each product description?

 

Thanks

 

0 Likes
Jasoliya
Shopify Expert
4124 569 998

In theme.scss file set all css code and in theme.js file add Js code.

In popup content you can use "{{ product.description }}"

in "{{ product.description }}" you can get product description. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
peterwb
Tourist
7 0 6

How can I make the modal trigger from a hyperlink rather than a button? I don't want ALL my hyperlinks in my Description to be a modal lightbox, but just certain ones... Thanks for your insight!

0 Likes
Jasoliya
Shopify Expert
4124 569 998

Send your store url 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes