FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

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

jarinkogirl
観光客
7 1 1

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

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

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

 

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

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

 

1件の返信1

Jizo_Inagaki
Shopify Partner
1185 425 720

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や指名による対応はご依頼として有料でのみ承ります。