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

日本語 ディスカッション 技術的なQ＆A

AI-generated summary

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

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

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

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

1

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

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

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

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

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

2

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

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内のドキュメントを書き換えるという類のものなので、そちらの方向で調べて試されることをお勧めします。