Elzburg
-
Posts
4 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Elzburg
-
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.
