ボタンの文言と色を変更する
見積もりボタンの文言、形、サイズ、色を変更して、テーマになじませます。
見積もりボタンの文言と外観は、どちらもButton & widgetタブにあり、数セクション離れた場所に配置されています。このページでは両方を説明します。
文言を変更する
Section titled “文言を変更する”-
ボタンの設定を開く
Section titled “ボタンの設定を開く”アプリでQuote settingsに移動してCustomizeをクリックし、Button & widgetタブを開きます。
-
Button textを編集する
Section titled “Button textを編集する”Button textは、Quote Button Settingsセクションの最初のフィールドです。デフォルトは
Add to Quoteで、ヘルプテキストには「This text appears on product pages and collection pages. Recommended default: Request a Quote.」と表示されます。
-
保存してストアフロントを再読み込みする
Section titled “保存してストアフロントを再読み込みする”変更を保存し、商品ページを再読み込みして新しい文言を確認します。
公開中の商品ページに表示された、Button textの文言。
見た目を変更する
Section titled “見た目を変更する”同じタブを下にスクロールしてStyleに移動します。
| 設定 | 変更される内容 |
|---|---|
| Button type | Filled、Outline、Text linkのいずれか。Filledが最も目立ち、Text linkが最も控えめです。 |
| Size | Medium、Large、Full widthのいずれか。Full widthは、購入ボタンの直下に置くと最も見やすくなることが多いです。 |
| Text color | ボタン上の文言の色。 |
| Background color | ボタンの塗りつぶしの色。 |
| Font size | 文字サイズ（px単位）。 |
テーマに合わせる
Section titled “テーマに合わせる”よくある組み合わせは、Outlineを選び、Text colorにテーマ独自のアクセントカラーを使う方法です。見積もりボタンは塗りつぶしのAdd to Cartボタンよりも控えめな存在でありながら、同じデザインの一部としてなじみます。
見積もりボタンが購入ボタンの横に表示される場合は、行が不揃いに見えないよう、Sizeを購入ボタンに合わせてください。
Button textはデフォルト言語の文言を設定します。お客様に表示される他の内容と一緒に翻訳するには、Advanced settingsのTranslations AIを使用します。「Translate everything your customers see — quote form, storefront text and both quote emails.」
詳しくはTranslate storefront textをご覧ください。
次のステップ
Section titled “次のステップ”- Set the after-click behavior — お客様がクリックしたときの動作
- Quote button on product pages — ボタンの配置場所
- Match your theme style — 見積もりフォームのスタイルをテーマに合わせる