Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there, I'm using Dawn and the product images on the product detail page are shown as a slider in mobile mode.
This means you can swipe or use the arrows below the images to change the image shown.
In Desktop mode, I would like to have this as well, but Dawn seems to replace the slide-component in desktop mode, loosing all forms of sliding possibilities (desktop layout: preview images with carousel).
This means you can only change the image shown, by clicking on a thumbnail.
Is there a way in desktop mode, to have the product images behave the exact same way as in mobile mode?
At least with a possibility to also use arrows to change the image instead of just with the thumbnails.
I tried to unhide the arrows that the mobile mode uses (they are just hidden using CSS) in desktop mode, but when I click the arrow, nothing happens. So it seems that Dawn changes a lot more between mobile and desktop mode.
I just can't believe that something so simple and basic as arrows to navigate through product images is such a troublesome feature to add in desktop mode.
Hi there -- did you ever get this resolved?
Unfortunately not, all solutions I’ve found so far completely replace the product image area with something totally custom and thus not utilizing Dawn’s implementation at all.
I did it.
Below is what I've changed
STEP 1:
In this file:
assets/component-slider.css
Find this section:
@media screen and (min-width: 750px) {
.slider--mobile + .slider-buttons {
display: none;
}
}
and you make it look like this:
@media screen and (min-width: 750px) {
/* .slider--mobile + .slider-buttons {
display: none;
} */
.slider{
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1.5rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
}
STEP2:
Find another two section in the same file
@media screen and (min-width: 990px) {
.slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
@media screen and (max-width: 989px) {
.slider--desktop:not(.slider--tablet) + .slider-buttons {
and you make these codes ineffective or simply remove them.
@media screen and (min-width: 990px) {
/* .slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
display: none;
} */
}
@media screen and (max-width: 989px) {
/* .slider--desktop:not(.slider--tablet) + .slider-buttons {
display: none;
} */
}
STEP 3
In this file
assets/section-main-product.css
find
.product:not(.product--columns) .product__media-list .product__media-item:first-child,
and remove :first-child, making it look like this
.product:not(.product--columns) .product__media-list .product__media-item,
Finished
After all these tweaking.
I found on the right-hand side, there is an option to enable a thumbnail carousel.
How dumb I am!
Hi, that is not what this topic is about.
This topic is about being able to have a slider-component for the images itself (meaning you would be able to change the active image by navigating the main image area with arrows left and right, instead of having to click the thumbnail to change the active image).
Something like this:
So you can use the red arrows to navigate through the images.
With Dawn, this is only possible for the mobile version of the product page, not the desktop version.
And of course, if the thumbnails are a carousel (like your setting), that thumb carousel should update (show the correct active image) as well, when the active image was changed in the slider.
Mate I was breakin my head tryna get a Product Carousel and your comment helped me so much! Cheers.
Hi,
does this solution keep the image thumbnails on the bottom? I'm looking for a solution where there's no thumbnails at all, just the large image and arrows
So the issue is that the gallery in Dawn is an element that can scroll and it uses the browser native scroll behavior, because of the mobile behavior you can simply slide it left and right, and with a bit of extra css - you can snap the scroll to an element.
in the global.js - there is code that creates html elements. and one of them is the gallery, there it controls the slider behavior. we can edit this file in order to add desktop (mouse) events to the gallery and allow it to slide.
1. go to code editor -> assets/global.js
search for:
class SliderComponent extends HTMLElement
then under this line look for super() and under it add this:
this.sliderContainer = this.querySelector(".product__media-list");
then a bit under look for
if (!this.slider || !this.nextButton) return;
and change it to be:
if (!this.slider || !this.nextButton || !this.sliderContainer) return;
then under this line:
this.nextButton.addEventListener("click", this.onButtonClick.bind(this));
add this code snippet:
let isDragging = false;
let startX, scrollLeft;
this.sliderContainer.addEventListener("mouseover", (e) => {
this.slider.style.cursor = "grab";
});
this.sliderContainer.addEventListener("mousedown", (e) => {
e.preventDefault(); // Prevent default image drag behavior
isDragging = true;
this.sliderContainer.classList.add("dragging");
this.sliderContainer.style.cursor = "grabbing";
startX = e.pageX - this.sliderContainer.offsetLeft;
scrollLeft = this.sliderContainer.scrollLeft;
});
this.sliderContainer.addEventListener("mouseleave", () => {
isDragging = false;
this.sliderContainer.style.cursor = "auto";
this.sliderContainer.classList.remove("dragging");
});
this.sliderContainer.addEventListener("mouseup", () => {
isDragging = false;
this.sliderContainer.style.cursor = "auto";
this.sliderContainer.classList.remove("dragging");
});
this.sliderContainer.addEventListener("mousemove", (e) => {
if (!isDragging) return;
e.preventDefault();
this.sliderContainer.style.cursor = "grabbing";
const x = e.pageX - this.sliderContainer.offsetLeft;
const walk = (x - startX) * 2; // Adjust multiplier for sensitivity
this.sliderContainer.scrollLeft = scrollLeft - walk;
});
we are almost done, one last thing we need to do is to adjust the css:
go to assets/component-slider.css
search for:
.slider--mobile + .slider-buttons
and replace the whole media query to this (you can simply remove the existing media query and just past this there):
@media screen and (min-width: 750px) {
.slider{
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
}
then go to assets/section-main-product.css
search for:
product--thumbnail .product__media-item:not(.is-active)
and remove the display none:
.product--thumbnail .product__media-item:not(.is-active),
.product--thumbnail_slider .product__media-item:not(.is-active) {
/* display: none; */
}
this should work.
I forgot one thing.
you need to look for this line in assets/section-main-product.css
.product:not(.product--columns) .product__media-list .product__media-item:first-child,
delete :first-child, so it will look like this
.product:not(.product--columns) .product__media-list .product__media-item,
Hi @CarthagosTech,
Your code works perfectly!
Could you also help me make the image thumbnails draggable too?
Thank you so much!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025