edit the "view cart" & "checkout" button in Studio theme

[shopcheri]

I have to edit view cart and checkout buttons.

1.make first letter of view and checkout to small case.

2.change colour theme to 

background: FAF8F1

text: D94F16

solid button background: FAF8F1

solid button label: D94F16

outline button: BC5631

URL :

shopcheri.co

[Liquid_xPert_SJ]

Hi ,@shopcheri 

please share your store URL for exact solution code OR Below code is my observation according to the dawn theme.

you can add this css code to your base.css file and see the results.

Online Store > Edit Code >  Assets > base.css file

.cart-notification-wrapper #cart-notification-button {
	background-color: #FAF8F1;
	color: #D94F16;
	border: 1px solid #BC5631;
}
.cart-notification-wrapper #cart-notification-form button {
	background-color: #FAF8F1;
	color: #D94F16;
}
.cart-notification-wrapper #cart-notification-form button:before,
.cart-notification-wrapper #cart-notification-form button:after {
display:none;
}

Thanks

[Dan-From-Ryviu · Accepted solution]

HI @shopcheri 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

cart-notification #cart-notification-button {
    text-transform: lowercase;
}
.cart-notification.active {
    background: #FAF8F1;
}
cart-notification #cart-notification-button, 
cart-notification #cart-notification-form button {
    background: #FAF8F1;
    color: #d94f16;
}
cart-notification #cart-notification-button:after, 
cart-notification #cart-notification-form button:after {
box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) #bc5631, 0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background)) !important;
}

[shopcheri]

thankyou. this worked!!

[shopcheri]

So I just tried the mobile version and it hasn’t worked on that yet.

this is what I’m seeing! 
please check!

[websensepro]

Hi @shopcheri 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.cart-notification.active {
    background: #FAF8F1;
}
.cart-notification__links .button {
    background: #FAF8F1;
    color: #D94F16;
    text-transform: lowercase;
}

.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded {
    --border-opacity: none;
    border: 1px solid #BC5631 !important;
 
}

.button:after {
    --border-opacity: none !important;
    border: 1px solid #BC5631;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Made4uo-Ribe]

Hi @shopcheri 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
a#cart-notification-button {
    text-transform: lowercase !important;
}

form#cart-notification-form .button--primary {
    background-color: #FAF8F1;
    text-transform: lowercase !important;
    color: #D94F16;
    box-shadow: none;
}

form#cart-notification-form .button--primary .color-scheme-5 {
    --color-button: none;
}

form#cart-notification-form .button--primary:after, 
a#cart-notification-button:after {
    box-shadow: 
        0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(24, 86, 108, 0), 
        0 0 0 var(--buttons-border-width) rgba(188, 86, 49, 0.5), 
        0 4px 6px rgba(188, 86, 49, 0.5);
}

div#cart-notification {
    background: #FAF8F1;
}

div#cart-notification * {
    color: #D94F16;
}
</style>

• And Save. 
• Result:
• 

Let me know if im missing somwething. 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!