Vertical Carousel On Left Of Product Pages

AryavK · ‎12-03-2023

Hi,

How could we have the carousel on dawn theme on the left of the main product image, vertically?

Our website is www.faithandyou.in

like, i dont want this:

i want like

thanks

Theme: refresh

faith&you

Sweet_Savior_3 · ‎12-03-2023

Hello @AryavK

You need to check if your theme offers the settings to change the thumbnails position.

if they are not offering than and you are not familiar with code then you have to contact a developer to make changes for your requirement.

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!

BuccoMa · ‎02-20-2024

Hi @AryavK !

Add this after <head> in theme.liquid and custom it !

<style>
@media only screen and (min-width: 991px) {
    media-gallery.product__media-gallery {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    
    slider-component.slider-mobile-gutter:not(.thumbnail-slider) {
        margin-left: 180px;
    }
    
    slider-component.thumbnail-slider {
        width: 180px;
        position: absolute;
        margin-top: 0;
        top: 0;
        left: 0;
    }
    
    
    .thumbnail-slider ul.thumbnail-list {
        flex-direction: column;
        width: 100%;
        height: 400px;
    }
    
    .thumbnail-slider ul.thumbnail-list li {
        width: 100% !important;
    }
    
    media-gallery.product__media-gallery .thumbnail-slider .slider-button {
        display: none;
    }    
}
</style>

whboutique · ‎05-12-2024

This works well but is there a way so the arrows are above and below the vertical image carousel as opposed to on the right and left of? Also, the arrows don't work if you try to click to view more images. Thank you in advance.

GizmoGuy · ‎08-04-2024

Hey There, Trying to implement the same style. does this work for dawn theme as well?

MRamzan · ‎11-26-2024

You can display vertically all the thumbnails:

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112