# BuyButtonに独自のスタイルシートは当てれないのでしょうか？

**URL:** <https://community.shopify.com/t/buybutton/40667>\
**Category:** 技術的なQ＆A\
**Created:** [March 24, 2021, 2:26am UTC](https://community.shopify.com/t/buybutton/40667 "2021-03-24T02:26:02Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

WordPressに埋め込んだShopifyのBuy Buttonで、JSONによるスタイル調整ではメディアクエリが効かない箇所や、擬似要素・toggle周りの装飾に限界があるという相談です。サイト側の<head>で読み込んだCSSも反映されず、独自スタイルシートを当てられるかが焦点になっています。

回答では、Buy Buttonがiframe内に描画されるため、通常の外部CSSは届かない可能性が高いと示唆されています。そのうえで、JavaScriptで対象iframeを取得し、iframe内のheadにCSSを挿入する方法が提案されました。

- 対象: `#collection-component-xxxxx iframe`
- 方法: `contentWindow.document` 経由で `head` にCSSを追加
- 注意点: サンプルはChromeでのみ確認、`setTimeout` も暫定的

結論として、標準的に独自CSSを直接適用する方法の確定回答はなく、iframe内ドキュメントの書き換えで回避する案が出た段階です。

<div class="post-metadata">

**Author:** ![jarinkogirl](https://avatars.discourse-cdn.com/v4/letter/j/ce73a5/32.png) [@jarinkogirl](https://community.shopify.com/u/jarinkogirl)\
**Post date:** [March 24, 2021, 2:26am UTC](https://community.shopify.com/t/buybutton/40667/1 "2021-03-24T02:26:02Z")

</div>

現在、コレクションのBuybuttonをwordpressの記事に埋め込んでいます。

JSONでスタイルの調整を行っておりましたが、メディアクエリで指定したスタイルが当たらない箇所が複数あり（擬似要素やtoggleなど）、

JSONではなく、独自で用意したスタイルシートを読み込み、反映できないものかと思っております。

仕様上（？）、サイトので読み込んでいるcssなどは現時点で反映されていないようです（cssに記述をしてもスタイルは当たりませんでした）。

もし、ご存知の方がいらっしゃいましたら、方法を教えていただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [April 7, 2021, 11:51am UTC](https://community.shopify.com/t/buybutton/40667/2 "2021-04-07T11:51:00Z")

</div>

Chromeでしか確認していませんが試したところエラーは出なかったので、恐らく以下のようなJSで実現はできるかとは思います。他のブラウザで動かなかった場合は申し訳ありません。

```javascript
const addStyleSheet = () => {
  // 以下の#collection-component-xxxxxはBuybutton用のコードの上部にあるdivのidを指定
  const t = document.querySelector('#collection-component-xxxxx iframe');
  const css = ``;
  t.contentWindow.document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend',css);
}
window.setTimeout(addStyleSheet, 2000);

```

setTimeoutで2秒後に実行したりと全体的に適当に作っていますので、適宜変更された方が良いと思います。

なおこの件はShopify特有のものではなくiframe内のドキュメントを書き換えるという類のものなので、そちらの方向で調べて試されることをお勧めします。