I can't make any changes.

Technical Q&A
, , ,
1

Has anyone else encountered this? I’m trying to change the styles in the basket, but nothing works. Where can I go for help, or is there a solution? I understand that styling blocks “#shadow-root (closed)”. Is there a way to get around this or write it somewhere?

2025-05-29_14-21.png
2025-05-29_14-21.png1418×606 81.7 KB

2

Hello @Lileis

Yes, this is a common issue when dealing with elements inside a closed Shadow DOM (i.e., #shadow-root (closed)). Here’s a quick breakdown and some guidance:

What’s the issue?

When you see #shadow-root (closed), it means the component is encapsulated in a closed Shadow DOM, which is deliberately made inaccessible to external JavaScript and CSS. That’s why your styles aren’t applying — they can’t reach inside.

**Solutions & Workarounds:**1. Check if the component can be configured:

  • If it’s a third-party app or widget (like Shopify’s dynamic checkout button, product reviews, etc.), check the app’s settings.

  • Many apps provide customization options or allow you to inject CSS through their configuration.

  1. Use JavaScript to detect and modify (only possible if it’s open):

    • With open Shadow DOMs, you can access and style via JS:

      const shadow = document.querySelector('selector').shadowRoot;
shadow.querySelector('element-inside').style.color = 'red';

    • But for closed, this won’t work — it’s locked down.

  2. Contact the App Developer:

    • If it’s an embedded app (especially in Shopify), the best path is to reach out to the app developer for styling hooks or options.

  3. Look for Shopify Overrides (if it’s Shopify related):

    • Some default components, like the Shopify dynamic checkout button, are not styleable due to security/payment compliance. You can replace them with your own styled buttons and manually trigger cart events using Shopify’s AJAX API.

Recommendation:- Identify which part of the cart/basket is using the closed Shadow DOM.

  • See if it’s an app or built-in Shopify feature.

  • If it’s from an app, check documentation or contact support for style overrides.

  • If you control the source, consider avoiding Shadow DOM unless encapsulation is absolutely required.

    Let me know if you have any issues!

3

Unfortunately, it doesn’t work. It’s Shopify code, not an app. Where can I go to get help solving this problem? I contacted them via chat here https://help.shopify.com/en/, but they said they couldn’t help and sent me here.

{%- if additional_checkout_buttons -%}
                
                  {{ content_for_additional_checkout_buttons }}
                

              {%- endif -%}