marbleandmilkweed

This worked brilliantly, thank you so much! Is there a way at all to add a title to the product add-ons section? Just one line of text above the add-on cards? Many thanks, as always for your kind help!

Oh dear, sorry for my very late reply, got a little sidetracked! This product is here: https://www.marbleandmilkweed.com/shop/p/roseandtulsifacialtonic-100ml Thank you again so much!

I'm also trying to put my variant dropdown menu and my quantity selection box on the same line, but I think the code above isn't working for me as I have a lot of other CSS for my product details page about the order of the items, including some new CSS after the recent PDP updates. Wondering how to add this in? Thanks so much in advance! This is what I have currently that is helping the elements stay in order: /* ORDER OF PDP description */ #page .ProductItem-details-checkout .ProductItem-details-excerpt { order: 1 !important; } /* variants */ #page .ProductItem-details-checkout .product-variants { order: 2 !important; } /* quantity */ .tweak-product-basic-item-add-to-cart-standalone .ProductItem .ProductItem-quantity-add-to-cart { order: 3 !important; }

This works perfectly, thank you again so much!

I find myself working on this, as well. I'm trying to make the product add-on card as thin as possible, with the thumbnail, the title/price and the + button lined up nicely from left to right, but the + button always seems to want to migrate to the bottom right, and the title/price gravitates towards top left, making the whole box bulkier than it needs to be. Trying to make everything centered between the top and bottom of the box, wondering if you might be able to help? Thank you as always for all your assistance!

Whew, this works perfectly, such a relief, thank you! And if I wanted to add just a bit more space between the elements, what would I change? Especially between the price and the Afterpay and the add-to-cart button? Many, many thanks!

Oh yes, forgot that! Title should be the first element, at the top. Afterpay can be under price and variants just above quantity. https://www.marbleandmilkweed.com/shop/p/rose-geranium-sur-fleurs-hydrosol-mist Thank you again so much!

So the above is the correct order, but whatever change Squarespace just made to PDP is overriding this code. It should be: description variants quantity price add to cart button add-ons Hope this makes sense! Thank you again so much!

Thanks so much for your reply! This is the code that I had there before the latest change that Squarespace made, hoping to get everything back in this order: /** * Switch Order of Product * Details using * Simple Layout **/ #page .ProductItem-details-checkout { display: flex; flex-direction: column; /* Set Orders */ .ProductItem-details-excerpt { order: 1 !important; } .ProductItem-details-checkout .accordion-block { margin-bottom: 30px; order: 2 !important; } .product-variants { order: 3 !important; } .product-quantity-input { order: 4 !important; } .ProductItem-product-price { order: 5 !important; font-family: "Baskervillelightitalic" !important; } .sqs-add-to-cart-button-wrapper { order: 6 !important; } .pdp-product-add-ons{ order: 7 !important; } .sqs-add-to-cart-button-inner { font-family: 'Raleway'; font-size: 13px; } } @media (max-width: 767px) { .ProductItem-details-excerpt { order: 1; } .ProductItem-details-checkout .accordion-block { margin-bottom: 30px; order: 2; } .product-variants { order: 3; } .product-quantity-input { order: 4; } .ProductItem-product-price { order: 5; font-family: "Baskervillelightitalic" !important; } .sqs-add-to-cart-button-wrapper { order: 6; } .pdp-product-add-ons{ order: 7; padding-top: 60px !important; } .sqs-add-to-cart-button-inner { font-family: 'Raleway'; font-size: 13px; } }

Thank you, I appreciate it so much! Here is a product: https://www.marbleandmilkweed.com/shop/p/rosebergamotmoodmist

The new PDP update has completely broken the order of things on my product page, as I was using custom CSS. Wondering if you have any idea how to override the new change to return to the previous formatting?

This seems to have worked! Thank you again so much!

There's still a gap between the sticky product category header and the site header, so the products scroll by underneath what appears as a bar, instead of the two sticky headers being perfectly aligned with each other...

Oh dear, sorry for my very late reply! I'm still seeing the issue on mobile via my ancient iphone SE in both the safari and chrome browsers...

Hmm, have just tried this, but it doesn't seem to work on the gallery blocks in that post...

I've just realized that my summary blocks are doing this automatically in the blog posts, but my gallery blocks are not. For instance in this post, I have 3 photos in a horizontal line in the desktop view, but they get stacked as two next to each other and then one below, on the mobile view, which is a bit awkward, as it leaves a big empty space. As in this post: https://www.marbleandmilkweed.com/journal/2022/7/21/summertea

A summary block, rather!

I have used a few gallery blocks here and there in other blog posts, curious to know what the code would be for also showing those in desktop view. Thanks again so much in advance!

This code worked brilliantly, thank you so much!

Sure! An example of the type of page I'd like to always display in desktop view is: https://www.marbleandmilkweed.com/journal/2024/1/27/anintuitiveshift Thank you again so much for taking a look at this!

The two posts per row on the main blog page is working perfectly! But hoping to disable mobile view on individual blog posts themselves, not on the blog page. I have my posts formatted with 2 photos next to each other and mobile view stacks them, which I don't like. Not sure if this is possible...

Thanks again so much for your help! This new code still makes the header show up with a gap, unfortunately. Very much wishing that Squarespace would simply offer a way to make the product header sticky without code, as this seems to be such an oddly complicated problem...

That seems very likely, as I've added various things over time, not quite understanding how they all fit together. Really appreciate your willingness to take a look at this for me. Here is what's there: /* Show category nav links */ div.nested-category-tree-wrapper { display: flex !important; float: none !important; min-width: 100% !important; max-width: 100% !important; margin-right: 0 !important; position: sticky; position: -webkit-sticky; top: 0; z-index: 9999; background: #FFFFFF; color: #000; border: 1px solid #fff; border-radius: 0px; padding: 10px; font-size: 16px; font-family: 'Baskervillelightitalic'; justify-content: center; align-items: center; } section.products.collection-content-wrapper.products-list { flex-direction: column !important; display: flex; } .nested-category-tree-wrapper>ul { width: 60% !important; display: flex; justify-content: center; align-items: center; flex-wrap: wrap !important; } .nested-category-tree-wrapper>ul li { margin-left: 2vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } a.category-link.root { padding-bottom: 0 !important; padding-top: 6px !important; } /* fix first item space */ li.category-item:first-child a { padding-bottom: 0 !important; } .products.collection-content-wrapper .nested-category-tree-wrapper li:first-child { margin-left: 0 !important; } @media screen and (max-width:767px) { .tweak-products-nested-category-type-top .products.collection-content-wrapper .nested-category-tree-wrapper { justify-content: center !important; align-items: center !important; padding-left: 0 !important; } .tweak-products-nested-category-type-top .products.collection-content-wrapper .nested-category-tree-wrapper>ul { width: 100% !important; } } div.nested-category-tree-wrapper { top: 180px; } @media screen and (max-width:767px) { div.nested-category-tree-wrapper { top: 120px;}}

Thank you as always for your helpful reply! When I add this code, unfortunately, it makes the shop category header no longer sticky...not sure what might be happening.

Oh perfect, thanks so much! The grid-gap works wonderfully! My blog page is here: https://www.marbleandmilkweed.com/journal