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

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!

Replies 28 (28)

KetanKumar
Shopify Partner
36839 3635 11972

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

 

KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | 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
36839 3635 11972

@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 Partner | 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
36839 3635 11972

@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 Partner | 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
36839 3635 11972

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

I added the code back, if that's what you mean.

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@dtmp97 

Yes, please

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 Partner | 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's added.

@media screen and (max-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;
}
.Product__SlideshowNavImage.is-selected {
    border: 1px solid;
}
}
KetanKumar
Shopify Partner
36839 3635 11972

@dtmp97 

great, thank''

i have check this code doesn't work now so

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

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 Partner | 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. Sent you the message.

KetanKumar
Shopify Partner
36839 3635 11972

@dtmp97 

Thanks for the update i will check and reply to the message.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
themuddshop
Excursionist
16 1 3

This code is great!

Unfortunately, it doesn't work with the Easy Variant Images app we're using.

Anyone have a counter-solution to showing thumbnails on mobile (for Prestige)?

Much appreciated.

Amir17
Visitor
1 0 1

I just want opposite of this Thumbnails >>Dot slider can you help

KetanKumar
Shopify Partner
36839 3635 11972

@Amir17 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36839 3635 11972

@themuddshop 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GXDMAN
Visitor
2 0 2

Hey guys did you find a fix for this? I have the exact same problem

KetanKumar
Shopify Partner
36839 3635 11972

@GXDMAN 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GXDMAN
Visitor
2 0 2

Thank you @KetanKumar, this is my site:

https://www.godmanapparel.com/

KetanKumar
Shopify Partner
36839 3635 11972

@GXDMAN 

thanks for url 

i have check that's not possible only css code 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
baloch404
Visitor
2 0 1

Hello How can I apply this product page slideshow to my desktop view.

KetanKumar
Shopify Partner
36839 3635 11972

@baloch404 

sorry for any issue can you  please share store url

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EcomRules
New Member
4 0 0

Hi KetanKuman,

Can you help me too? I have the same problem but with my prestige 1.1.1 theme. The website is www.inmyheart.uk I've tried everything with the codes, I've even asked a developer for help but nothing. if you can help me I would be infinitely grateful!

KetanKumar
Shopify Partner
36839 3635 11972

@EcomRules 

sorry for that issue can you please check your theme setting your new theme allow this option may be 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
EcomRules
New Member
4 0 0

@KetanKumar I have the version of the theme 1.1.1, from the settings of the theme even if I set it does not work, and I can not understand why ... if you want to send me a request and I add you as staff of the store with the authorization for theme, the URL of the store is www.foruheart.myshopify.com