How to edit this button?

Technical Q&A
1

Hopefully I can add something to the custom css section of the slideshow banner in the shopify editor.

https://empiricalwater.com/

Please see the banner image near the top that has the “Try a sample” button. I need the button background to be #ff0000, and the button text to be #ffffff, and I need the button text to be bold.

Dawn theme.

Thanks

2

Hi @empiricalarby ,

Is this the final result you want?

BSSCommerceTC_0-1720316967195.png
BSSCommerceTC_0-1720316967195.png947×531 531 KB

You can follows these steps

Step 1: Navigate to Online store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

.banner__buttons .button {
    background-color: #ff0000;
    color: #ffffff;
    border: 4px solid black;
}
1 Like
3

Thanks, I just need the text to be bold now :slightly_smiling_face:

4

Hi @empiricalarby ,

You can try this one

.banner__buttons .button {
    background-color: #ff0000;
    color: #ffffff;
    font-weight: 900;
}

Hope this can help you.

If our suggestion is useful, please let us know by giving it a like or mark as solution. Thank you :heart_eyes:

1 Like
5

And one last thing, how do I increase the padding of the button on the left and right side?

Screenshot 2024-07-06 193256.png
Screenshot 2024-07-06 193256.png823×331 300 KB

6

Hi @empiricalarby ,

You just need to increase the length of the button. For example:

.banner__buttons .button {
    background-color: #ff0000;
    color: #ffffff;
    font-weight: 900;
    width: 15rem !important;
}

Hope this can help you.

If our suggestion is useful, please let us know by giving it a like or mark as solution. Thank you :heart_eyes:

1 Like
7

I would also like to reduce the vertical padding. How can I do that? Thanks

8

Hi @empiricalarby ,

Of course, you can customize the height you want. It below like this

.banner__buttons .button {
    background-color: #ff0000;
    color: #ffffff;
    font-weight: 900;
    width: 15rem !important;
    height: 30px;
    min-height: 30px;
}
1 Like