Elzburg
-
Posts
4 -
Joined
-
Last visited
Reputation Activity
-
Elzburg got a reaction from BriWau in Size Chart Light Box on Product Page
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!!!!!!!!!!!!!!!
-
Elzburg got a reaction from Jaromir in Size Chart Light Box on Product Page
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!!!!!!!!!!!!!!!
-
Elzburg got a reaction from DesignTrack in Size Chart Light Box on Product Page
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!!!!!!!!!!!!!!!
-
Elzburg got a reaction from jaydah_moody in Size Chart Light Box on Product Page
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!!!!!!!!!!!!!!!
-
Elzburg got a reaction from sageandsquare in Size Chart Light Box on Product Page
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!!!!!!!!!!!!!!!
-
Elzburg reacted to rwp in How To Install + Dropdown Accordion in a Product Description
OHHHH. I think I see the issue.
You might have put some of the CSS in the code injection block.
So delete both codes from above replace with this (code injection)
<script> window.Squarespace.onInitialize(Y, function() { $('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor', 'pointer'); $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').click(function() { if ($(this).nextUntil('h3').is(':hidden')) { $('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp(); $('.markdown-block .sqs-block-content h3').removeClass('ui-open'); $('.markdown-block .sqs-block-content h3').addClass('ui-closed'); $(this).nextUntil('h3').slideDown(); $(this).toggleClass('ui-closed ui-open'); } else { $(this).nextUntil('h3').slideUp(); $(this).toggleClass('ui-closed ui-open'); } }); }); </script> Then add this to Design -> Custom CSS
.markdown-block p { margin-left: 1em; } .markdown-block .ui-closed:before { font-family: monospace; content: "+ "; color: #2DA9C6; } .markdown-block .ui-open:before { font-family: monospace; content: "- "; color: #2DA9C6; } Â
