Shop Gallery Help: Placement Options? Change buttons?

I am trying to adjust my shop pages so that the gallery shows up on the top, however the only options are left or right. I would also like to change the look of the scroll bar under the slideshow and the slideshow navigation buttons. Thank you for any help!

https://www.torvaterra.com/workshops

Hey @TorvaTerra! have you looked at the full product page layout? It will place your product images at the top without any extra code required 🙂 

@inside_the_squareI did however that presents even more issues :c The full setting doesn't have any customization choices. It makes the images HUGE at the top and crops them:

Gotcha - now that, we can totally fix with code 😎 

This code here will reduce the height of it to 30% of the page height, change up taht 30 to any value you want. The second line will make sure the image isn't cropped. If they are different sizes, there will have to be some space between the image and the container edge because we can't make the container fit the image; we have to code it the other way around. 🙃

Anyhoo - I hope this helps you with your project! And thanks for the video tutorial idea; I'll totally have to add this to my youtube channel 🙌

.pdp-layout-full-width-carousel .pdp-gallery-images{
max-height: 30vh;
}
.pdp-gallery-slides-image{
object-fit:contain!important
}

@inside_the_square Thank you, so far with your help I am closer to what I am looking for! It does a weird thing now though when you click to select the next slide it gets stuck in the middle to a blank white area.

It would be nice to add some padding at the top too. I tried to add a line in but it didn't do anything haha.

https://www.torvaterra.com/workshops/p/spring-fox-photo-workshop

That blank space is lame - let's add a forced width to fix it; play around with the % here until you like the size. You can sneak some padding in here too. You can add these new property and value combos to your original code so it looks like this:

.pdp-layout-full-width-carousel .pdp-gallery-images {
    max-height: 50vh;
    width: 40%;
    padding-top:10px
}

P.S. Those foxes are so dang cute!!!! 😍

@inside_the_square Thank you 🙂

I played with the sizing it just still has some things that aren't right. I feel bad bothering you haha! Without any customization options for the "Full" gallery mode I dont know how to fix the awkward spacing of the description area vs the drop-down for options being so wide apart.

The dream would be for the gallery to be a single stationary image at the top center, then the arrows would slideshow through each single photo without cropping them.

Then the description would be directly under that gallery, followed by the drop down to select the session.

It feels so simple yet I cannot figure it out :C