dynamic checkout buttons layout not editable anymore?

[Patrciv]

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 @Patrciv,

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

[Patrciv]

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 @Patrciv,

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);

[Patrciv]

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 @Patrciv,

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

[anjali-chopra]

Since the last update, there are only a few customisation options available for the additional checkout buttons as they have been moved to shadowDOM. By default, the layout of the buttons is inline and you can change it to a vertical layout by adding an additional class ''

additional-checkout-buttons--vertical". 

I suggest you remove all previous styling and classes for it to work. If you want further customisations, the documentation for accelerated checkout buttons has info on exactly what can be modified. Hope this helps!

Accelerated Checkout Documentation