Replace dots with thumbnails on product page image slider for mobile - Prestige Theme ?

[dtmp97]

Hi there,

By default on Prestige Theme, on product page (mobile), image slideshow is displayed like this:

And I want to make it look like this:

Is there any way to do this without hiring? I would REALLY appreciate it!

[KetanKumar]

@dtmp97 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

[dtmp97]

Hi, thank you. 

Store URL: https://nevadvulf.myshopify.com/

password: 123

[KetanKumar · Accepted solution]

@dtmp97 

Thanks or details

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (min-width: 1239px) {
.Product__SlideshowNavScroller {
    text-align: center;
}
.Product__SlideshowNav {
    display: inline-block;
    width: 100%;
}
.Product__SlideshowMobileNav {display: none;}
.Product__SlideshowNavImage {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 4px !important;
}
}

[dtmp97]

It works! Thank you so much.

There is just one thing missing, selected image needs to be highlighted with black outline like this:

[KetanKumar]

@dtmp97 

Thanks for post

.Product__SlideshowNavImage.is-selected {
    border: 1px solid;
}

[dtmp97]

Thank you, however mobile thumbnails break when I select this option to change image grid on desktop:

But now, mobile is broken:

[KetanKumar]

@dtmp97 

can you please removed the all above code

[dtmp97]

Sure, removed.

[KetanKumar]

@dtmp97 

great, Please add now and let me inform here