Shopify themes, liquid, logos, and UX
Hello
I am using the Debut theme to develop my new website. I am looking to add an image slider for the thumbnail images on the product pages. I can see that this is visible on mobile view but I want to enable this on desktop/tablet too. I have gone through the forum to try out solutions but I haven't got this to work as my product-template.liquid document seems slightly different for some reason. I also think some of the previous forum pages I have looked at might be slightly out of date, hence why the code may be different.
Any help or suggestions would be greatly appreciated.
Many thanks,
Grant Williams
Web Development & Ecommerce Manager
Hello, @gwilliams
Thanks
It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me
Hello
Thank you for getting back to me. How do I go about with getting someone to customize the code for me to enable this?
Kind Regards
Hey man try this and see if it helps: https://community.shopify.com/c/Shopify-Design/Changing-image-thumbnails-in-Debut-Theme/m-p/1083265#...
Hi,
Did you ever find a solution to this? I'm in the same boat since it seems like the Debut code has been updated. Here is the old solution that doesn't work due to the fact that my JS is different.
https://community.shopify.com/c/Technical-Q-A/Debut-theme-Product-thumbnails-as-slider/m-p/572111#M1...
The provided CSS in this thread only creates a flex container around the thumbnails keeping them under the main image but doesn't enable the slider itself.
I found this section of code in the theme.js, but haven't been able to use this function call to successfully enable the slider on all screen sizes.
_initMobileBreakpoint: function() {
if (this.mqlSmall.matches) {
// initialize thumbnail slider on mobile if more than four thumbnails
if (
this.container.querySelectorAll(this.selectors.productThumbImages)
.length > 4
) {
this._initThumbnailSlider();
}
// destroy image zooming if enabled
if (this.settings.zoomEnabled) {
this.imageZoomWrapper.forEach(
function(element, index) {
this._destroyZoom(index);
}.bind(this)
);
}
this.settings.bpSmall = true;
} else {
if (this.settings.sliderActive) {
this._destroyThumbnailSlider();
}
this.settings.bpSmall = false;
}
},
Hello fellow hustlers, so I have just been chatting to a shopify robo-helper (until I got disconnected) about resolving the change in code and their 'developer's' solution is go to my old store (which is on pause) download the old code and then upload it to my new store so I have the thumbnail images be in a line/row, but I told her my contention is that there are people looking for this solution and it would be much easier to tell us all how to effect this change but 'she' said this was the only way as they do not know the 'extensive changes that have been made.' Basically I should go and reactivate my old store download the code and upload the code my new store and they will refund me the $29 as the 'developers' see this as the solution. I am shocked to be honest....I have no words, so their 'developers' is on an individual basis the way I understand it. I made it clear that this was not a solution and I can't do that as it is a round-about way and one person applicable 'solution'.....
I figured out how to make it work for my needs, maybe this will help someone else.
1: Go into Assests > theme.js file and find _initDesktopBreakpoint: function and replace that function with this:
_initDesktopBreakpoint: function() {
if (this.mqlMediumUp.matches && this.settings.zoomEnabled) {
this.imageZoomWrapper.forEach(
function(element, index) {
this._enableZoom(element, index);
}.bind(this)
);
};
if (
this.container.querySelectorAll(this.selectors.productThumbImages)
.length > 3
) {
this._initThumbnailSlider();
}
},
You're just adding the if statement to this function which is in the Mobile breakpoint.
2. Go to the Sections > product-template.liquid Look for the <div> with a class of thumbnails-wrapper. This is where the next and previous arrows are. Replace medium-up--hide class on both of these buttons with
{% if enable_thumbnail_slides != true %} hide--medium {%endif %}
This will hide the arrows if there are fewer than 3 images.
3: Go to Assets > theme.css and paste this at the bottom of the file.
@media only screen and (min-width: 750px) {
.template-product .main-content {
padding-top: 22px;
}
.product-single__media-group {
position: relative;
}
.thumbnails-wrapper {
position: relative;
top: 10px;
text-align: center;
margin: 0 2px 30px 2px;
}
.thumbnails-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-top: 10px;
padding-bottom: 10px;
}
.thumbnails-slider__btn .icon {
height: 14px;
width: 14px;
}
.thumbnails-slider__prev {
left: -15px;
}
.thumbnails-slider__next {
right: -15px;
position: absolute;
}
.product-single__thumbnail {
margin: 0 auto;
}
.product-single__thumbnails {
margin-top: 0;
justify-content: center;
}
.slider-active .product-single__thumbnails {
display: block;
margin: 0 auto;
max-width: 75%;
overflow: hidden;
}
.product-single__thumbnails-slider-track {
position: relative;
left: 0;
top: 0;
display: block;
}
.product-single__thumbnails-slider-track:before,
.product-single__thumbnails-slider-track:after {
content: "";
display: table;
}
.product-single__thumbnails-slider-track:after {
clear: both;
}
}
.product-single__thumbnails-slider-track {
display: flex;
flex-wrap: nowrap;
width: 100% !important;
}
.product-single__thumbnails-item {
flex: 0 0 33.333%;
height: 0;
padding-top: 33.3%;
position: relative;
/* padding-left: 5px; */
}
.product-single__thumbnail {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.product-single__thumbnail-image {
height: 100%;
width: 100%;
object-fit: cover;
}
If you're on the older debut theme, this solution here should work for you.
https://community.shopify.com/c/Technical-Q-A/Debut-theme-Product-thumbnails-as-slider/td-p/571620
It was also a huge help with figuring out my solution.
Hello, @gwilliams
Thanks
It can be done by doing some code customization using slick slider .
Please take the help of a developer and hire Shopify Expert or me
This is epic, thanks! Any idea how we enable touch events so people can swipe on mobile? It's massively impacting my UX 😞
I suppose it requires having an perception into the actual code of your cutting-edge Shopify subject post, a few virtually simple tweaks can be supplied totally through analyzing code from the real website without getting access to it.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024