Arch Posted June 8, 2020 Share Posted June 8, 2020 Site URL: http://www.arch-worldwide.com/shop-all Hello, Is there a way to move the variant and quantity box + Add To Cart button above the product descriptions? I would like to have the size selector and quantity box and add to cart box move to below the price on here so that customers don't have to scroll down for the add to cart button. Link to comment
jpeter Posted June 8, 2020 Share Posted June 8, 2020 You can add the following CSS: @media screen and (min-width: 768px ) { .ProductItem-details .ProductItem-details-checkout { display: flex; } } Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
Arch Posted June 9, 2020 Author Share Posted June 9, 2020 oh yaaaay it worked thank you so much!!!! 15 hours ago, jpeter said: You can add the following CSS: @media screen and (min-width: 768px ) { .ProductItem-details .ProductItem-details-checkout { display: flex; } } Link to comment
Arch Posted June 9, 2020 Author Share Posted June 9, 2020 @jpeter Hiya, sorry can I ask is there a way to reduce the spacing between the top of the shop page and the header? Link to comment
jpeter Posted June 9, 2020 Share Posted June 9, 2020 5 hours ago, Arch said: @jpeter Hiya, sorry can I ask is there a way to reduce the spacing between the top of the shop page and the header? You can add this CSS to align it with the image: media screen and (min-width: 768px) .tweak-product-basic-item-content-alignment-top .ProductItem-details { padding-top: 0; } Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
Arch Posted June 10, 2020 Author Share Posted June 10, 2020 19 hours ago, jpeter said: You can add this CSS to align it with the image: media screen and (min-width: 768px) .tweak-product-basic-item-content-alignment-top .ProductItem-details { padding-top: 0; } Oh but is there a way to move the whole page, including the image up towards the header too? Link to comment
jpeter Posted June 10, 2020 Share Posted June 10, 2020 @Arch You could add the following CSS to reduce the top padding of the entire section: .products.collection-content-wrapper { padding-top: 0; } Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
Arch Posted June 12, 2020 Author Share Posted June 12, 2020 On 6/8/2020 at 7:49 PM, jpeter said: You can add the following CSS: @media screen and (min-width: 768px ) { .ProductItem-details .ProductItem-details-checkout { display: flex; } } @jpeter Sorry to bother you again, is it possible to put text in between the Add to Cart button and the variant selector? Or add a secondary title under the product title as shown below? Link to comment
jpeter Posted June 13, 2020 Share Posted June 13, 2020 @Arch You could add the following JavaScript and CSS code below. Just update the variables, BUTTON_PRETEXT_HTML and TITLE_SUBTEXT_HTML, values in the JavaScript code. The BUTTON_PRETEXT_HTML will add the text before the "Add To Cart" button with a class of sqs-add-to-cart-button-pretext. The TITLE_SUBTEXT_HTML will add the text after the title with a class .ProductItem-details-title. You can then use CSS to style. CSS: .ProductItem-details-title-subtext { order: 2; } .ProductItem-details-title-subtext p { margin-top: 0; margin-bottom: 2rem; } .sqs-add-to-cart-button-pretext p { margin-bottom: 2rem; } JavaScript: (function(document){ // Edit HTML between the quotes. var BUTTON_PRETEXT_HTML = '<p><a href="#">View size guide</a></p>'; var TITLE_SUBTEXT_HTML = '<p>Rumba red</p>'; /**************************************************************** * DO NOT MODIFY CODE BELOW, unless you know what you're doing. ****************************************************************/ // Execute code based on if it's in the header or footer if(document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ var buttonContainer = document.querySelector('.sqs-add-to-cart-button-wrapper'); var productTitle = document.querySelector('.ProductItem-details-title'); var div; if(productTitle) { div = document.createElement('div'); div.setAttribute('class', 'ProductItem-details-title-subtext'); div.innerHTML = TITLE_SUBTEXT_HTML; productTitle.parentNode.insertBefore(div, productTitle.nextElementSibling); } if(buttonContainer) { div = document.createElement('div'); div.setAttribute('class', 'sqs-add-to-cart-button-pretext'); div.innerHTML = BUTTON_PRETEXT_HTML; buttonContainer.insertBefore(div, buttonContainer.firstChild); } } })(document); Make sure you add the code between <script> tags, example: <script> // Add JS code </script> See article on how to add JavaScript https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
Arch Posted June 15, 2020 Author Share Posted June 15, 2020 omgggg woooow!!!! So just to clarify, if I want to change the Title subtext for each product, how would I inject this? Do I inject into the settings or the page header injection section? And how would it change for each product? On 6/13/2020 at 5:33 AM, jpeter said: @Arch You could add the following JavaScript and CSS code below. Just update the variables, BUTTON_PRETEXT_HTML and TITLE_SUBTEXT_HTML, values in the JavaScript code. The BUTTON_PRETEXT_HTML will add the text before the "Add To Cart" button with a class of sqs-add-to-cart-button-pretext. The TITLE_SUBTEXT_HTML will add the text after the title with a class .ProductItem-details-title. You can then use CSS to style. CSS: .ProductItem-details-title-subtext { order: 2; } .ProductItem-details-title-subtext p { margin-top: 0; margin-bottom: 2rem; } .sqs-add-to-cart-button-pretext p { margin-bottom: 2rem; } JavaScript: (function(document){ // Edit HTML between the quotes. var BUTTON_PRETEXT_HTML = '<p><a href="#">View size guide</a></p>'; var TITLE_SUBTEXT_HTML = '<p>Rumba red</p>'; /**************************************************************** * DO NOT MODIFY CODE BELOW, unless you know what you're doing. ****************************************************************/ // Execute code based on if it's in the header or footer if(document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ var buttonContainer = document.querySelector('.sqs-add-to-cart-button-wrapper'); var productTitle = document.querySelector('.ProductItem-details-title'); var div; if(productTitle) { div = document.createElement('div'); div.setAttribute('class', 'ProductItem-details-title-subtext'); div.innerHTML = TITLE_SUBTEXT_HTML; productTitle.parentNode.insertBefore(div, productTitle.nextElementSibling); } if(buttonContainer) { div = document.createElement('div'); div.setAttribute('class', 'sqs-add-to-cart-button-pretext'); div.innerHTML = BUTTON_PRETEXT_HTML; buttonContainer.insertBefore(div, buttonContainer.firstChild); } } })(document); Make sure you add the code between <script> tags, example: <script> // Add JS code </script> See article on how to add JavaScript https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript Link to comment
RyanDejaegher Posted June 15, 2020 Share Posted June 15, 2020 @Arch you'll want to add that code above fo Settings -> Advanced -> Code Injection -> Footer I could be wrong but I don't believe you'll be able to individually customize the Title subtext for each product without further customization. This code would be applying the same changes across all products. Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Arch Posted June 15, 2020 Author Share Posted June 15, 2020 8 minutes ago, ryandejaegher said: @Arch you'll want to add that code above fo Settings -> Advanced -> Code Injection -> Footer I could be wrong but I don't believe you'll be able to individually customize the Title subtext for each product without further customization. This code would be applying the same changes across all products. Ahh got it, thanks so much!!! I can still use the add to cart pretext though, I tried to add the javascript in without the var title subtext line but now the button pretext isn't showing up too, do you know why? thanks so much!!!!! you're a star! Link to comment
RyanDejaegher Posted June 15, 2020 Share Posted June 15, 2020 Hey @Arch looking at the site I can see the button pre text It's sitting above the button Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Arch Posted June 15, 2020 Author Share Posted June 15, 2020 @ryandejaegher yes I managed to do it by removing "Rumba red" from var TITLE_SUBTEXT_HTML = '<p>Rumba red</p>'; but if I remove the whole line, the whole thing doesn't work haha which is weird. anyhow i managed to get round it by leaving it in without the Rumba red. Thank you!!! Link to comment
jpeter Posted June 15, 2020 Share Posted June 15, 2020 @Arch Instead of placing the JS code in the footer, you should be able to update each product by adding the JS code as a code block under the Additional Info tab for each product, see video example: QHyQ9XfVlx.mp4 Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
Arch Posted June 15, 2020 Author Share Posted June 15, 2020 @jpeter OMG THIS WORKS A DREAM!! @ryandejaegher YOU GUYS ARE AMAZING AND HAVE MADE SOMETHING I THOUGHT IMPOSSIBLE POSSIBLE, THANK YOU SO MUCH, PLEASE LET ME KNOW HOW I CAN THANK YOU GUYSSSS!! Do you think it will be possible to add this additional info into the checkout cart like below or is that too much? XD Link to comment
RyanDejaegher Posted June 15, 2020 Share Posted June 15, 2020 @jpeter might have an idea but i'm not seeing any ability to pull in the color info to the cart Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
jpeter Posted June 15, 2020 Share Posted June 15, 2020 On 6/15/2020 at 9:21 AM, Arch said: Do you think it will be possible to add this additional info into the checkout cart like below or is that too much? XD @Arch If you want to add the color to the checkout, you should do the following: 1. Create a new variant called Color and give all the options the same color, see screenshot: 2. Use the follow JS code below. This will: automatically choose the color option as the value for the user hide the new select list created by new variant option dynamically add the color below the title (no need to add update the color in the JS code as before) for products with only 1 variant, fill in the empty string value of the TITLE_SUBTEXT_HTML variable Doing it this way should show the color on at the checkout. (function(document){ // Edit HTML between the quotes. var BUTTON_PRETEXT_HTML = '<p><a href="#">View size guide</a></p>'; // Fill in the empty string below with HTML for items that only have one variant. // e.g. var TITLE_SUBTEXT_HTML = '<p>White</p>'; var TITLE_SUBTEXT_HTML = ''; /**************************************************************** * DO NOT MODIFY CODE BELOW, unless you know what you're doing. ****************************************************************/ // Execute code based on if it's in the header or footer if(document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ addClosestPolyfill(); var buttonContainer = document.querySelector('.sqs-add-to-cart-button-wrapper'); var productTitle = document.querySelector('.ProductItem-details-title'); var colorSelectField = document.querySelector('[data-variant-option-name="Color"]'); var div, color; if((TITLE_SUBTEXT_HTML || colorSelectField) && productTitle) { if(colorSelectField){ // Auto select the color as the default value for the Color field color = colorSelectField.options[1].value; colorSelectField.value = color; triggerChange(colorSelectField); // Hide the Color field from the user. colorSelectField.closest('.variant-option').style.display = 'none'; } // Create div to add our HTML to and add it after the title div = document.createElement('div'); div.setAttribute('class', 'ProductItem-details-title-subtext'); div.innerHTML = TITLE_SUBTEXT_HTML || '<p>' + color + '</p>'; productTitle.parentNode.insertBefore(div, productTitle.nextElementSibling); } if(buttonContainer) { div = document.createElement('div'); div.setAttribute('class', 'sqs-add-to-cart-button-pretext'); div.innerHTML = BUTTON_PRETEXT_HTML; buttonContainer.insertBefore(div, buttonContainer.firstChild); } } function triggerChange(el) { if (typeof(Event) === 'function') { // modern browsers el.dispatchEvent(new Event('change')); } else { // for IE and other old browsers // causes deprecation warning on modern browsers var evt = window.document.createEvent('UIEvents'); evt.initUIEvent('change', true, false, window, 0); el.dispatchEvent(evt); } } function addClosestPolyfill(){ if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } if (!Element.prototype.closest) { Element.prototype.closest = function(s) { var el = this; do { if (Element.prototype.matches.call(el, s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); return null; }; } } })(document); Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
Arch Posted June 16, 2020 Author Share Posted June 16, 2020 @jpeter omg woooow it works!!! However, I'm still seeing the colour block on the product page, is there a way to hide it further? Also, the colour option is still available on the quick view which also doesn't show the variant colour. Could we hide the colour option and include the colour under the title in Quick View too? The colour also doesn't seem to show up for items that only have one variant, it does show up in the shopping cart though!! Link to comment
jpeter Posted June 16, 2020 Share Posted June 16, 2020 6 hours ago, Arch said: @jpeter omg woooow it works!!! However, I'm still seeing the colour block on the product page, is there a way to hide it further? Also, the colour option is still available on the quick view which also doesn't show the variant colour. Could we hide the colour option and include the colour under the title in Quick View too? The colour also doesn't seem to show up for items that only have one variant, it does show up in the shopping cart though!! @Arch Updated the code above to hide the Color option and include the TITLE_SUBTEXT_HTML variable as an empty string value which can be filled in for products that only have 1 variant. Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
Arch Posted June 16, 2020 Author Share Posted June 16, 2020 @jpeter Awesome it hides the colour option! But when I fill in the variable, it will appear the same on all the products that only have 1 variant right? Link to comment
jpeter Posted June 16, 2020 Share Posted June 16, 2020 1 hour ago, Arch said: @jpeter Awesome it hides the colour option! But when I fill in the variable, it will appear the same on all the products that only have 1 variant right? @Arch Not sure what you mean by "it will appear the same on all the products", so you should only need to fill in TITLE_SUBTEXT_HTML for the products that have 1 variant because it looks like Squarespace doesn't add a select field in those instances. Otherwise, it'll use the value from the Color select field if there is one. Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
Arch Posted June 17, 2020 Author Share Posted June 17, 2020 @jpeter For example, when I put in "white", all products with only 1 variant show White, including ones that are not white: It has also made all my other products that do have more than 1 variant show White too: I now also need to add a different size chart to each product, so would it be better for me to inject the code into the product additional information again? Link to comment
jpeter Posted June 18, 2020 Share Posted June 18, 2020 @Arch yeah you'll need to paste the code into each products Additional Information tab, not via Code Injection in the header or footer, and change the variables accordingly. Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.