Jump to content

Size Chart Light Box on Product Page

Recommended Posts

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

Posted (edited)

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!
Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted (edited)
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 😅

Edited by inunzi
Posted
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!

  • 8 months later...
Posted

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

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

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

image.thumb.png.ea459d97f43d61fde7d70a86905c9354.png

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

image.thumb.png.cc42fdb1147fe75944c1d55e232039f9.png

 

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

Super mega ultra-rookie web developer.

  • 6 months later...
Posted (edited)
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

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?

image.thumb.png.3ed5dbea1e5099c0ad6207434c632f6d.png

Edited by Lorne17
Posted

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: 

 

Capture.PNG

Posted
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: 

 

Capture.PNG

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.)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

  • 2 years later...
Posted

You can add a sizing chart PDF lightbox to your product details, including Product description and Product additional info section, following this post for step-by-step tutorial: How to add a sizing chart PDF to product details

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.