Decreasing / reducing space between the product title and top of the image on product details page

Hi everyone,

I'm looking for some help with product details pages, I have a few issues but this is the main one (photo below):

1.

I need to reducing the space between the product title and top of the image on product details page, for desktop sites, it's fine on mobile.

I'm using Squarespace 7.1 with template name: Stanton. Product details pages use the “simple” image layout (because that’s the only one that intuitively seems to navigate additional product images and display thumbnails but I'm open to suggestions that don't include code if they exist).

I do have some basic code changes on my site already but can't remember where I go to put it in to apply sitewide so if you could remind me of that, this would be amazing thank you!

2.

I'd also like to change my complex variants to add up as you select options, i've seen the paid extension for that which I'll buy this weekend if nobody thinks that's a bad idea, but i'd like to code my desktop site to show the price near the add to cart button (not as annoying on mobile as the options are close together, but soooo frustrating for listings that need a lot of text on product details pages). If anyone knows code for that it'd be great too!

3. (rant warning)

I'm so frustrated by the lack of ability to change things like spacing and font use sitewide OR area-only (like details pages only) with ease on Squarespace lately, my fonts are also doing weird things (changing the size of paragraph style 2 does absolutely nothing and I'm in the process of combing through formatting issues that pasted in when I copied details between listings without pasting as plain text - sigh). When I change formatting on product details page to look good, it changes somewhere else and that looks terrible etc. Thanks for the vent haha. 

#1. Add to Design > Custom CSS

@media screen and (min-width:992px) {
/* align image product title */
section.product-details.ProductItem-details {
    padding-top: 0px !important;
}}

#2. What should it look like on desktop/mobile?

#3. Which page/element you want to change style/padding..?

On 5/8/2022 at 7:05 PM, tuanphan said:

#1. Add to Design > Custom CSS

@media screen and (min-width:992px) {
/* align image product title */
section.product-details.ProductItem-details {
    padding-top: 0px !important;
}}

#2. What should it look like on desktop/mobile?

#3. Which page/element you want to change style/padding..?

You are amazing thank you so much, that worked a treat!!! Didn't change on mobile which was all good anyway, and fixed the spacing on all my product details pages! THANK YOU THANK YOU!!

Still on the product details pages, can I ask if there is a way to make the thumbnails larger, and possibly the arrows clickable? (again only an issue on desktop for both of those). It seems so unintuitive to have an arrow overlay and not be able to click next with it!

2. For the complex variants (that same page is a good example, i'll attach some mobile vs desktop screen grabs) currently the mobile version of the site at least puts the drop down boxes up the top where it has the price, so although it's not adding up as you go, at least you can see the total once you select them all, before adding to cart. On the desktop site the price is currently at the top, but variant dropdowns require scrolling way downnnnnnn to below all the description text. So when you select the variants you don't see anything change, and can't tell the price unless you scroll all the way back to the top. This kind of thing is just bad design and as a consumer I would literally click out and never return if a site did that. Its a pain. Do you think I should just buy this extension? I'm happy to pay but worried it won't really solve the issue.

Even if I do, I think i'll still need more code to move the actual price, to just above the Add to Cart button, on both desktop and mobile, that makes the most sense to me?

3. I was trying to restyle my product pages, and wanted to add a 3rd font size, they are currently paragraph 1 and 3 because paragraph 2 style doesn't change anything when applied to product pages BUT randomly does change things on the homepage. So when I change the size of paragraph 2 then apply it to the product pages absolutely nothing changes, then I'll click somewhere like the blog and see that the description at the top changed size or some other thing. I wish you could either style everything independently EXCEPT product pages which had easy to apply and change styles, OR that changing styles and sizes was limited to the page type, ie blog or products or contact page etc.

Thank you again for all your help even if I only sort that first alignment thing and the variant issue i'd be so happy!

#1. Add this CSS

/* Make arrows product clickable */
.ProductItem-gallery-carousel-controls.enable-on-first-image-load.enabled {
    pointer-events: initial !important;
}
/* Increase thumbnails size */
@media screen and (min-width:992px) {
.tweak-product-basic-item-thumbnail-placement-side .ProductItem-gallery .ProductItem-gallery-scroll {
    width: 200px;
}
.ProductItem-gallery-thumbnails-item {
    width: 100%;
    height: auto !important;
}
}

#2. I haven't used that plugin. You try ask @paul2009 (plugin author). You can contact on his site to get faster answer

#3.

On 5/11/2022 at 7:20 PM, tuanphan said:

#1. Add this CSS

/* Make arrows product clickable */
.ProductItem-gallery-carousel-controls.enable-on-first-image-load.enabled {
    pointer-events: initial !important;
}
/* Increase thumbnails size */
@media screen and (min-width:992px) {
.tweak-product-basic-item-thumbnail-placement-side .ProductItem-gallery .ProductItem-gallery-scroll {
    width: 200px;
}
.ProductItem-gallery-thumbnails-item {
    width: 100%;
    height: auto !important;
}
}

#2. I haven't used that plugin. You try ask @paul2009 (plugin author). You can contact on his site to get faster answer

#3.

THANK YOU this is brilliant, you've fixed almost all my worst issues! I'll email paul through his site to check re the plugin. THANKS SO SO MUCH!