creedon Posted November 26, 2020 Posted November 26, 2020 @Tarta I appreciate the offer. A like and an up-vote are always appreciated! Like is on lower right of a post. Up-vote is in the upper left. Tarta 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
joeystephensmusic Posted February 5, 2021 Posted February 5, 2021 @creedon Your code for this is beautiful, however, I'm curious if you could help with my desired layout. 1. In my "DesktopImage" photo, I'd like to switch the color and size buttons. I'd like Size to be on top of Color. 2. I'd like this to be the same on my mobile as well. 3. The product description on my Desktop view is below the dollar amount and above the Color button(which soon will hopefully be the Size Button). However, on my mobile view, the product description moves to the bottom(see other mobile photos attached). I'd love for the mobile view to be the same as the Desktop view with the product description below the dollar amount and above the newly located Size Button. Can these 3 things be done? Thanks a million! Joey
creedon Posted February 6, 2021 Posted February 6, 2021 @joeystephensmusic Please post the URL for the product page you show. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
joeystephensmusic Posted February 6, 2021 Posted February 6, 2021 joeystephensmusic.com password: helpmecreedon
creedon Posted February 6, 2021 Posted February 6, 2021 @joeystephensmusic Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. <style> .ProductItem-details .product-variants { display : -webkit-box; display : -ms-flexbox; display : flex; -webkit-box-orient : vertical; -webkit-box-direction : reverse; -ms-flex-direction : column-reverse; flex-direction : column-reverse; } .ProductItem-details .ProductItem-details-excerpt { -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } </style> This is for a v7.1 site. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
joeystephensmusic Posted February 6, 2021 Posted February 6, 2021 "We're not worthy! We're not worthy!" Worked perfectly. Thank you! creedon 1
Guest Posted May 14, 2021 Posted May 14, 2021 Hi @tuanphan Thank you for posting the code! I am building my site right now, and used the 7.1 code to move the "add to cart" button to the top, and then I used your posted code to move the button to the side (below) .ProductItem-details-checkout { display: flex !important; justify-content: center; align-items: center; } However, when I did the second code, it moved the price to the center (see screenshot). Can you help me align both to the left? I'm still on a trial version, so I can't share the site, but is there anyway you can help with this?
creedon Posted May 14, 2021 Posted May 14, 2021 39 minutes ago, HaleyLM said: I'm still on a trial version, so I can't share the site, but is there anyway you can help with this? Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
Guest Posted May 17, 2021 Posted May 17, 2021 On 5/14/2021 at 12:31 PM, creedon said: Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Hi @creedon Sorry for the delay. https://pufferfish-wolverine-zpym.squarespace.com/shop/p/2003-fender-telecaster-left-handed Password: Boneyard!
creedon Posted May 18, 2021 Posted May 18, 2021 @HaleyLM I refer you to the following post. It takes care of the issue you have run into. You can read the May 17th post for the explanation. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
DevonHarris Posted June 3, 2021 Posted June 3, 2021 @tuanphan @creedon do you know how I can target the product name? Currently SS is putting the product NAME second, which I'm not sure why. I'm hoping to style it exactly as how it appears in their image attached. With the product details floating right, and images floating left. Hoping you can assist! www.BAHFineArt.com thanks again!
creedon Posted June 4, 2021 Posted June 4, 2021 @DevonHarris Can you post the url to a page where the product name is appearing second? One product page I looked at seemed normal to me. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
DevonHarris Posted June 4, 2021 Posted June 4, 2021 @creedon I fixed it with some code I found on another forum thread...however do you know the CSS I can use to target the title, both on-product detail pade and on shop page? Would love to style it a little better on each, separately. Thank you so much!!
creedon Posted June 4, 2021 Posted June 4, 2021 @DevonHarris For the product grid title. .collection-type-products .grid-title For detail. .collection-type-products .ProductItem-details h1.ProductItem-details-title DevonHarris 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
DevonHarris Posted June 29, 2021 Posted June 29, 2021 @tuanphan @creedon can you check out www.BAHFineArt.com? I’d like the title, subtitle, price, add to Cart button, THEN description in that order but nothing I do seems to change it 😞. Thanks for any feedback you can provide!
creedon Posted June 29, 2021 Posted June 29, 2021 @DevonHarris Please see the following. The code doesn't reflect the order you need but should give you an idea of the code needed. If you need further help, hit us up. Let us know how it goes. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
breesmith12010 Posted August 19, 2021 Posted August 19, 2021 On 11/24/2020 at 8:12 PM, creedon said: @Tarta Replace your code with the following. <style> /* begin reorder ProductItem-details-checkout */ /* There is something odd going on with v7.1 CSS as of 11/24/20 .ProductItem-details-checkout has a rule of display block but sub elements have order properties on them. The first bit of CSS unsets those items for a clean slate returning the elements to natural order. */ .ProductItem-details .product-quantity-input, .ProductItem-details .product-variants, .ProductItem-details .ProductItem-details-excerpt, .ProductItem-details .ProductItem-product-price, .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-ordinal-group: unset; -moz-box-ordinal-group: unset; -ms-flex-order: unset; -webkit-order: unset; order: unset; } /* begin change order of elements */ .ProductItem-details .ProductItem-details-excerpt { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } /* end change order of elements */ .ProductItem-details .ProductItem-details-checkout { display: -webkit-box; display: -ms-flexbox; display: flex; } /* end reorder ProductItem-details-checkout */ /* begin change spacing of ProductItem-details-checkout */ .ProductItem-details .ProductItem-details-checkout { grid-gap: 13px; gap: 13px; } .ProductItem-details .product-quantity-input, .ProductItem-details .ProductItem-product-price, .ProductItem-details .sqs-add-to-cart-button-wrapper, .ProductItem-details .variant-option { margin-bottom: 0; } .ProductItem-details .ProductItem-details-excerpt p:first-child { margin-top: 0; } /* end change spacing of ProductItem-details-checkout */ /* begin product variants two-up */ .ProductItem-details .product-variants { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 13px; gap: 13px; } /* end product variants two-up */ </style> This is for a v7.1 site and is specific to Tarta's needs. I'm hesitant to change the spacing under the price as there is some code hidden there that will pop up when certain circumstances are met. If I change the spacing it may look even worse space wise when those conditions are met. Let us know how it goes. Hello @creedon! I used your code above (THANK YOU!) but now my product image & thumbnail carousel is displaying really low on the page - do you know how I can fix this? Thank you! Here is a link to a product page - https://www.visitplanetjoy.com/shop/p/abstract-rainbow-recycled-high-waisted-bikini-top-bottom-set
creedon Posted August 19, 2021 Posted August 19, 2021 1 hour ago, breesmith12010 said: I used your code above (THANK YOU!) but now my product image & thumbnail carousel is displaying really low on the page - do you know how I can fix this? My code doesn't change the gallery. Change your Content Alignment to Top. Go to a products detail. Edit Design. Change the alignment. Save. Let us know how it goes. breesmith12010 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
breesmith12010 Posted August 21, 2021 Posted August 21, 2021 On 8/18/2021 at 9:13 PM, creedon said: My code doesn't change the gallery. Change your Content Alignment to Top. Go to a products detail. Edit Design. Change the alignment. Save. Let us know how it goes. Thank you so much - I can't believe I missed that! 🤦♀️ creedon 1
asassi Posted September 30, 2021 Posted September 30, 2021 On 6/8/2020 at 5:42 PM, tuanphan said: Add to Home > design > Custom CSS .product-quantity-input { order: 2 !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { order: 3 !important; } .ProductItem-details-excerpt { order: 4 !important; } .product-price { order: 5 !important; } Hi @tuanphan I'm trying to do a similar thing. I'd like to move my product options dropdown box and purchase button up to sit below the price. Order would be 1. product name 2. price 3. product option 4. add to cart 5. product description I'm working in 7.0 url is annasassi.com Thanks
tuanphan Posted October 2, 2021 Posted October 2, 2021 On 9/30/2021 at 7:07 PM, asassi said: Hi @tuanphan I'm trying to do a similar thing. I'd like to move my product options dropdown box and purchase button up to sit below the price. Order would be 1. product name 2. price 3. product option 4. add to cart 5. product description I'm working in 7.0 url is annasassi.com Thanks Add to Settings > Advanced > Code Injection > Footer /* variant */ .product-variants { order: 2 !important; } /* purchase */ .sqs-add-to-cart-button-wrapper { order: 2 !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
asassi Posted October 2, 2021 Posted October 2, 2021 5 minutes ago, tuanphan said: Add to Settings > Advanced > Code Injection > Footer /* variant */ .product-variants { order: 2 !important; } /* purchase */ .sqs-add-to-cart-button-wrapper { order: 2 !important; } @tuanphan do I need to add the original code as well? I added the code to the code injector footer but nothing changed Thanks
tuanphan Posted October 3, 2021 Posted October 3, 2021 On 10/2/2021 at 9:03 AM, asassi said: @tuanphan do I need to add the original code as well? I added the code to the code injector footer but nothing changed Thanks sorry, missing style tag, use this code <style> /* variant */ .product-variants { order: 2 !important; } /* purchase */ .sqs-add-to-cart-button-wrapper { order: 2 !important; } </style> asassi 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
asassi Posted October 4, 2021 Posted October 4, 2021 19 hours ago, tuanphan said: sorry, missing style tag, use this code <style> /* variant */ .product-variants { order: 2 !important; } /* purchase */ .sqs-add-to-cart-button-wrapper { order: 2 !important; } </style> Legend works perfectly 🙂
francesca_ Posted October 7, 2021 Posted October 7, 2021 (edited) I'm on 7.1 and would like the product page to display these one above another on desktop: 1. Product name, 2. Price, 3. Size selection, 4. Quantity field, 5. Add to cart, 6. Description @creedon I am not sure how to adapt your code to do this. It's similar to the first request in this post, but it's been edited to a different order and I don't want the qty next to the add to cart. My site: https://francescaelisia.com/shop/p/landscape-i-art-print Thanks so much! 😊 Edited October 7, 2021 by francesca_
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment