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
Topic summary
Goal: change the checkout button’s color and size on the Motion theme product page.
What was tried:
- Adding custom CSS in theme.liquid above (suggested twice) did not work for the requester.
- Partners requested the store URL (barsenz.com) to inspect.
Working approaches shared:
- Edit buttons.css (or buttons.css.liquid) and target .product-single__form button.btn.add-to-cart with background-color, text color, padding, and font-size (using !important).
- Edit base.css and style selectors like .UpcartDesignSettings__button:visited (color) and .styles_Button__fullWidth__uCmBU (font-size, padding). A reference image was attached.
Outcome:
- The requester confirmed the CSS changes “finally worked.” Padding alone didn’t change overall size as expected and asked how to adjust exact size.
Further guidance and open items:
- Suggestions to use width and height were given, but attempts placed above didn’t take effect; clarifications followed (e.g., avoid adding “#”), with code details not clearly provided in-thread.
- The requester asked for different sizes on desktop vs mobile; a mobile-specific adjustment was suggested (likely via CSS media queries), but the final responsive solution remains unclear/ongoing.
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
Hoping my solution helps you solve your problem.
Best regards,
Amelia | PageFly
1 Like
Hello @richardlrnz ,
Can you please share the store URL, then I will help you
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.
hello amelia
Unfortunately the solution doesn’t work for me again. I did exactly what you told me, but it doesn’t work.
thank you
thank you !
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
1 Like
Hello, to change the background color and size of the button, do the following:
- Access your Shopify admin, select Themes
- Select Edit code
- 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
1 Like
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!
1 Like
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
Hello @richardlrnz ,
You can add the width and height properties to adjust the size of the button. Like below:
1 Like
hey amelia, i just put the code right above the tag 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.
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:
1 Like
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!!!