1

Basically my question is as exactly as the title suggest.

I want to override the css styling of Shopify's embedded buy button iframe, but I am not sure how.

I as assuming this will be extremely tricky, if not impossible? As I have tried many things and it seems that all of my css affecting the Shopify's embedded button is ignored.

I have tried adding !important to styling and this doesn't seem to do anything either.

Is there a way to add styling after the iframe has loaded in browser? I am guessing that this is the last thing that loads, hence why my css is being ignored/overwritten.

Any help would be great.

PS. I do not have a website link to provide as it is for a client and a signed NDA has legally prevented me from uploading the site, even in a test environment.

Thanks,

zarate32
  • 29
  • 1
  • 6
  • Possible duplicate of [How to apply CSS to iframe?](http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) – Seth McClaine Mar 01 '16 at 22:16
  • Possible duplicate of [Using CSS to affect div style inside iframe](http://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe) – Alexander O'Mara Mar 01 '16 at 22:16
  • Did you post this as a job on PPH? I referred the chap to stack overflow... – Rob Mar 02 '16 at 14:49

1 Answers1

0

Currently, the only supported customizations are the ones listed here. There's no way to override styles within an iframe on another domain. However, we've built the JS Buy SDK to support greater customization, though it would require more intensive development. That said, there are some examples you could use to get started.

richgilbank
  • 414
  • 2
  • 5