remove thumbnail image on product page and put a slider dots on Dawn Theme

Solved

remove thumbnail image on product page and put a slider dots on Dawn Theme

GM15
Excursionist
28 1 1

Hello, 

I would like to remove the image thumbnail below my product image and only put a slider dots like the image attached and put some little arrow to go through the image . thank you for your help.

my website:

Screenshot 2024-06-29 at 17.42.08.png

what I want:

Screenshot 2024-06-29 at 17.38.27.png

my website is https://lachaise.co

password : Password25!

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8435 1659 1673

This is an accepted solution.

Hi @GM15 

You can try to add this code to check

.thumbnail-slider .thumbnail-list {
    justify-content: center;
}
.thumbnail-slider .thumbnail-list__item.slider__slide {
    width: 16px !important;
    border-radius: 50%;
    border: 1px solid #012694;
    overflow: hidden;
}
.thumbnail-slider .thumbnail-list__item .thumbnail[aria-current] {
    background: #012694;
}
.thumbnail-slider .thumbnail-list__item .thumbnail img { opacity: 0 !important; }

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

PageFly-Noah
Shopify Partner
1317 233 268

This is Noah from PageFly - Shopify Page Builder App

Hi @GM15, this part belongs to the theme's settings. Can you check again in the theme settings in the Product information section to see if this change is included? Normally, some themes will allow users to change from showing list thumbnails to not showing list thumbnails

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

GM15
Excursionist
28 1 1

this is not possible on the dawn theme unfortunately.

GM15
Excursionist
28 1 1

Hello @Dan-From-Ryviu , you solved some of my issue before so thought you could know how to resolve that. thank you.

Dan-From-Ryviu
Shopify Partner
8435 1659 1673

This is an accepted solution.

Hi @GM15 

You can try to add this code to check

.thumbnail-slider .thumbnail-list {
    justify-content: center;
}
.thumbnail-slider .thumbnail-list__item.slider__slide {
    width: 16px !important;
    border-radius: 50%;
    border: 1px solid #012694;
    overflow: hidden;
}
.thumbnail-slider .thumbnail-list__item .thumbnail[aria-current] {
    background: #012694;
}
.thumbnail-slider .thumbnail-list__item .thumbnail img { opacity: 0 !important; }

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
28 1 1

this is working, thanks a lot.

Do you also know how i could add arrow on left and right side of the image to slide through the image on desktop and mobile ? thanks