Modifying Debut theme Button on Sildeshow Position

Store Design
1

Hello friends!

I would like to move the standard button on my homepage slideshow to the bottom left of my slideshow images - so it can say “BUY NOW” - without being in the middle of the product image…

It is not included in the screenshot - because if I add the button onto the slideshow - it is directly in the center of my graphic and the theme comes with no way of modifying it…

Can someone kindly offer me a solution to changing the position of the button on the Debut theme??? Would like to be toward the bottom of the left hand side of the image.

Attached is a screenshot - and the URL is https://www.metahuman.com

Screen Shot 2021-10-07 at 6.29.44 PM.png
Screen Shot 2021-10-07 at 6.29.44 PM.png3338×1808 781 KB

2

Hii, @joshua808
Kindly upload your “Buy Now” button so,
I can solve it perfectly.
Thank You.

3

Hey my friend! @Zworthkey

The button that comes with the theme is automatic - I was wondering if the standard button on the theme could just be repositioned…

Or I can have my graphic designer make one?

Does it need to be a JPG file?

Do you have one that would look good if it needs to be separate from what comes with the theme?

The theme just has button input values where you type what you want the button to say - then it automatically generates a button.

Please see attached image to see what I’m talking about:

Screen Shot 2021-10-07 at 8.40.19 PM.jpg
Screen Shot 2021-10-07 at 8.40.19 PM.jpg3164×1726 463 KB

4

then what you want. You want to design button image.
I don’t get you actually.

5

@joshua808

button not display in slider please active button on slide i will check and send solution for you.

Thanks!

6

@dmwwebartisan

Okay!

I made the buttons active - now they are in the middle of the graphic.

Will leave it this way until I hear back from you on solution - of how to bring button to the bottom left corner,.

Thank you so much!!!

Also is it possible to change color of the button to white with the font black (inverse standard preset colors)

7

Hii, @joshua808
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {
a.btn.slideshow__btn {
    margin-left: -1052px !important;
    margin-top: 37% !important;
}
}
a.btn.slideshow__btn {
  background-color: white !important;
    color: black !important;
}

Thank you.

8

@Zworthkey

Hey thank you so much!

It works great!

Is there a way I can add a rollover code so that when someone puts the cursor over it it changes colors like instead of black and white - it turns inverse on rollover?

Also I wanted to ask you -

Do you know a code I can use to make the slider images stay the same relative size when the screen size changes?

When the theme goes into cell phone mode the graphics get cut off and I would love for it to stay the same relative size - basically remove the auto adjust - or add an auto adjust that keeps the slider images the same relative size.

Thank you so much for your time and excellent help!

9

@joshua808

Please add the following code at the bottom of your assets/theme.css file.

@media (max-width: 749px){
.slideshow {max-height: 31vh !important;}
.slideshow__image{background-size: contain !important;}
}

Thanks!