How can I enable product image slider on desktop mode in Dawn theme?

How can I enable product image slider on desktop mode in Dawn theme?

V1nk0
Shopify Partner
9 0 6

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.

 

Replies 10 (10)

MadcapCreative
New Member
5 0 0

Hi there -- did you ever get this resolved?

V1nk0
Shopify Partner
9 0 6

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.

tedisabear
Tourist
5 0 2

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

 

 

tedisabear
Tourist
5 0 2

After all these tweaking. 
I found on the right-hand side, there is an option to enable a thumbnail carousel. 

How dumb I am!

Untitled.png

 

V1nk0
Shopify Partner
9 0 6

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:
Screenshot 2024-01-27 at 17.25.32.png
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.

SoberBear
Visitor
1 0 0

Mate I was breakin my head tryna get a Product Carousel and your comment helped me so much! Cheers.

maksimcuturilo
Excursionist
22 0 4

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

CarthagosTech
Shopify Partner
2 0 2

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.

CarthagosTech
Shopify Partner
2 0 2

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,

 

lthnt
Tourist
5 0 2

Hi @CarthagosTech,

Your code works perfectly!

Could you also help me make the image thumbnails draggable too?

Thank you so much!