Hello, the shop payment button is cutting off. I want to keep the buy buttons round as they are, but resizing them with the shopify default— “rounding - button corner radius” — is not fixing the problem of the shop payment button. is there css individual page code that can solve this? Or theme code?
Topic summary
Issue: The Shopify “Shop/Shopify payment” (dynamic checkout) button is visually cut off on a product page in the Impact theme. Adjusting the theme’s default “button corner radius” keeps rounded buttons but doesn’t fix the clipping.
Initial fix: A community member suggested adding custom CSS in theme.liquid before . The poster confirmed it resolved the issue initially (supported by a screenshot), though the exact CSS wasn’t shown.
Regression: The clipping returned later on the same product page, with a new screenshot and URL provided.
Proposed solution: Another member shared explicit CSS to apply per product template via the theme customizer’s custom CSS field:
- .shopify-payment-button__button,
- .shopify-payment-button__button–unbranded { height: 100%; }
This aims to ensure the dynamic checkout button’s full height renders and prevents cutoff while keeping rounded corners.
Notes: Images are central to demonstrating the visual issue and the initial fix. The first CSS details are missing; the second CSS is provided verbatim.
Status: No confirmation yet on the latest fix; outcome pending, discussion effectively open.
Hey @SamCheema
Welcome to Shopify Community.
You can add the given CSS in theme.liquid above tag.
OUTPUT:
Thanks
1 Like
Yes its worked thank you
Hi Sam,
Below is the custom css code which solved this issue on our store. You just need to go to Customize your theme and put it in custom css field of a product template :
.shopify-payment-button__button,
.shopify-payment-button__button–unbranded {
height: 100%;
}
Hope it helps
1 Like