カスタムCSSを追加する

まずアプリ自体のスタイル設定を使い、それでは対応できないごく一部の変更に限って、テーマにCSSを追加します。

アプリのスタイル設定で、ほとんどのストアのニーズに対応できます。特定の角丸や、モバイルだけに適用したい調整など、設定では対応できない場合は、独自のCSSを追加できます。

まず組み込みの設定を使う

CSSで変更しようとする外観の調整は、ほとんどがすでにQuote settings > Customizeの設定にあります。何か書く前に、次の項目を確認してください。

場所	設定できる内容
Button & widget > Style	Button type（Filled / Outline / Text link）、Size（Medium / Large / Full width）、Text color、Background color、Font size。
Quote form > Style	スタイルのプリセットと、Match theme styling if possible。
Quote form > Customize text	Font style。
Quote form > Customize form color	Title bar color、Title bar background、Color、Background color、Border color、Quote popup primary color。
Quote cart page > Enable Quote Cart Widget	Text colorとBackground color。フローティングウィジェットで変更できるのはこの2つだけです。

外観の変更のほとんどは、すでに設定として用意されています。まずここから始めてください。

カスタムCSSをどこに置く場合でも、あとで見つけて元に戻せる場所にしてください。ご自身のテーマにCSSを置くと、テーマと一緒にバージョン管理されるという利点があります。編集前にテーマを複製しておけば、元に戻す手段が確保できます。

ストアフロントで要素を右クリックし、Inspectを選択します。ルールを書く対象のクラス名が表示されます。

ブラウザで検証する準備ができた、Add to cartの下に見積もりボタンがあるストアフロントの商品ページ

ご自身のストアフロントで見積もりボタンを検証して、対象を見つけます。

始める前に、次の2点を知っておいてください。

見積もりボタンは、設定したButton textで、Button positionで選択した場所に表示されます。探す前に、Product page button positionを確認してください。
**Quote (n)**というラベルのフローティング見積もりウィジェットは、grfq-quote-widget-containerクラスを持つコンテナ内にあります。

ルール	理由
1度に1つだけ変更する	問題が起きたときに、どのルールが原因かがわかります。
モバイルでテストする	見積もり依頼の多くはスマートフォンから届き、デスクトップだけの調整はモバイルで崩れることがよくあります。
コピーを別の場所に保管する	CSSをメモにも貼り付けておくと、必要なときに復元できます。
できる限り`!important`を避ける	今は優先されますが、今後の変更がすべて難しくなります。
すべてのルールにコメントを付ける	半年後には、説明のないCSSのブロックは、誰も削除できなくなります。

まず、新しいテーマでアプリの埋め込みを確認してください。アプリの埋め込みはテーマ内で有効にするもので、有効にするまでは、アプリの機能はストアフロントに何も表示されません。テーマでアプリを有効にするをご覧ください。

次に、CSSを確認します。CSSはテーマのマークアップに合わせて書かれているため、テーマの切り替えや大きなテーマ更新の後は、見積もりボタン、見積もりフォーム、フローティングウィジェットを確認してください。ルールの調整が必要になることがあります。

このページは役に立ちましたか？