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

Solved
dtmp97
Excursionist
13 0 6

Hi there,

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

NO.PNG

 

And I want to make it look like this:

HOW IT SHOULD BE.PNG

 

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

KetanKumar
Shopify Partner
14494 1670 5204

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dtmp97
Excursionist
13 0 6

Hi, thank you. 

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

password: 123

 

0 Likes
KetanKumar
Shopify Partner
14494 1670 5204

This is an 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;
}
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dtmp97
Excursionist
13 0 6

It works! Thank you so much.

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

HOW IT SHOULD BE.PNG

KetanKumar
Shopify Partner
14494 1670 5204

@dtmp97 

Thanks for post

.Product__SlideshowNavImage.is-selected {
    border: 1px solid;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dtmp97
Excursionist
13 0 6

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

1.PNG

3.PNG

 

But now, mobile is broken:

5.PNG

KetanKumar
Shopify Partner
14494 1670 5204

@dtmp97 

can you please removed the all above code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dtmp97
Excursionist
13 0 6

Sure, removed.

KetanKumar
Shopify Partner
14494 1670 5204

@dtmp97 

great, Please add now and let me inform here

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing