Dawn Slideshow - Add Arrow Overlays & Remove Paginations

Solved

Dawn Slideshow - Add Arrow Overlays & Remove Paginations

MMO1
Excursionist
42 0 4

Hi, I want to add left & right arrow overlays on top of my slideshow (Dawn theme)

And remove the paginations below. I've looked at ALL of the posted solutions and they're all outdated.

Thank you!

Accepted Solution (1)
dbuglab
Shopify Partner
473 51 50

This is an accepted solution.

Hi @MMO1 
replace all given css with new one

.slider-counter.slider-counter--dots {
    display: none !important;
}
button.slideshow__autoplay.slider-button.no-js-hidden {
    display: none !important;
}
button.slider-button.slider-button--prev {
    display: inherit;
    margin-right: 95% !important;
    position: absolute;
    margin-bottom: 42% !important;
	color : red !important;
}
button.slider-button.slider-button--next {
    display: inherit;
    margin-left: 95% !important;
    position: absolute;
    margin-bottom: 42% !important;
	color : red !important;
}
.slider-button .icon {
    height: 2.6rem !important;
}
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
    z-index: 999 !important;
}
.slideshow.banner.banner--medium {
    min-height: 70vh;
}

 

dbuglab_0-1693897380785.png

 

banned

View solution in original post

Replies 16 (16)

dbuglab
Shopify Partner
473 51 50

Hi @MMO1 


Can you please provide your Store URL and Password too?


With Regards,
Dbuglab

banned
MMO1
Excursionist
42 0 4
dbuglab
Shopify Partner
473 51 50

@MMO1 

Please follow these Steps:

1) Go to Online Store
2) Edit Code
3) Please find theme.liquid file
4) Add the following code above </head> tag

 

<style>
.slider-counter.slider-counter--dots {
display: none !important;
}
button.slideshow__autoplay.slider-button.no-js-hidden {
display: none !important;
}
button.slider-button.slider-button--prev {
display: inherit;
margin-right: 81% !important;
position: absolute;
margin-bottom: 40% !important;
background-color: #fff !important;
}
button.slider-button.slider-button--next {
display: inherit;
margin-left: 81% !important;
position: absolute;
margin-bottom: 40% !important;
background-color: #fff !important;
}
</style>

 

 

dbuglab_0-1693893500929.png

 

banned
MMO1
Excursionist
42 0 4

Hi thank you for this,

 

I would like to make the white backgrounds completely transparent,

And also make the arrows bigger and bolder (not pixel hairline) + color it red.

 

Can you please help me add these customizations? Thank you!

dbuglab
Shopify Partner
473 51 50

@MMO1 
Replace old css which given by me with this one

<style>
.slider-counter.slider-counter--dots {
    display: none !important;
}
button.slideshow__autoplay.slider-button.no-js-hidden {
    display: none !important;
}
button.slider-button.slider-button--prev {
    display: inherit;
    margin-right: 81% !important;
    position: absolute;
    margin-bottom: 40% !important;
	color : red !important;
}
button.slider-button.slider-button--next {
    display: inherit;
    margin-left: 81% !important;
    position: absolute;
    margin-bottom: 40% !important;
	color : red !important;
}
.slider-button .icon {
    height: 2.6rem;
}
</style>
banned
MMO1
Excursionist
42 0 4

Hi, thanks for this. But the arrows are super tiny and not centered vertically. Can you please help fix this?

dbuglab
Shopify Partner
473 51 50

@MMO1 

Did you added css?
Unable to see ant changes.

banned
MMO1
Excursionist
42 0 4

Yes I added just now, I was using the customize store preview > custom CSS

dbuglab
Shopify Partner
473 51 50

Please use this css

 

.slider-button .icon {
    height: 2.6rem !important;
}

 

dbuglab_0-1693896809736.png

 

banned
MMO1
Excursionist
42 0 4

Thank you, I added this. But it's not centered vertically, and it's not clickable (doesn't scroll to other page)

dbuglab
Shopify Partner
473 51 50

This is an accepted solution.

Hi @MMO1 
replace all given css with new one

.slider-counter.slider-counter--dots {
    display: none !important;
}
button.slideshow__autoplay.slider-button.no-js-hidden {
    display: none !important;
}
button.slider-button.slider-button--prev {
    display: inherit;
    margin-right: 95% !important;
    position: absolute;
    margin-bottom: 42% !important;
	color : red !important;
}
button.slider-button.slider-button--next {
    display: inherit;
    margin-left: 95% !important;
    position: absolute;
    margin-bottom: 42% !important;
	color : red !important;
}
.slider-button .icon {
    height: 2.6rem !important;
}
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
    z-index: 999 !important;
}
.slideshow.banner.banner--medium {
    min-height: 70vh;
}

 

dbuglab_0-1693897380785.png

 

banned
MMO1
Excursionist
42 0 4

Thank you!

anshuep
New Member
7 0 0

Hi,

 

I tried this and it looks perfect. Is there a way to make the number slider also transparent.

 

anshuep_0-1711353040697.png

 

DFU98
Excursionist
22 0 5

I tried this css but the arrows aren't clickable, Do they need JS to have that functionality?

MMO1
Excursionist
42 0 4

Would you mind helping me modify the slide heights as well?

 

https://community.shopify.com/c/shopify-design/dawn-slideshow-modify-slide-height/td-p/2211038

dbuglab
Shopify Partner
473 51 50

Hi @MMO1 

Please use this css.

.slideshow.banner.banner--medium {
    min-height: 100vh;
}
banned