カートページの動的チェックアウトボタンに適用されているcssにつきまして

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

AI-generated summary

主題: カートページに表示される動的チェックアウト（Google Pay／Shop Pay／PayPal）ボタンのCSSの所在と上書き方法。

要点:

  • 該当CSSはテーマファイル内ではなく、Shopify側が出力するstyleタグ内にあるため、テーマには記述がない。
  • 幅などの見た目調整は、ボタンを包含する親要素にCSSを適用する、またはHTML構造を適切に組み替えることで対応可能。

!importantへの対応:

  • CSSの優先度（specificity）を踏まえ、より強いセレクタや記述位置の調整、必要に応じて自前の!importantで上書きを検討。参考資料としてMDNのドキュメントリンクが提示された。

アクション／結果:

  • 投稿者は親要素にCSSを当てる方法で試す方針。

ステータス:

  • 解決方向で進行中。大きな異論なし。
1

いつもお世話になっております。

決済方法で、Google payやShop pay、paypalなどを有効にしていると、「ご購入手続きへ」のボタンの下に各決済方法のボタンが表示されるかと思います。

このボタンの表示を少し修正したい（widthなど）と思うのですが、適用されているCSSがテーマファイルの中にありません。

このCSSはどこから読み込まれているものなのでしょうか？

また、上書きしたいスタイルに既に「!important」が付けられている場合は、スタイルを上書きする方法はないでしょうか？

よろしくお願いいたします。

2

基本的な指定はShopify側から出力されるstyleタグ内にあり、テーマ内に記述はないと思います。

幅に関してはテーマ側の構造次第なので、ボタンを包含する要素に対してCSSを当てるなり、適した構造に作り替えるなりすれば変更できると思います。

importantに関しましては以下のページなど、CSSに関するドキュメントを参照ください。

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity#!important_%E3%81%AE%E4%BE%8B%E5%A4%96

3

Jizo_Inagaki様

ご回答ありがとうございます。

やはりテーマ内に記述はないのですね。

＞ボタンを包含する要素に対してCSSを当てるなり、適した構造に作り替えるなりすれば変更できると思います。

こちらの方法でなんとか試してみます。

ありがとうございました。