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

Store Design
,

Topic summary

A user seeks to add a border or background to the checkout button in their cart dropdown on goodwinegoodpeople.com, wanting it to stand out without affecting other header buttons. They reference wanting it to match the styling of their ‘Add to basket’ button on product pages.

Troubleshooting attempts:

  • Multiple CSS solutions were suggested targeting .btn.cart__checkout in various files (base.css, theme.css)
  • User encountered issues locating the correct CSS file—their theme only contains ‘theme.css.liquid’ in assets, not the standard base.css or theme.css files suggested
  • Initial code snippets added to theme.css.liquid produced no visible changes

Resolution:
After several iterations, the user successfully added custom CSS through the header section’s custom CSS box (not the assets folder). The solution appears to have worked, with the user confirming the checkout button now displays the desired border styling.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

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.32.04.png1180×1146 236 KB

Screenshot 2023-10-10 at 10.34.06.png
Screenshot 2023-10-10 at 10.34.06.png1782×728 121 KB

2

Hi @gwgp

Can you please share store URL?

3

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

4

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.

5

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;
}
6

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

7

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

8

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.

9

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

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

10

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;
}
11

No change I’m afraid.

12

No change I’m afraid.

13

…it’s the first line in the post.

14

Hello @gwgp

image.png
image.png1922×875 464 KB

15

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