Solved

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

IbrahimW
Excursionist
13 0 5

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

 

 

 

Screenshot 2024-01-04 144041.png

Accepted Solutions (2)

Made4uo-Ribe
Shopify Partner
5457 1314 1615

This is an 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:

Made4uoRibe_0-1704376604169.png

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
5457 1314 1615

This is an 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:

Made4uoRibe_0-1704749896144.png

 

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 5 (5)

iffikhan30
Shopify Partner
238 35 43

Hello @IbrahimW ,

 

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

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp

Made4uo-Ribe
Shopify Partner
5457 1314 1615

This is an 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:

Made4uoRibe_0-1704376604169.png

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


IbrahimW
Excursionist
13 0 5

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

IbrahimW
Excursionist
13 0 5

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
Screenshot 2024-01-09 000057.png

Made4uo-Ribe
Shopify Partner
5457 1314 1615

This is an 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:

Made4uoRibe_0-1704749896144.png

 

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com