Vertical Carousel On Left Of Product Pages

Vertical Carousel On Left Of Product Pages

AryavK
Trailblazer
224 9 32

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: 

AryavK_0-1701592298791.png

 

i want like 

AryavK_1-1701592298865.png

 

 

thanks 

Theme: refresh 

faith&you
Replies 3 (3)

Sweet_Savior_3
Shopify Partner
1262 101 127

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
Tourist
7 1 0

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
Tourist
7 0 1

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.