Bigger "add to cart" button, Bold price and button, round edges for custom theme

[IbrahimW]

Hi,

I have a custom theme and I can't seem to find a way to make the "add to cart" bigger and making it bold. The other thing is to disable the hover feature of the 'Buy it now' and also bolding the price in green. I also really want all the images and the buttons to have slightly round edges.

I would highly appreciate this help, I have spent quite a bit of time trying to figure these things out.

This is my website www.barakatbazaar.com

[Made4uo-Ribe · Accepted solution]

Hi @IbrahimW 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

button.btn-atc.btn.btn-primary.w-100 {
    font-size: 20px;
    font-weight: 900;
    padding: 0px;
}

button.btn-buy.btn.btn-sm.btn-outline-secondary.w-100 {
   background: #044040;
   color: white;
   font-size: 20px;
}
.container * {
    border-radius: 10px;
}

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[iffikhan30]

Hello @IbrahimW ,

I suggest you, you activate dawn theme, for your current theme have many issues, you just activate DAWN, see the magic.

[Made4uo-Ribe · Accepted solution]

Hi @IbrahimW 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

button.btn-atc.btn.btn-primary.w-100 {
    font-size: 20px;
    font-weight: 900;
    padding: 0px;
}

button.btn-buy.btn.btn-sm.btn-outline-secondary.w-100 {
   background: #044040;
   color: white;
   font-size: 20px;
}
.container * {
    border-radius: 10px;
}

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[IbrahimW]

Marvellous!
Thanks a bunch. This is an immense help.

[IbrahimW]

Hi again,
Two more small things mate, how do you make the "add to cart" button and "buy it now" button all UPPERCASE? And how do you change color to highlight words in a subtitle like the one in the ss:
I want to change the colour of the words "Sunset lamp" in all three images with texts on that page.
www.barakatbazaar.com

[Made4uo-Ribe · Accepted solution]

Check this one for the uppercase. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

button.btn-atc.btn.btn-primary.w-100, button.btn-buy.btn.btn-sm.btn-outline-secondary.w-100 {
    text-transform: uppercase !important;
}

And save. 

Result:

For the color in of the word that need to have html code and Javascript. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!