Change or modify the slideshow button on mobile - Dawn Theme

Store Design
, , , , ,
1

Hello everyone,

I’m creating my page, and when switching to the mobile version, the button that should appear over the slideshow image looks like this.

image.png
image.png450×740 13.9 KB

I don’t remember changing anything in the code regarding that.

I’d like to know how to fix it. Im using Dawn Theme, help me with the default code I understand it’s related to the container, but I’m not sure which part of the code needs to be modified.

2

Hello @Vilcka

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

thanks!

my page is www.voir.cl

pass: pedobear

4

Hello @Vilcka
You need to add the arrow at the bottom. Whenever you add it, could you send a screenshot?

devcoders_0-1732427337262.png
devcoders_0-1732427337262.png702×550 17.9 KB

5

The arrows are a custom design, befere i made the changes it looks the same

i ‘ve made the changes and still looks looks like that

6

Hi @Vilcka

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.slideshow__controls.slider-buttons.slideshow__controls--border-radius-mobile {
    top: 30% !important;
}
}

Here is the result: https://prnt.sc/Qjn00wxcjO-I

I hope this helps

Best,

Daisy

7

I tried it, and the blue box around the button still appears, I need to remove that and have the button appear in the same place that the photo image, something like this.

image.png
image.png492×716 318 KB

8

Solution: https://www.youtube.com/watch?v=gtjjCeUeOI4