Solved

How to add Slideshow Dots In Responsive Theme

MyMawduh
Excursionist
31 5 7

 

As you can see in the picture below I have numbers to move slideshow pictures on this theme.
Am currently using Sense version 9.0.0. 

I would like to remove the numbers and add Auto Rotate slides and show slid indicator slides instead of the numbers. I just don't think it looks good and also is open to any suggestions you guys have. please let me know if I can add some kinda code to fix this issue. Thank you.

Screenshot 2023-04-01 025054.png

 

MyMawduh
Accepted Solutions (8)

Alok_Kasgar
Shopify Partner
112 26 26

This is an accepted solution.

Hi @MyMawduh 
No any coding required here.

I hope this solution will works. Please follow below steps
1) Go to Online Store
2) Go to theme customize option

3) Click slider section and change style counters to Dots that's it See below SS

Alok_Kasgar1_0-1680340311192.png

 

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com

View solution in original post

MyMawduh
Excursionist
31 5 7

This is an accepted solution.

Okay, thats good. but now it still shows below the image. can it be included with the picture?   Screenshot 2023-04-01 034052.png

 

 

MyMawduh

View solution in original post

Alok_Kasgar
Shopify Partner
112 26 26

This is an accepted solution.

You can add CSS code for this. I hope this solution will works. Please follow below steps
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

 

<style>
@media screen and (min-width: 750px){
.slideshow__controls {
margin-top: -45px;
}
}
</style>

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com

View solution in original post

MyMawduh
Excursionist
31 5 7

This is an accepted solution.

it works beautifully. thank you, Alok.

Screenshot 2023-04-01 181657.png

MyMawduh

View solution in original post

MyMawduh
Excursionist
31 5 7

This is an accepted solution.

Can we change the color to white?

MyMawduh

View solution in original post

Alok_Kasgar
Shopify Partner
112 26 26

This is an accepted solution.

@MyMawduh Your welcome

For white color use below code:

<style>
@media screen and (min-width: 750px){
.slideshow__controls {
margin-top: -45px;
z-index: 9999;
}
.slider-counter__link--dots .dot {
background-color: #fff!important;
}
.slider-counter__link--active.slider-counter__link--dots .dot{
border:1px solid #fff!important;
}
}
</style>

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com

View solution in original post

Alok_Kasgar
Shopify Partner
112 26 26

This is an accepted solution.

Please use 2 instead of 9999 z-index value

 

like as: z-index: 2;

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com

View solution in original post

MyMawduh
Excursionist
31 5 7

This is an accepted solution.

Screenshot 2023-04-02 234254.png

It works perfectly, and it looks way better. thank you so much. great help

MyMawduh

View solution in original post

Replies 15 (15)

Alok_Kasgar
Shopify Partner
112 26 26

This is an accepted solution.

Hi @MyMawduh 
No any coding required here.

I hope this solution will works. Please follow below steps
1) Go to Online Store
2) Go to theme customize option

3) Click slider section and change style counters to Dots that's it See below SS

Alok_Kasgar1_0-1680340311192.png

 

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com
MyMawduh
Excursionist
31 5 7

This is an accepted solution.

Okay, thats good. but now it still shows below the image. can it be included with the picture?   Screenshot 2023-04-01 034052.png

 

 

MyMawduh
Alok_Kasgar
Shopify Partner
112 26 26

This is an accepted solution.

You can add CSS code for this. I hope this solution will works. Please follow below steps
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

 

<style>
@media screen and (min-width: 750px){
.slideshow__controls {
margin-top: -45px;
}
}
</style>

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com
MyMawduh
Excursionist
31 5 7

This is an accepted solution.

it works beautifully. thank you, Alok.

Screenshot 2023-04-01 181657.png

MyMawduh
MyMawduh
Excursionist
31 5 7

This is an accepted solution.

Can we change the color to white?

MyMawduh
Alok_Kasgar
Shopify Partner
112 26 26

This is an accepted solution.

@MyMawduh Your welcome

For white color use below code:

<style>
@media screen and (min-width: 750px){
.slideshow__controls {
margin-top: -45px;
z-index: 9999;
}
.slider-counter__link--dots .dot {
background-color: #fff!important;
}
.slider-counter__link--active.slider-counter__link--dots .dot{
border:1px solid #fff!important;
}
}
</style>

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com
Alok_Kasgar
Shopify Partner
112 26 26

This is an accepted solution.

Please use 2 instead of 9999 z-index value

 

like as: z-index: 2;

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com
MyMawduh
Excursionist
31 5 7

This is an accepted solution.

Screenshot 2023-04-02 234254.png

It works perfectly, and it looks way better. thank you so much. great help

MyMawduh
Chirag_Ailani
Visitor
2 0 1

But after this I encounter a new problem that is when I'm opening the hamburger menu in the mobile the three dots are overlapping.
Screenshot 2023-08-06 232021.jpgScreenshot 2023-08-06 231953.jpg

Dale_Van_Den_He
New Member
17 0 0

Yes but only for the desktop, if you go to the cell phone View the three dots are still below the image.

Dale_Van_Den_He
New Member
17 0 0

That solves the problem for the desktop view of the three dots, but for the cell phone it is still the same?

Dale_Van_Den_He
New Member
17 0 0

This only affects the desktop version, the three dots still show on the cell phone.

Wesmorbeauty
Tourist
10 0 0

Is there a similar code for the mobile version of the Sense Slideshow so it isn't positioned underneath it

Anjalilohiya018
Visitor
1 0 0

Hi, can you please share the code for mobile 

tranquilweaves
New Member
6 0 0

Did you find the code to sort this for mobile? I also want to do the same but can't.