Hello! First time Shopify user here. I’m using a stock Spotlight theme, no custom code, just some customizations available out of the box. If a product has images of different heights, selecting a smaller image from the thumbnail carousel will cause the entire image carousel to shift upwards when the main image changes. The thumbnail carousel aligns with the bottom of the current image, and I’d much prefer for it to be static (and center the selected image within the container, if possible). I wasn’t able to identify a setting for this in the built-in customizations for Spotlight, if such a setting exists.
(Perhaps relatedly, I’m somewhat familiar with CSS and HTML, but using the premade themes has me boggled. I understand where to edit the various parameters using CSS, but how do I go about finding the names of the various existing classes to reference? Is there any sort of inspector or documentation that exposes each class’s name within a given theme?)
Grateful for any guidance!
1 Like
Hi @DanielBR
Please share your store URL so that we can have a quick look and help you out with the CSS needed.
Thank you.
Hi Entesta! I’d be happy to. Does it matter if the site is still password protected? I’m still working on getting it set up. https://4dd362.myshopify.com/
Hi @DanielBR please share the password so that I can access the site. You can change it right after the issue is sorted.
I’ve set the password to “entesta”!
Thank you. You can try the following CSS.
This will only apply if the device screen width is higher than 750px. Please feel free to adjust it as per your needs.
@media screen and (min-width: 750px) {
.product-media-container.media-fit-cover, .product-media-container.media-fit-cover .product__modal-opener, .product-media-container.media-fit-cover .media {
height: auto;
max-height: 60dvh; /* adjust it as per your needs - dvh is device viewport height */
}
.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
max-height: 60dvh;
}
}
Do let me know if it works or if you need any additional help.
1 Like
Thank you so much for drafting up the CSS! This didn’t quite achieve what I was hoping for, but I attempted editing it myself and I’m realizing the CSS may be targeting the main, large image (the focused image that’s currently selected). I’m hoping to only alter the position of the carousel of thumbnails.
The CSS you so kindly provided seems to limit the height of the selected image - but the carousel of thumbnails below it still changes its position when selecting different images.
I’d like the large, selected image to maintain its full height (no cropping) just as it does with the default Spotlight theme. However, rather than have the carousel move up or down to maintain a constant margin between itself and the currently selected image, I’d like for the carousel to always remain in the same position (say, for example, 20px up from the bottom of the container) regardless of which image is currently selected. I attempted to do this myself with position:relative and bottom:20px, but this affected the entire image+carousel, whereas I’d like it for it to only alter the carousel itself.
Do you know if this is possible?
Thank you again!!!
I inspected the code of the page and was able to locate the class “thumbnail.slider”, but attempting the following CSS didn’t seem to work 
But this is effectively what I’m hoping to accomplish:
.thumbnail-slider {
position: relative;
bottom: 10px;
}
Funny enough, when I try position: absolute, it causes the entire thumbnail carousel to shrink down to a tiny black box? Thankfully this confirms I’ve identified the right class to be modifying, but I can’t untangle it from the larger image above the carousel
Hi @DanielBR the larger image is placed on top of the thumbnail carousel. If we keep the image same height and set the object-fit to cover it will retail the aspect ratio and further changing the larger image will not shift the content under it (the thumbnail slider).
Please let me know if that would be an ideal solution?
Hi, yes that sounds perfect! If we can set the larger image container to always be a specific height, and center the contents within, such that the carousel stays in the same place, that would be perfect!
Example:
Large image container is 750 px high
Thumbnail carousel stays 10 px below the large image container
Selecting an image in the carousel loads a large image that is 700 px high
The large image centers itself vertically such that there is a 25 px space above, and a 25 px space below
Thumbnail carousel does not change position
If a 650 px height image is selected, it centers itself vertically with a 50 px space above and below, etc
Hi @DanielBR
Sure, you can achieve the same by using the following CSS.
@media screen and (min-width: 750px) {
.product-media-container.media-fit-cover, .product-media-container.media-fit-cover .product__modal-opener, .product-media-container.media-fit-cover .media {
height: auto;
max-height: 60dvh; /* adjust it as per your needs - dvh is device viewport height */
}
.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
height: 60dvh;
object-fit: cover;
}
}
Here is the video for reference. https://youtu.be/LiczMbARPNw
Thank you
Thank you so very much!! This works great. I made a few tweaks and ended up with the following:
@media screen and (min-width: 750px) {
.product-media-container.media-fit-cover,
.product-media-container.media-fit-cover .product__modal-opener,
.product-media-container.media-fit-cover .media {
height: 60dvh;
max-height: 90dvh; /* adjust it as per your needs - dvh is device viewport height */
}
.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
height: 60dvh;
object-fit: contain;
}
}
I realize this is very close to what you sent the first time, I think through our conversation I gained a little bit better understanding of the code. Thank you so much for taking the time and effort to help with this!