dynamic checkout buttons layout not editable anymore?

[Numark]

I just realized that we cannot alter the layout the dynamic checkout buttons anymore in CSS. I am trying to get all the buttons to show up in one line instead of one below the other. I had styled it before but looks like Shopify has changed the output there. I have tried all the possible CSS but with no success.

I have tried the following:

#dynamic-checkout-cart .wallet-cart-grid {
    overflow: hidden;
    display: block;
}
#dynamic-checkout-cart .wallet-cart-button-container {
    width: 32%;
    float: left;
    margin-right: 2%;
    height: 45px;
}

This is just a float example, I event tried display: flex and display: table, but with no success.

I also tried this:

shopify-accelerated-checkout-cart {
    overflow: hidden;
    display: block;
}
shop-pay-wallet-button,
shopify-paypal-button,
shopify-google-pay-button {
    width: 32%;
    float: left;
    margin-right: 2%;
    height: 45px;
}

Again, I used different CSS like flexbox and table here also, but with no success.

Has anyone able to figure this out?

[namphan]

Hi @Numark,

Please send me the website link, I will check it for you

[Numark]

Upon further investigation I found out that those buttons are now under shadow root with the "closed" attribute meaning we cannot alter the CSS within that element. I tried going the JS way but that also isn't working.

const shadowRoot = document.querySelector('shopify-accelerated-checkout-cart').shadowRoot;
const ulElement = shadowRoot.querySelector('.wallet-cart-grid');

ulElement.style.display = 'grid';
ulElement.style.gridTemplateColumns = 'repeat(auto-fill, minmax(100px, 1fr))';
ulElement.style.gap = '10px';

[namphan]

Hi @Numark,

Please change code:

const element = document.querySelector('shopify-accelerated-checkout-cart');
const style = document.createElement('style');
style.innerHTML = '.wallet-cart-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:10px}';
element.shadowRoot.appendChild(style);

[Numark]

Hello @namphan 

Unfortunately that didn't work. I have tried every possible way to add custom css to that section after this recent update.

[namphan]

Hi @Numark,

Can I send you a collaborator invite? I will help you debug it