Dotted Product Images

Store Design
, , ,
1

Hi guys,

I want the images on my product page to be dotted rather than numbered. Somehow I can not upload photos but look at products on cusbclo.com to know what I mean. I’ve tried a few things but nothing worked,

anyone have any tips?

2

Hi @Aihaam ,

Please follow these steps:

  • Step 1: Go to Customize > Products > Default product > Mobile layout > Show thumbnails.

Screenshot.png
Screenshot.png555×808 20 KB

  • Step 2: Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:
@media screen and (max-width: 749px) {
  .thumbnail-slider .slider-button {
    display: none !important;
  }
  .thumbnail-slider .thumbnail-list.slider {
    justify-content: center;
  }
  .thumbnail-list__item {
    width: 5px !important;
    height: 5px !important;
    border-radius: 100%;
    overflow: hidden;
  }
  .thumbnail-slider .thumbnail {
    background: #000;
    opacity: 0.6;
  }
  .thumbnail-slider .thumbnail[aria-current] {
    opacity: 1;
  } 
}
3

Broooo thank you sooo much!!!

4

Hi @Aihaam ,

If you have any questions, you can contact me directly.
Nice to meet you :blush:

1 Like