Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: dynamic checkout buttons layout not editable anymore?

dynamic checkout buttons layout not editable anymore?

Numark
Shopify Partner
5 0 1

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?

Replies 5 (5)

namphan
Shopify Partner
1915 248 275

Hi @Numark,

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

Numark
Shopify Partner
5 0 1

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
Shopify Partner
1915 248 275

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);
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
Numark
Shopify Partner
5 0 1

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
Shopify Partner
1915 248 275

Hi @Numark,

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com