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:
Go to the page you want to implement your modal/lightbox, and enter Edit mode
Insert a code block
Copy and paste the following code into the code block:
<head>
<style>
</style>
</head>
<body>
</body>
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
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!!!!!!!!!!!!!!!
