Shopify themes, liquid, logos, and UX
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!
Welcome to the Shopify community!
and Thanks for your question.
Please share your site URL,
So I will check and provide a solution here.
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;
}
}
It works! Thank you so much.
There is just one thing missing, selected image needs to be highlighted with black outline like this:
Thanks for post
.Product__SlideshowNavImage.is-selected {
border: 1px solid;
}
Thank you, however mobile thumbnails break when I select this option to change image grid on desktop:
But now, mobile is broken:
can you please removed the all above code
Sure, removed.
great, Please add now and let me inform here
I added the code back, if that's what you mean.
Yes, please
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;
}
}
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
Thank you. Sent you the message.
Thanks for the update i will check and reply to the message.
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.
I just want opposite of this Thumbnails >>Dot slider can you help
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.
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.
Hey guys did you find a fix for this? I have the exact same problem
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.
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
Hello How can I apply this product page slideshow to my desktop view.
sorry for any issue can you please share store url
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!
sorry for that issue can you please check your theme setting your new theme allow this option may be
@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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024