Size Chart Light Box on Product Page

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!!!!!!!!!!!!!!!