How to add pagination dots onto Dawn Theme?

Store Design
,
1

image
image352×423 30.7 KB

Would there be a way to add pagination dots onto my “Dawn” theme shopify store such as the ones in the “Horizon” theme by using the edit code option?

2

Hi @asmicclothing

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

Thank you, went ahead and removed password, I also added some product examples.

4

Hi @asmicclothing

Do you want to add this dot on the product page?

image
image309×547 45.2 KB

5

Please change the settings of Media on your store like this, then I can give you the code

Screenshot 2025-12-08 at 09.30.39
Screenshot 2025-12-08 at 09.30.391920×842 132 KB

6

Correct to show the number of images and which one the customer is viewing.

7

Went ahead and switched it over to “show thumbnails”

8

Please add this code to Custom CSS in Theme settings

@media (max-width: 749px) {
    .product .thumbnail-slider .thumbnail-list.slider {
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
    }
    .product .thumbnail.global-media-settings img { display: none; }
    .product .thumbnail-list__item.slider__slide {
        width: 10px;
        height: 10px;
    }
    .product .thumbnail-list__item.slider__slide .thumbnail {
        border-radius: 50%;
        background: #ddd;
    }
    .product .thumbnail-list__item.slider__slide .thumbnail[aria-current] {
        background: #121212;
    }
}

Screenshot 2025-12-08 at 09.49.40
Screenshot 2025-12-08 at 09.49.40882×1212 75.9 KB

9

@asmicclothing please see in customize settings to check if you have an option to convert thumbnails to carousel for product images. If that option is unavailable then it will need code editing to put images into slider like slick slider