Change Product Image Navigation "Dots" To "Lines"

Solved

Change Product Image Navigation "Dots" To "Lines"

martujv
Pathfinder
103 2 26

Hello!

 

On mobile, when the carousel is activated, dots appear below the image photos to know which image you are looking at. 

 

Example photo: 

IMG_4880.jpg

 

I would like to change those dots to lines so that it fits better with the aesthetics of my store.

 

Example photo:

Captura de pantalla 2024-03-22 a las 10.13.36.png

 

My theme is Stiletto, my website is https://winnerofficial.com/products/product-18-jacket-1 and my password is y21

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

Hi @martujv 

You can add this code to your theme.liquid file after <head> in Online Store > Themes > Edit code to do your request

 

<style>
@media (max-width: 749px) {
.product__media-container.below-mobile .swiper-pagination {
    width: 100% !important;
}
.product__media-container.below-mobile .swiper-pagination .swiper-pagination-bullet {
    width: 25% !important;
    height: 4px !important;
    margin: 21px 0px !important;
    border-radius: 0;
}
}
</style>

Screenshot 2024-03-22 at 16.39.19.png

 

- 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

Reply 1 (1)

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

Hi @martujv 

You can add this code to your theme.liquid file after <head> in Online Store > Themes > Edit code to do your request

 

<style>
@media (max-width: 749px) {
.product__media-container.below-mobile .swiper-pagination {
    width: 100% !important;
}
.product__media-container.below-mobile .swiper-pagination .swiper-pagination-bullet {
    width: 25% !important;
    height: 4px !important;
    margin: 21px 0px !important;
    border-radius: 0;
}
}
</style>

Screenshot 2024-03-22 at 16.39.19.png

 

- 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.