Solved

Change Checkout Button Color and Size MOTION THEME

richardlrnz
Excursionist
35 0 1

Can anybody tell me how i can change the color and the size of my checkout button on the product page in motion theme? i try this already for so long but all solutions i found here didnt work for me, i dont know why? 

 

need your help please 

Richard Lorenz
Accepted Solutions (6)

PageFly-Amelia
Trailblazer
163 52 65

This is an accepted solution.

Hello @richardlrnz 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
   .btn.cart__checkout {
      background-color: #yourcolor !important;
      color: #yourcolor !important;
      padding: #yourpadding !important;
      font-size: #yourfontsize !important;
   }
</style>

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

PageFly-Amelia
Trailblazer
163 52 65

This is an accepted solution.

Hello @richardlrnz

 

I apologize for the confusion. After checking again, please try again with the steps below.

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
   .btn.add-to-cart {
      background-color: #yourcolor !important;
      color: #yourcolor !important;
      padding: #yourpadding !important;
      font-size: #yourfontsize !important;
   }
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

BSS-Commerce
Shopify Expert
3477 461 516

This is an accepted solution.

Hello, to change the background color and size of the button, do the following:
1. Access your Shopify admin, select Themes
2. Select Edit code
3. In the code folder, search for the buttons.css (or buttons.css.liquid) file and add the following code at the bottom of the file:

.product-single__form button.btn.add-to-cart {
    background-color: #666 !important;
    color: black !important;
    padding: 20px !important;
    font-size: 19px !important;
}

 Note: for the background color, replace #666 with the RGB color code you want, similarly with color will be the text color. For padding and font size, replace the numbers above with the size you want to change.

Hope it helps! @richardlrnz 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

Hello @richardlrnz ,

Go to Shopify admin > themes > edit code > search base.css file

 

Add the given code in the base.css file at the bottom.

 

 

/* This code for changing the color of the checkout btn */
.UpcartDesignSettings__button:visited {
    background: #000;   
    color: #FFFFFF;


/* This code is for changing the size of the checkout btn */

.styles_Button__fullWidth__uCmBU {
    font-size: 20px !important;   
    line-height: 1.5;
    max-width: 100%;
    padding: 14px !important;     

 

save changes.

 

I hope this is helpful to you!

 

chekout btn.png

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

PageFly-Amelia
Trailblazer
163 52 65

This is an accepted solution.

Hello @richardlrnz ,

 

You can add the width and height properties to adjust the size of the button. Like below:

<style>
   .btn.add-to-cart {
      width: #yourwidth!important;
      height: #yourheight!important;
   }
</style>

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

PageFly-Amelia
Trailblazer
163 52 65

This is an accepted solution.

Hello @richardlrnz 


Sorry for the confusion, I can see the code you added for the button. You don't actually need  to add "#" to the code. I have an example below:
Example: 

<style>
   .btn.add-to-cart {
      width: 150px !important;
      height: 150px !important;
      color: red !important;
      padding: 150px !important;
      font-size: 12px !important;
   }
</style>

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

Replies 15 (15)

PageFly-Amelia
Trailblazer
163 52 65

This is an accepted solution.

Hello @richardlrnz 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
   .btn.cart__checkout {
      background-color: #yourcolor !important;
      color: #yourcolor !important;
      padding: #yourpadding !important;
      font-size: #yourfontsize !important;
   }
</style>

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

richardlrnz
Excursionist
35 0 1

hello amelia 

 

Unfortunately the solution doesn't work for me again. I did exactly what you told me, but it doesn't work.

Richard Lorenz
PageFly-Amelia
Trailblazer
163 52 65

This is an accepted solution.

Hello @richardlrnz

 

I apologize for the confusion. After checking again, please try again with the steps below.

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
   .btn.add-to-cart {
      background-color: #yourcolor !important;
      color: #yourcolor !important;
      padding: #yourpadding !important;
      font-size: #yourfontsize !important;
   }
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

richardlrnz
Excursionist
35 0 1

thank you so much, it finally worked! can you tell me how i can exactly change the size of the button? 🙂

 

at first i thought it was padding, i changed it to "150px" just to try out but nothing changed 

 

 

Richard Lorenz
PageFly-Amelia
Trailblazer
163 52 65

This is an accepted solution.

Hello @richardlrnz ,

 

You can add the width and height properties to adjust the size of the button. Like below:

<style>
   .btn.add-to-cart {
      width: #yourwidth!important;
      height: #yourheight!important;
   }
</style>

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

richardlrnz
Excursionist
35 0 1

hey amelia, i just put the code right above the tag </head> like the code for the button color too as you told me but unfortunately nothing changed. i tested different sizes like "150" or "150px" but it still doesnt work. 

Richard Lorenz
PageFly-Amelia
Trailblazer
163 52 65

This is an accepted solution.

Hello @richardlrnz 


Sorry for the confusion, I can see the code you added for the button. You don't actually need  to add "#" to the code. I have an example below:
Example: 

<style>
   .btn.add-to-cart {
      width: 150px !important;
      height: 150px !important;
      color: red !important;
      padding: 150px !important;
      font-size: 12px !important;
   }
</style>

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

richardlrnz
Excursionist
35 0 1

Where I changed the size of the button, I noticed that the button was too big for the mobile shop. but for the pc browser shop its perfect. how can i change the size only for the browser or only for the mobile shop. 

 

thank you for your support!!!

Richard Lorenz
PageFly-Amelia
Trailblazer
163 52 65

Hello @richardlrnz 


Can you resize on mobile like my code below?

<style>
@media (max-width: 767px) {
.btn.add-to-cart {
      width: 150px !important;
      height: 150px !important;
      color: red !important;
      padding: 150px !important;
      font-size: 12px !important;
   }
}

</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

websensepro
Shopify Partner
1014 139 147

Hello @richardlrnz ,

Can you please share the store URL, then I will help you

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
richardlrnz
Excursionist
35 0 1

https://barsenz.com/

 

thank you 

Richard Lorenz

BSS-Commerce
Shopify Expert
3477 461 516

Hi @richardlrnz ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

richardlrnz
Excursionist
35 0 1

https://barsenz.com/

 

thank you !

Richard Lorenz
BSS-Commerce
Shopify Expert
3477 461 516

This is an accepted solution.

Hello, to change the background color and size of the button, do the following:
1. Access your Shopify admin, select Themes
2. Select Edit code
3. In the code folder, search for the buttons.css (or buttons.css.liquid) file and add the following code at the bottom of the file:

.product-single__form button.btn.add-to-cart {
    background-color: #666 !important;
    color: black !important;
    padding: 20px !important;
    font-size: 19px !important;
}

 Note: for the background color, replace #666 with the RGB color code you want, similarly with color will be the text color. For padding and font size, replace the numbers above with the size you want to change.

Hope it helps! @richardlrnz 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

websensepro
Shopify Partner
1014 139 147

This is an accepted solution.

Hello @richardlrnz ,

Go to Shopify admin > themes > edit code > search base.css file

 

Add the given code in the base.css file at the bottom.

 

 

/* This code for changing the color of the checkout btn */
.UpcartDesignSettings__button:visited {
    background: #000;   
    color: #FFFFFF;


/* This code is for changing the size of the checkout btn */

.styles_Button__fullWidth__uCmBU {
    font-size: 20px !important;   
    line-height: 1.5;
    max-width: 100%;
    padding: 14px !important;     

 

save changes.

 

I hope this is helpful to you!

 

chekout btn.png

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here