How to change button color and add border? Lorenza Theme

Store Design
1

I’m looking to change the rectangle button color of where it says “Shop Now” to white inside and add a black thin border around it. Also at the same time change the font color of the button to black.

In addition I would like to do the same change to all of the “on sale” descriptors on the product listings.

here’s my website URL: www.houseofdakh.com

thanks in advance!

2

I think this is correct, if you go to Theme, Theme settings, Customize, you should be on your home page. Look bottom left corner and click on Theme Settings.

A section will appear on the right side of your page with a Buttons section. You can change settings there, and at the top of the list is Colors where you can change colours in your theme or buttons as well.

3

Yes i’ve tried that before but oddly enough, changing the ‘button background’ color doesnt do anything to any buttons.

the only way i can change the button background right now is if i change the ‘accent color’, but once i do so the white text on white button makes the text impossible to see. from here, there’s no way to change the button text color.

any help?

4

Try change the text color, here “solid button color”

Screen Shot 2022-04-21 at 2.02.53 PM.png
Screen Shot 2022-04-21 at 2.02.53 PM.png528×522 34.3 KB

5

This is for lorenza theme? i dont have that option.

6

Sorry, I didnt know what theme, should have checked, cant help you, sorry, maybe contact support directly for help. Good luck

7

@ELBOY , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.image-hero__link{
    background-color: #000 !important;

    color: #fff !important;
}

Kind regards,
Diego

8

Thanks for that, works just fine. Do you know how to do this with all the “On Sale” badges on product photos?

9

Please add below css in bottom of assets/theme.css file
.image-hero__content-container a.image-hero__link.bttn.bttn–inline {
border: 2px solid #000;
}
.product-item .badge {
background: #fff;
color: #000;
border: 2px solid #000;
}

Thank you.

1 Like
10

@ELBOY ,

You’re welcome.

Kindly make sure to click on the button “Accept as Solution” below whichever answers solved your problem.

This way people with similar issues can also benefit from this in the future.

Kind regards,
Diego

11

Could you help me to do the same to the “On Sale” badges on product photos?

thanks

12

Thank you, this was just what I needed!