How to change CSS of shoppy embedded widget?

Question

I'm setting up Shoppy on my website but I don't like the embed style. Is there a way to change the CSS from my code?

<script src="https://shoppy.gg/api/embed.js"></script>
<button data-shoppy-product="PRODUCT ID">Pay</button>

yes, include you own css file, lets call it theme.css as an example. inside theme.css you target the element you need to customize. — Vince, Aug 21 '19 at 13:14
Ok for example I have embed--header element. The bg color now is #1c2260 and I want to set to #000. When I do .embed--header {background: #000; } nothing change... — twnty, Aug 21 '19 at 13:17
Make sure your css loads after the script. if the element style is applied at runtime, you can overwrite the style programatically — Vince, Aug 21 '19 at 13:20
document.getElementsByClassName("embed--header")[0].style.backgroundColor = "#000"; — Vince, Aug 21 '19 at 13:25
Please provide a snippet, you do not have enough information to give you a concrete solution — Vince, Aug 21 '19 at 13:33
Run the file in the browser, press the pay button and inspect the blue element (Also can you please contact me on Discord to make it easier? twenty#6325) — twnty, Aug 21 '19 at 13:49
I see, the content is rendered in an iframe, check here: https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe — Vince, Aug 21 '19 at 13:57
I don't know how to insert all of that stuff in my html file... can you please help me? Oh and thank you so much for your patience — twnty, Aug 21 '19 at 14:01

score -1 · Answer 1 · answered Aug 22 '19 at 19:07

You have to include your own CSS file and have to overwrite the default CSS. You can overwrite the default CSS by adding a class selector with the default class selector in your CSS file and write your own CSS. For example, if the default CSS is,

.embed--header {
  background: #1c2260;
 }

then you can overwrite like this:

.embed--header.changebackground {
  background: #000;
 }

Be sure to give the class name as "changebackground" to your element, otherwise nothing change will happen.

How to change CSS of shoppy embedded widget?

1 Answers1