Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Size Chart Light Box on Product Page


neeenp

Question

8 answers to this question

Recommended Posts

  • 0
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 😁!

Link to comment
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
Link to comment
  • 0
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!

Link to comment
  • 0

 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.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...