Add a border (or background) to the checkout button in the cart dropdown

Solved

Add a border (or background) to the checkout button in the cart dropdown

gwgp
New Member
8 0 0

Website: goodwinegoodpeople.com

 

Trying to add a border (or background) to the 'CHECKOUT' button to identify it as a button without affecting the formatting of other buttons in the header. Ideally it looks just like the border around the 'Add to basket' button on the product pages (2nd image). Thanks for your help.

 

Screenshot 2023-10-10 at 10.32.04.png

 

Screenshot 2023-10-10 at 10.34.06.png

Accepted Solution (1)
oscprofessional
Shopify Partner
15961 2387 3095

This is an accepted solution.

Hello @gwgp 

image.png

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 14 (14)

laddisahsi
Shopify Partner
385 38 40

Hi @gwgp 

Can you please share store URL?

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
gwgp
New Member
8 0 0

...it's the first line in the post.

PageFly-Theodor
Shopify Partner
691 86 98

Hi @Gwgp
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Add A Border (Or Background) To The Checkout Button In The Cart Dropdown, let’s try this solution:
Online Store ->Theme ->Edit code
Assets ->Base.css

.btn.cart__checkout {
    border: 1px solid;
    border-color: var(--colorTextBody);
}


I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | 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.

gwgp
New Member
8 0 0

Thanks for the prompt reply, however I cannot locate Base.css in the Asset dropdown? I created an asset with Base.css, added the code, but no change. Thanks for your help.

PageFly-Theodor
Shopify Partner
691 86 98

Hi @Gwgp
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Add A Border (Or Background) To The Checkout Button In The Cart Dropdown, let’s try this solution:
Online Store ->Theme ->Edit code
Assets ->theme.css

.btn.cart__checkout {
    border: 1px solid;
    border-color: var(--colorTextBody);
}
 

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | 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.

gwgp
New Member
8 0 0

Perhaps noteworthy, the only 'theme' I have in assets is 'theme.css.liquid' ...unfortunately there was no change when I added the code here. 

PageFly-Theodor
Shopify Partner
691 86 98

Hi @Gwgp
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Add A Border (Or Background) To The Checkout Button In The Cart Dropdown, let’s try this solution:
Online Store ->Theme ->Edit code -> theme.liquid

 

 

<style>
	.btn.cart__checkout {
    border: 1px solid;
    border-color: var(--colorTextBody);
}
</style>

 

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | 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.

gwgp
New Member
8 0 0

No change I'm afraid.

oscprofessional
Shopify Partner
15961 2387 3095

Hello @gwgp 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

button.btn.cart__checkout {
    border: 1px solid #000 !important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
gwgp
New Member
8 0 0

Thanks for your response. Perhaps noteworthy, the only 'theme' I have in assets is 'theme.css.liquid' ...unfortunately there was no change when I added the code here. 

oscprofessional
Shopify Partner
15961 2387 3095

Hello @gwgp 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.payment-buttons .cart__checkout {
    border: 1px solid #000;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
gwgp
New Member
8 0 0

No change I'm afraid. 

oscprofessional
Shopify Partner
15961 2387 3095

This is an accepted solution.

Hello @gwgp 

image.png

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
gwgp
New Member
8 0 0

I was able to add the code to the custom css box for the header section! Looks great, thanks!