Chromeでしか確認していませんが試したところエラーは出なかったので、恐らく以下のようなJSで実現はできるかとは思います。他のブラウザで動かなかった場合は申し訳ありません。
const addStyleSheet = () => {
// 以下の#collection-component-xxxxxはBuybutton用のコードの上部にあるdivのidを指定
const t = document.querySelector('#collection-component-xxxxx iframe');
const css = `<link rel="stylesheet" type="text/css" media="screen" href="https://example.com/example.css" />`;
t.contentWindow.document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend',css);
}
window.setTimeout(addStyleSheet, 2000);
setTimeoutで2秒後に実行したりと全体的に適当に作っていますので、適宜変更された方が良いと思います。
なおこの件はShopify特有のものではなくiframe内のドキュメントを書き換えるという類のものなので、そちらの方向で調べて試されることをお勧めします。
Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
