how do i use “Use outline button style” on the buttons in the cart page?
beacuse the bottom button is not without “Use outline button style” so it is not changing to the color i want and there is no setting for that
please help
Topic summary
Issue: The cart page’s bottom button isn’t adopting the theme’s “Use outline button style,” leaving it yellow with no visible setting to change it.
Actions taken:
- Store link was shared for review. A CSS fix was suggested targeting the cart footer submit button by section ID to make it transparent, add a 1px border, and remove box shadows (::before/::after).
- When that didn’t change the yellow button, another CSS rule was proposed for .shopify-payment-button__button–unbranded with background-color: transparent !important; and black text, plus a request for the exact button location/class if still failing.
Current status: The change appears in the theme editor/preview but remains yellow on the live site, as shown in screenshots. The helper awaits the exact live button selector (class/markup) to refine the CSS.
Notes:
- “Use outline button style” is a theme setting to render an outlined (transparent) button. The proposed fixes rely on CSS overrides, including !important, and specific selectors (section ID and Shopify payment button class).
- Screenshots are central to illustrate the preview vs live mismatch.
Outcome: No resolution yet; the thread is open pending the live button’s exact selector or further details.
Hi @Itamar2020 ,
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
my store url
Insert this CSS snippet into your CSS file:
#shopify-section-template--21878534373687__cart-footer .cart__footer button[type=submit] {
background-color: transparent;
border: 1px solid black;
outline: none;
}
#shopify-section-template--21878534373687__cart-footer .cart__footer button[type=submit]::before {
box-shadow: none;
}
#shopify-section-template--21878534373687__cart-footer .cart__footer button[type=submit]::after{
box-shadow: none;
}
Result:
**Hope it helps @Itamar2020 **
Hey @Itamar2020 ,
This is the code in my store:
.shopify-payment-button__button--unbranded {
background-color: transparent !important;
color: black;
}
Evidence image:
Hope it helps you. If it doesn’t work, can you find me exactly where that button is in the code and its class name and I will be able to help you better.
