Product Image Slideshow - Show only as many dots as product variant pictures

Store Design
1

Hi everyone,

Currently, my product page shows as many „dots“ to slide through as there are total pictures but I want to only show as many dots as pictures for a product variant:

IMG_4522.jpeg
IMG_4522.jpeg1179×1963 239 KB

e.g. above the product has a color variant Taupe with 5 pictures and hence I would want to show 5 dots. The color variant Gray has 4 pictures so I would want to show 4 dots when that variant is selected.

here is my website: www.moralana.com

Thanks so much to anyone that is up to help.

Cheers,

Mora Lana

2

Which app are you using to show only relevant variant images on the page or is it a custom code?

3

Hi Fardid,

it is a custom code I am using so no Apps.

Cheers,
Mora Lana

4

Hi @moralana ,

It can only be displayed and does not include active. Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.product__media-list+.slider-buttons {
    display: none !important;
}
.thumbnail-slider.slider-mobile-gutter.small-hide {
    display: block !important;
}
.thumbnail-slider .thumbnail-list.slider {
    justify-content: center;
}
.thumbnail-list__item {
    width: 10px !important;
    height: 10px !important;
    background: #999;
    border-radius: 100%;
    overflow: hidden;
    max-width: 10px !important;
}
.thumbnail-list__item .thumbnail {
    display: none !important;
}
}

If you want to add active it will need JS changes, can I send you a collaborator invite and add it?

I hope it helps!

5

Hi @namphan thank you so much. That part works and yes sure, feel free to send me an invite for the “active” implementation.

Really appreciate your help! The collaborator code would be 6200.

Cheers

6

Hi @moralana ,

I sent it, after access, I will check it

7

Hi @moralana ,

I changed it, refer code:

@media screen and (max-width: 749px) {
  .product__media-list+.slider-buttons {
    display: none !important;
  }
  .thumbnail-slider.slider-mobile-gutter.small-hide {
    display: block !important;
  }
  .thumbnail-slider .thumbnail-list.slider {
    justify-content: center;
  }
  .thumbnail-list__item {
    width: 10px !important;
    height: 10px !important;
    background: #999;
    border-radius: 100%;
    overflow: hidden;
    max-width: 10px !important;
  }
  .thumbnail-list__item .thumbnail[aria-current] {
    background: #000;
    opacity: 1;
    border: none;
    box-shadow: none !important;
  }
  .thumbnail-list__item img {
    display: none !important;
  }
}

Please check and let me know.

8

Worked like a treat! Thank you so much!

9

Hi @moralana ,

You’re welcome and happy to help :blush: