Elzburg
-
Posts
4 -
Joined
-
Last visited
Elzburg's Achievements
-
BriWau reacted to a post in a topic:
Size Chart Light Box on Product Page
-
Jaromir reacted to a post in a topic:
Size Chart Light Box on Product Page
-
DesignTrack reacted to a post in a topic:
Size Chart Light Box on Product Page
-
jaydah_moody reacted to a post in a topic:
Size Chart Light Box on Product Page
-
sageandsquare reacted to a post in a topic:
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!!!!!!!!!!!!!!!
-
Move Add to cart button beside Quantity input
Elzburg replied to pottedplant77's topic in Site Design & Styles
Yellow Flower Beach Bag — A Frone Zone Original -
Move Add to cart button beside Quantity input
Elzburg replied to pottedplant77's topic in Site Design & Styles
So, I don't know what I'm doing, but after tinkering with the code for a while this is what I came up with: <style> /* move add to cart button to right of quantity */ .ProductItem:not( .sold-out ) section.ProductItem-details.ProductItem-details--mobile .ProductItem-details-title { display: none; } .ProductItem:not( .sold-out ) .ProductItem-details { display : grid; gap : 2rem; grid-template-columns : repeat( 5, 1fr ); } .ProductItem:not( .sold-out ) .ProductItem-details > * { grid-column : 1 / 6; } .ProductItem:not( .sold-out ) .ProductItem-details .product-quantity-input { grid-column : 1 / 2; } .ProductItem:not( .sold-out ) .ProductItem-details .sqs-add-to-cart-button-wrapper { align-self : center; grid-column : 2 / 6; } /* end move add to cart button to right of quantity */ </style> The final result looks like this: My code fixes the issue from the 7.1 code which doesn't properly create the grid and only centers the "add to cart" button in its own row, still under and not beside the quantity selector. However, my code causes the product gallery to go rogue and stick to the right side of the screen. I fixed this by changing my site styles to move product descriptions to the left since I couldn't for the life of me figure out how to fix this in the code. Second issue with my code, is that it would show the product title twice since it was including both the mobile title and normal title for some reason. I fixed this by removing the mobile title all together since none of my other ideas worked. For me, this is okay, since you can still see the title on mobile by way of the product navigation. See what I mean: A not-so-quick (for me to figure out) and very dirty fix from me.
-
tuanphan reacted to a post in a topic:
Adding an external .HTML page
-
Elzburg reacted to a post in a topic:
How To Install + Dropdown Accordion in a Product Description
-
Elzburg changed their profile photo
-
This worked, oh my goodness!!!! I am so happy, thank you so much. For anyone else who reads this, what you have to do is: Make sure you have the file that you're trying to upload ready and finalized, because you'll have to re-do all these steps every time you update it Open the "Create New Page" menu in the "Pages" section of the Squarespace editor. Scroll down to the "Other" section, and selected the "Link" option Don't type anything yet, but click right on the gear icon On the left, click on "File" Scroll down, click "Upload File" and select your file, (after uploading, make sure you actually select the file to link it, if it's selected you'll see a checkmark beside it) then click "Close" Remember or ctrl+c the link, which should be along the lines of "/s/filename.css" or "/s/filename.html" or "/s/filename.js" etc. You actually don't need to save at this point since the file has already been uploaded to your website, so now you can just exit out without saving your changes Open/Create the page where you want to use your file Open/Create the code block that you want to apply your file to If you're uploading a style sheet, then between the <head> tags, paste this: <link rel="stylesheet" href="/s/filename.css" type="text/css"> Notice that the href will be the same link that you noted in step 6. So, replace it with whatever your link own is. Done!!!!!!!!!!!!!!!!!!!!! Your code block will now be able to reference your external style sheet!!!! If you're uploading Javascript or html, for step 10 I assume you hopefully already know how to reference your file on your own.
