Dawn: product image slider on desktop

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 5 (5)

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 0

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 0

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.