D2C ストアテンプレートをカスタマイズする
学習の目的
この単元を完了すると、次のことができるようになります。
- D2C Commerce ストア テンプレートに予め設定されているものを挙げる。
- D2C Commerce ストア テンプレートのテーマをカスタマイズする方法を説明する。
- ヘッダーまたはフッターをカスタマイズする方法を説明する。
- ページやコンポーネントの利用法について説明する。
- ストアの有効化と公開の違いを説明する。
- ストアをカスタマイズする方法を説明する。
D2C Commerce ストアをカスタマイズする
Ursa Major Solar の上級マーチャンダイザーである Taylor Givens は、自社の D2C Commerce ストアを訪れた人々の体験を素晴らしいものにすることで頭が一杯です。その手始めに、Ursa Major Solar ストアのロゴを使って D2C エクスペリエンスビルダーテンプレートをカスタマイズすることにします。
D2C Commerce テンプレートには、ホームページや検索結果ページなど、コマース固有のページが予め設定されています。こうしたページで、D2C Commerce ストア専用に開発されたコンポーネントを使用します。Taylor はエクスペリエンスビルダーの使いやすいインターフェースを使用して、コンポーネントをページにドラッグアンドドロップしたり、コンポーネントのプロパティをカスタマイズしたりすることができます。ストアに画像やスタイルを追加すれば、買い物客に独自の体験を創出できます。
Taylor はすべきことを記載した便利なチェックリストを作成しました。
|
タスク
|
|
|---|---|
1 |
ストアのテーマを設定する。 |
2 |
カスタムのヘッダーまたはフッターを設定する。 |
3 |
ページやコンポーネントを検証する。 |
4 |
ストアをプレビューして公開する。 |
5 |
ストアのカスタム URL を設定する。 |
Taylor は、ストアのホームページにある [エクスペリエンスビルダー] タイルをクリックして、D2C Commerce ストアのページやコンポーネントのカスタマイズに取り掛かります。
ストアのテーマを設定する
D2C Commerce ストアテンプレートで、事前構築された D2C テーマを使用できることを知って Taylor は嬉しくなります。各自の要件に合わせて、色、画像、テキストサイズ、スペーシングを指定してテーマをカスタマイズできます。コンポーネントのプロパティの中には、コンポーネントのテーマ設定を上書きできるものもあります。
エクスペリエンスビルダーページの左側にあるテーマアイコンを展開すると、ストアのテーマ設定にアクセスできます。
Taylor は背景、テキスト、ブランド、前景の色を指定します。アップロードされた画像からパレットを生成します。
[画像] ページで、会社のロゴを選択します。
また、PC やデスクトップ、モバイルデバイスに合わせてテキストのサイズやサイトのスペーシングを設定できます。
カスタムのヘッダーまたはフッターを設定する
D2C Commerce ストアテンプレートは、各ページにヘッダーとフッターコンポーネントが配置されています。ページにカスタムヘッダーを使用したい Taylor は、まずページのテーマレイアウトを調整します。この手順は次のとおりです。
- カスタムのヘッダーまたはフッターを使用するページとして [ホーム] を選択します。
-
設定アイコンをクリックします。
-
[テーマ] をクリックします。
-
[設定] をクリックします。
-
[新しいテーマレイアウト] をクリックします。
- 新しいレイアウトに
Ursa Major Solar - home(Ursa Major Solar - ホーム) と入力します。 - [コマースレイアウト] ドロップダウンメニューから、[コマースレイアウト] を選択します。
-
[保存] をクリックします。
ページの上部と下部に空白のセクションが表示され、Taylor がカスタムのヘッダーやフッターを使用できます。
カスタムコンポーネントの開発についての詳細は、『D2C Commerce 開発者ガイド』を参照してください。
ページやコンポーネントを検証する
D2C Commerce ストアテンプレートに付属するページやコンポーネントを利用して、使いやすいストアフロントを作成し、お客様を惹きつけることができます。ページで使用できるコンポーネントは次のとおりです。
|
ページ
|
目的
|
コンポーネント
|
|---|---|---|
カート |
買い物客が購入することにした商品を表示する。 |
|
カテゴリ |
選択したカテゴリの商品を買い物客に表示する。 |
|
チェックアウト |
買い物客が購入手続きを完了できる。 |
|
エラー |
システムでエラーが発生したことを買い物客に伝える。 |
|
ログイン/パスワードを確認 |
登録済みの買い物客に、メールをチェックしてパスワードをリセットするよう伝える。 |
|
ログイン/パスワードを忘れた場合 |
登録済みの買い物客が忘れてしまったパスワードを取得できる。 |
|
ログイン/ログイン |
買い物客がストアにログインできる。 |
|
ログイン/登録 |
買い物客がストアに登録できる。 |
|
ホーム |
買い物客をストアフロントに誘うランディングページを作成する。 |
|
私のプロファイル |
買い物客が各自のプロファイル画像を表示したり、パスワードをリセットしたりすることができる。 |
|
注文 |
品目が正常に発注されたことを買い物客に伝える。 |
|
商品 |
価格、説明、画像など、商品に関する情報を表示する。 |
|
検索 |
買い物客がストアフロントを検索できる。 |
|
サービスは利用できません |
ストアフロントを使用できない場合に買い物客に表示する内容を指定する。 |
|
Taylor はコンポーネントを検証し、そのまま使用するコンポーネントと変更するコンポーネントを選別します。
|
カテゴリ
|
コンポーネント
|
|---|---|
カート |
|
カテゴリ |
|
チェックアウト |
|
Commerce Einstein |
|
コンテンツ |
|
ナビゲーション |
|
注文 |
|
商品詳細 |
|
検索 |
|
ユーザーアカウント |
|
ストアをプレビューして公開する
Taylor はストアフロントをカスタマイズしながら、買い物客にどのように表示されるかプレビューし、変更した内容を公開できます。この手順は次のとおりです。
- エクスペリエンスビルダーを開きます。
- 表示するサイトページを開きます。
- ページの右上にある [プレビュー] をクリックします。
「エクスペリエンスビルダーサイトのプレビュー」を参照してください。
- 表示されたストアに問題がなければ、ページの右上にある [公開] をクリックします。ストアが公開されると、Taylor にメール通知が届きます。
ストアは有効かどうかに関係なく公開できます。ストアは公開されていなくても有効にできます。この例の場合は、システム管理者の Maria Jimenez が予め有効にしていました。ストアを有効にする方法については、「Salesforce D2C Commerce の基本」を参照してください。
まとめ
この単元では、D2C Commerce ストア テンプレートをカスタマイズする方法を学習しました。また、ストアを公開またはプレビューする方法も習得しました。先行の単元では、検索と Commerce Einstein について学びました。では、最後のテストを受けて、輝かしいバッジを獲得してください。
リソース
- Salesforce ヘルプ: D2C 開発者ガイド
- Salesforce ヘルプ: エクスペリエンスビルダーサイトのプレビュー
- Trailhead: Salesforce D2C Commerce の基本