テーマエディターでホームページをデザインする(OS 3.0 テーマ)
あなたのトップページは、顧客がオンラインストアを初めて訪れたときに最初に目にするメインのランディングページです。OS 3.0 テーマのテーマエディターでは、トップページはバナー、リッチテキスト、商品グリッドなどの個別のパーツで構成されており、これらのパーツを追加、削除、並べ替えて、望むレイアウトを作成できます。
このガイドでは、テーマエディターでのトップページへのアクセス方法、パーツの追加と配置、変更の保存と公開方法について説明します。
|
始める前に:正しいツールを使用していることを確認してください この記事は、顧客がウェブブラウザで見るストアフロントを制御するOS 3.0 テーマのテーマエディター内のトップページについて説明しています。もしSHOPLINEモバイルアプリのトップページをデザインしている場合は、「アプリのトップページのデザイン」をご覧ください。Shopper Appにはテーマエディターとは異なるパーツを持つ独自のトップページエディターがあります。 |
テーマエディターでトップページに移動する方法
テーマエディターでトップページを開くには:
- SHOPLINE管理画面から、オンラインストア > デザインに移動し、編集したいOS 3.0 テーマのデザインボタンをクリックします。
- 上部ツールバーで、ページセレクターにトップページが選択されていることを確認します。
トップページをパーツキャンバスとして理解する
テーマエディターのトップページは、バナー、リッチテキスト、商品グリッドなどのパーツで構成されるキャンバスとして機能し、自由に追加、削除、並べ替えができます。ほとんどのテーマは、ヒーローバナーや紹介用リッチテキストパーツなどのデフォルトのパーツセットが最初から配置されており、それらを保持、修正、または置き換えることができます。
ヘッダーとフッターのエリアはトップページの横に表示され、ストア全体に適用されます。これらは「テーマエディターでのヘッダー&フッターのデザイン(OS 3.0 テーマ)」で別途説明しています。トップページ自体に追加・配置するパーツはトップページのみに影響します。
トップページにパーツを追加・配置する
トップページにパーツを追加、配置、公開するには:
- 左のサイドバーで、パーツを追加をクリックします。
- 利用可能なパーツのリストを参照し、追加したいパーツを選択します。
- パーツをクリックして設定パネルを開き、内容を設定します。
- 一部のパーツはパーツを追加をサポートしており、スライドショーに追加のスライドを挿入するなど、内部に追加のブロックを挿入できます。
- サイドバー内でパーツをドラッグ&ドロップして、ページ上の順序を変更します。
- 保存をクリックすると、ライブのストアフロントに影響を与えずに変更をドラフトとして保存できます。
- 公開をクリックすると、変更が即座にライブのストアフロントに適用されます。
|
注意:
|
よく使われるホームページのパーツと設定場所
ホームページでは数十種類のパーツを利用できますが、特に商品を紹介し、顧客の関心を引くためによく使われるパーツがいくつかあります。このセクションでは、マーチャントが最も頻繁に使用するパーツと、それらのストアフロント全体のデザイン設定の場所を紹介します。
ホームページでの商品紹介
多くのマーチャントは、おすすめ商品カテゴリ、ユニークおすすめ商品、およびおすすめ商品パーツを使って、ホームページ上で顧客に商品を紹介しています。
- おすすめ商品カテゴリ:新着商品やベストセラーなど、特定のカテゴリを専用の商品グリッドで強調表示でき、タイトルや複数のカテゴリを同時に紹介したい場合の任意のタブセットも含まれます。
- ユニークおすすめ商品:顧客に自動的に商品レコメンドを表示し、特定のカテゴリを手動でキュレーションしなくても関連商品を紹介できます。
- おすすめ商品:単一の商品を前面に押し出し、新商品の発売やベストセラーのスポットライトに最適で、商品画像と行動を促すボタンを組み合わせて表示します。
ホームページにインタラクティブな商品表示を追加する
ショッピング画像およびショッピング動画:顧客がホームページを離れることなく、視覚的なコンテンツから直接商品を発見し購入できるようにします。
- ショッピング画像:画像上に1つ以上の商品をクリック可能なホットスポットとしてタグ付けできるため、顧客はトップページを離れることなく商品詳細を確認できます。
- ショッピング動画:動画コンテンツでも同様に機能し、顧客は動画の横に表示される商品カードをクリックして詳細を確認したり、視聴中にカートに商品を追加したりできます。
|
注意事項:
|
この記事はAIを使用して翻訳されており、不正確な箇所が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。