Hi Everyone,
noticed my custom css doesn’t work anymore. Shopify started adding shop pay button with shadow-root. Not sure how to overwrite it. Tried with CSS and js. But no luck. Right now, it looks like this:
I guess you familiar with code, so you can try with code here:
//host is the element that holds the shadow root:
var style = document.createElement( 'style' )
style.innerHTML = '.the-class-name { property-name: my-value; }'
host.shadowRoot.appendChild( style )
I tried almost the same solution, but no luck. shadowRoot always empty(element is found) I guess the problem it could be with nesting and the difference between closed and open shadow-root. For me it looks like it should be simple solution with @Shopify_77 And it really strange that only me facing same issue. Html look like this:
To change the dynamic button height you need to add this code to your .css file
shopify-accelerated-checkout {
--shopify-accelerated-checkout-button-block-size: max(48px);
}