How can I update CSS styles inside an iframe (iframe has class but no ID) on a Shopify page?

Shopify Discussion
1

I’m trying to update the CSS of an element that exists inside an iframe on a Shopify page, and I’m hitting some limitations.

Context:

  • The iframe is injected by a Shopify app / third-party script.

  • The iframe has a class but no ID.

  • The element inside the iframe I want to style does not have a unique ID.

  • The iframe content loads dynamically after the page has loaded.

  • I do not have direct access to the iframe’s source HTML.

  • The iframe appears to be same-origin, but I’m not fully certain.

What I’ve tried so far:

  • Targeting the iframe via its class using theme CSS (doesn’t affect inner content).

  • JavaScript to wait for the iframe to load, then attempt to query elements inside it.

  • MutationObserver to detect changes in iframe content.

  • Attribute selectors and :nth-child() as fallbacks for elements without IDs.

Main questions:

  1. Since the iframe has a class but no ID, what is the recommended way to reliably target it in Shopify?

  2. If the iframe is same-origin, what is the best JavaScript approach to access and style elements inside it?

  3. If it’s cross-origin, are there Shopify-safe alternatives (app settings, CSS variables, injected styles, or overrides)?

  4. What are the best practices for handling dynamically loaded iframe content in Shopify themes without breaking on updates?

I’m aiming for a maintainable solution, not a brittle workaround that could fail after app or theme updates.

Any advice or examples from Shopify experts would be greatly appreciated.

Thanks in advance :folded_hands:

2

Hi @Austin02

Welcome to the community.

You can change nothing inside an iframe with CSS. If it is same-origin, for JS maybe but still there could be other solutions then.

Could you share a link to your store?

3

Thanks for you reply. Unfortunately currently, I can’t store URL because customer don’t want it. But I can tell you the status. The ifram is inserted in the page though liquid code input field in the admin.

4

OK but can you at least describe where that iframe content comes from?
You said “is inserted in the page through the liquid code input field in the admin” so the Custom Liquid section?

5

Yeah, I’ve made the new section that can input the code to the page, and set the code.

6

So does it show content from the same website? I mean, it would be strange if it is and there are alternatives. Can you explain more.

8

Currently, I use the Hulk app to build the custom form. But there I can’t change the style. How can I change the style without pro plan?