Change Checkout Button Color and Size MOTION THEME

[richardlrnz]

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 

[PageFly-Amelia · 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

[PageFly-Amelia · 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>

[BSS-Commerce · 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 

[websensepro · 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!

[PageFly-Amelia · 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>

[PageFly-Amelia · 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

[richardlrnz]

hello amelia 

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

[PageFly-Amelia · 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>

[richardlrnz]

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 

[PageFly-Amelia · 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>

[richardlrnz]

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. 

[PageFly-Amelia · 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>

[richardlrnz]

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!!!

[PageFly-Amelia]

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>

[websensepro]

Hello @richardlrnz ,

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

[richardlrnz]

https://barsenz.com/

thank you 

[BSS-Commerce]

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.

[richardlrnz]

https://barsenz.com/

thank you !

[BSS-Commerce · 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 

[websensepro · 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!