Goal: remove a sudden white line around the “Continue shopping” button on the empty cart page, make the green outline squared, and reduce its thickness to match product “Add to cart” buttons. A screenshot illustrates the issue on the Dawn theme cart page.
Diagnosis: a custom CSS rule in base.css (line 1) applies border-radius: 0 !important to button pseudo-elements (::before and ::after), including Shopify payment buttons. In Dawn, buttons use these pseudo-elements for outlines styled via theme variables. The !important override blocks those variables, causing the white line and inconsistent styling.
Key technical terms:
Proposed fix:
Status: guidance provided; awaiting confirmation of fix (no final resolution yet).
Hello!
See above, I would like to remove this white line that has suddenly appeared around the ‘Continue shopping’ button in an empty cart. Also to make the green outline squared, not rounded, and reduce the line thickness to match the ‘Add to cart’ buttons on product pages.
The site is https://plantedjournal.shop/cart
Any help would be greatly appreciated!
Hello @antoinelacour
It seems like you have added css code that sets the border radius to 0!important
base.css line: 1
.button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .button:after, .shopify-payment-button__button--unbranded:after {
border-radius: 0!important;
}
This prevents all other classes from having effects because its set as !important.
If you want to fix that remove the !important statement and change your button radius in settings again.
The white lines are coming from the ::after and ::before elements all buttons have in Dawn Theme. Your Settings write the global variables which apply to those elements. The border-radius:0!important statement prevents those variables from applying.
If you need further help just reply here.
Best Regards Erik