Hi there,
Looking to make my client’s product images into a slider only and remove the bottom thumbnail images. Any help would be appreciated!
The Slideshow Caveat
Slideshows are a good way to lose clients money.
If a client asks for a slideshow that is not a reason that is not a GOAL.
It is self medicating an undiagnosed problem.
Avoid slideshows without proper a/b-testing for the business impact to bounces, conversions, or a sites overall technical performance.
Slideshows can be a detrimental feature in site speed performance, accessibility, and a distraction to content management.
Add a slideshow or gallery to OS2.0 themes
First thoroughly check the themes settings and section settings, and the theme’s support docs.
To hide thumbs use the following CSS bandaid in the sections or themes custom css feature
Read: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
.product-medias__thumbnails { display:none;}
If you need an entire replacement slideshow|gallery get the slideshow section from the dawn theme, or the product pages image gallery
https://github.com/Shopify/dawn/blob/main/sections/slideshow.liquid
https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid#L60
https://github.com/Shopify/dawn/blob/main/snippets/product-media-gallery.liquid
HEAVILY test the pagespeed when doing this to ensure excess large images are not being improperly loaded.
For a more raw starting point https://web.dev/patterns/components/carousel/
There’s also the CSS rules - scroll-snap-type: x mandatory; scroll-snap-align: center; scroll-snap-stop: always; that may work in some situations(mainly a fullscreen vertical slideshow) but will generally need more CSS-fu to go with it.
Good Hunting.
This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.min.css
.product-medias__thumbnails {
display: none !important;
}
Hope you find my answer helpful!
Best regards,
Victor | PageFly
This was AB tested by client using Google Optimize. There was an easier solution that I found using the current theme as there is a Slider already integrated w/ the product.
Thanks for your help!
Thanks Victor, this was only 1/2 of the issue. That one I knew how to fix, but changing the products to a slider and adding the prev, next arrows that worked was the issue.
Had to go to theme.min.js and find the navigation params of the swiper code and add nextEl: ‘.swiper-button-next’ and prevEl: ‘swiper-button-prev’.
you can see the final requested result at hairmetto.com.