Liquid、JavaScriptなどに関する質問
現在、コレクションのBuybuttonをwordpressの記事に埋め込んでいます。
JSONでスタイルの調整を行っておりましたが、メディアクエリで指定したスタイルが当たらない箇所が複数あり(擬似要素やtoggleなど)、
JSONではなく、独自で用意したスタイルシートを読み込み、反映できないものかと思っております。
仕様上(?)、サイトの<head>で読み込んでいるcssなどは現時点で反映されていないようです(cssに記述をしてもスタイルは当たりませんでした)。
もし、ご存知の方がいらっしゃいましたら、方法を教えていただけますと幸いです。
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内のドキュメントを書き換えるという類のものなので、そちらの方向で調べて試されることをお勧めします。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025