Size Chart Light Box on Product Page

Site URL: https://ellipsoid-ferret-9wnf.squarespace.com/config/pages/5f7ded8a0724c83b352c6cbd/categories/5f7ded8a0724c83b352c6cc1

Hi There,

I'd like to add a pop-up image linked by text within my product pages. Basically a size chart that will display when the text is clicked on. I've tried a few different codes that didn't quite achieve what I'm looking for. Thanks for your help!

6 hours ago, neeenp said:

Site URL: https://ellipsoid-ferret-9wnf.squarespace.com/config/pages/5f7ded8a0724c83b352c6cbd/categories/5f7ded8a0724c83b352c6cc1

Hi There,

I'd like to add a pop-up image linked by text within my product pages. Basically a size chart that will display when the text is clicked on. I've tried a few different codes that didn't quite achieve what I'm looking for. Thanks for your help!

Great news! Sqaurespace themes created a size chart plugin that works on sqaurespace 7.0-7.1 version templates. Note: it’s pretty pricy, but it looks like this is what your are looking for. Just click the link here:https://www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin

theres 2 different licenses. 
1. standard $49

2. business $147

There’s more info, with a installation guide on how to add the plugin to your site! Good luck, and I hope this is what you are looking for 😁!

If you have a budget, use this plugin.

or free code

with this plugin, to insert size chart you will

• Install Plugin
• Create a page at Pages > Not Linked.
• Insert Size Chart into the newly created page.
• Insert the text link where you want the size chart to appear on the product.
• For example, if you want when you click on a text link in Product Description or Product Additional Info, the size chart will appear, you will need to insert a text link into the Product Description/Aditional Info >> Insert the page url (the page you created in above) according to a special rule that the plugin has given (there is a very detailed instruction file when you have downloaded the plugin to your computer)
• Done!

3 hours ago, tuanphan said:

If you have a budget, use this plugin.

or free code

Im sorry to bother you tuan, but do codepen codes work with sqaurespace? Because I tried a code there and it didn’t work.

12 hours ago, inunzi said:

Im sorry to bother you tuan, but do codepen codes work with sqaurespace? Because I tried a code there and it didn’t work.

I use a lot of code there. Sometimes some code needs extra libraries. If you look closely, you will see the gear icon in the upper left corner of the box. Click on it to see if the code needs any additional libraries.

2 hours ago, tuanphan said:

I use a lot of code there. Sometimes some code needs extra libraries. If you look closely, you will see the gear icon in the upper left corner of the box. Click on it to see if the code needs any additional libraries.

Oooh! So do you think that code pen can help me and others with a lot of code work? Because I was thinking of helping others with coding on their sites so that I can get a little extra profit for products to sell for my brand, but I’m not a genius like you are at coding 😅. 

On 10/26/2020 at 1:07 AM, inunzi said:

Great news! Sqaurespace themes created a size chart plugin that works on sqaurespace 7.0-7.1 version templates. Note: it’s pretty pricy, but it looks like this is what your are looking for. Just click the link here:https://www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin

theres 2 different licenses. 
1. standard $49

2. business $147

There’s more info, with a installation guide on how to add the plugin to your site! Good luck, and I hope this is what you are looking for 😁!

thank you!

6 hours ago, neeenp said:

thank you!

No problem! Did this work for you?

 Here is a link to code to a size chart I made. Feel free to use 🙂

https://codepen.io/ellalalaa/pen/WNjGZNM

• View demo: https://frone.zone/shop-mens-unisex/frone-zone-embroidered-short-sleeve-unisex-t-shirt-1

This is a modal/lightbox with a pre-built size guide. It uses assets from w3schools.com (w3 CSS) and printful.com (images and text). It features customizable CSS that you can implement as an external style sheet to style all of your size charts across your website at once, or just include it in your code block (tutorial below). It is completely mobile responsive.

Since it took me foooorever to make this and iron out all the kinks, I want to help other people out who see this so they don't have to 1. spend money and/or 2. slave away at this like I did.

Step-by-step implementation:

1. Go to the page you want to implement your modal/lightbox, and enter Edit mode
2. Insert a code block
3. Copy and paste the following code into the code block:

4. <head>
     <style>
       
     </style>
   </head>
   
   <body>
     
   </body>

5. Open this link: https://codepen.io/ellalalaa/pen/WNjGZNM, copy all of the code in the HTML section, and paste it in the middle of your <body></body> tags
6. Go back to the link, copy all of the code in the CSS section, and paste it in the middle of the <style></style> tags

Customization:

To change the styling (text colours, background colours, font sizes, etc.) of the size chart, try to find the class of the section you want to edit by looking at the <body>/HTML code, and then find that class in the <style>/CSS code to edit the property you desire

To edit the content of the size chart, look in the <body>/HTML code to find the section you want to edit.

Why did I write this whole manual? ... This is how I procrastinate doing work... I hope this helps someone!!!!!!!!!!!! I don't understand why in the world a commerce website maker doesn't have a built-in size chart!!!!!!!!!!!!!!!

On 7/10/2021 at 1:07 PM, Elzburg said:

 Here is a link to code to a size chart I made. Feel free to use 🙂

https://codepen.io/ellalalaa/pen/WNjGZNM

• View demo: https://frone.zone/shop-mens-unisex/frone-zone-embroidered-short-sleeve-unisex-t-shirt-1

I just want to say THANK YOU!  This is amazing and much much appreciated!

One question, it is saying on mine there is "Script Disable".  Where is that script that I assume I need to put into my Code Injection settings?

Ok, sorry for another post, but I did save it and the script disabled went away, however when you go to my site and click SIZE GUIDE the lightbox doesn't work.  I assume I need to put something in code injection?  

• www.activestatedesigns.squarespace.com
• PW: SiteTest

This is what it does when "SIZE GUIDE" is clicked: 

On 1/18/2022 at 9:27 AM, Lorne17 said:

Ok, sorry for another post, but I did save it and the script disabled went away, however when you go to my site and click SIZE GUIDE the lightbox doesn't work.  I assume I need to put something in code injection?  

• www.activestatedesigns.squarespace.com
• PW: SiteTest

This is what it does when "SIZE GUIDE" is clicked: 

 

Can you share link to product where you added size guide? We cancheck easier

Also, you can also use this lightbox plugin. We usually use it to add size guide lightbox, easy to install/customize.

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)

On 1/19/2022 at 2:53 AM, tuanphan said:

Can you share link to product where you added size guide? We cancheck easier

 

Sorry, it's actually in my footer.  I was testing it there first, when I got it to work I will put it on all my product pages...I have a lot of products haha!