テーマのスタイルに合わせる

あとから取って付けたような見積もりフォームは、最も大事な場面でお客様の信頼を損ねてしまいます。アプリは、テーマのスタイルを反映することができます。

アプリが対応するテーマ

テーマとの一致は、指定されたテーマを対象に作られています。Samitaが公開している一覧は、Dawn、Refresh、Trade、Origin、Ride、Studio、Colorblock、Taste、Publisher、Crave、Spotlight、Craft、Sense、Debutです。

ストアでこれらのテーマのいずれかを使用している場合は、チェックボックスをオンにすると、近い見た目になります。作業に入る前に、次の2点にご注意ください。

• 一覧は増え続けています。 Samitaはこの一覧を「updating」と表示しているため、ここに記載のないテーマでもすでに対応している可能性があります。うまくいかないと決めつけず、まず設定を試してください。
• 一覧にあるテーマでも保証されるわけではありません。 テーマはカスタマイズされるもので、大幅に改変されたDawnは標準のDawnとは異なります。最終的な判断は、テーマの名前にかかわらず、下記のストアフロントでの確認で行います。

使用中のテーマがわからない場合は、Shopify管理画面で「オンラインストア」>「テーマ」を開いてください。公開中のテーマ名が上部に表示されます。

テーマとの一致をオンにする

1. Quote formタブを開く

   Quote settingsに移動し、Customizeをクリックして、Quote formタブを開きます。

2. スタイルのプリセットを選ぶ

   Styleまでスクロールします。フォームで現在使用しているプリセット（例：Classic）が表示されます。別のプリセットにしたい場合はChangeボタンをクリックします。

3. Match theme styling if possibleをオンにする

   Match theme styling if possibleをオンにします。

   

   テーマに合わせて、フォームが浮かないようにします。

4. エディタではなく、ストアフロントで確認する

   アプリには、次のように明記されています。「Theme styling applies on your storefront and is not shown in this preview.」

   変更を保存し、ストアフロントでフォームを開いて、通常のページと見比べます。

   

   テーマとの一致が反映されるのは、エディタのプレビューではなく、このストアフロントだけです。

ノート

ラベルの「If possible」には重要な意味があります。フォームがどこまで一致するかは使用しているテーマによって異なるため、ストアフロントでの確認は省略できません。テーマが上の一覧になく、一致の度合いが低い場合は、[email protected]にメールするか、アプリのContact usで対応しているかをお問い合わせください。一覧は今も追加されています。それまでの間は、下記の色の設定で調整してください。

スタイルを自分で設定する

テーマとの一致は、チェックボックス1つで要素ごとの調整はできません。ほぼ希望どおりになったものの、見出しやボタンだけ違和感がある場合は、その部分を手動で設定します。Styleの下にある2つのセクションで、直接調整できます。

セクション	設定できる内容
Customize text	Font style
Customize form color	Title bar color, Title bar background, Color, Background color, Border color, Quote popup primary color

テーマとの一致で調整しきれない部分がある場合や、フォームをあえて目立たせたい場合にご利用ください。

確認するポイント

• フォント — 見出しと本文が、ストアの他の部分と合っていること
• ボタン — 送信ボタンが他のボタンと同じ見た目であること
• 余白 — モバイルで窮屈なフォームは、最もよくある問題です
• コントラスト — ラベルが読みやすいこと。特にダークテーマで確認してください

注意

フォームはスマートフォンで確認してください。テーマとの不一致が最も目立つのはフォームで、見積もり依頼の多くはモバイルから送信されます。

次のステップ

• 標準フォームを作成する — フォームのその他の部分
• ボタンのテキストと色を変更する — 見積もりボタンのスタイルを合わせます