掲載日:2017年09月28日
トップページの構造
ストアトップページの構造を、お客様からみたページと、ストア運営ツールの項目を比較しながら紹介します。
どこに何を入力するとどのように表示されるのか、表示例を参考にしながら貴ストアページを作成ください。
※本マニュアルおよび動画の掲載内容は、予告なく変更される場合があります。
※システム仕様に変更があった場合は、「ストアクリエイターPro」トップページでお知らせいたします。
「ストアクリエイターPro」トップページを頻繁にご覧になることをおすすめいたします。
お客様からみたストアトップページ例
スマートフォン版 ストアトップページ例
ストアトップページに表示される情報は、ストア構築>ページ編集>[トップページプレビュー]で編集できます。
詳細は、「トップページを編集する」をご確認ください。

左図は、お客様から見たスマートフォン版ストアトップページです。
スマートフォン版ストアトップページは、上部のタブで3画面(商品を探す/最新情報/ストア情報)に切り替え表示ができます。
それぞれのタブに表示される内容と、出店者様が編集可能は領域は各項目の詳細をご確認ください。
- お役立ちヘッダー表示
- 「スマートフォン版用ストア画像」を設定している場合、ヘッダーにストア画像が表示されます。
画像を設定していない場合、ストア名がテキスト表示されます。
「スマートフォン版用ストア画像」の設定方法は、「トップページを編集する」の「スマートフォン用情報」の項目をご確認ください。
1.「商品を探す」タブ サンプルイメージ

左図は、お客様から見たスマートフォン版ストアトップページ「商品を探す」タブのサンプルです。
枠で囲まれた部分が編集可能な領域です。
- 青枠項目を入力、編集するには
- 青枠の項目は、ページ編集>「トップページプレビュー」のスマートフォン用情報>表示情報>フリースペースで編集できます。
- オレンジ枠項目を入力、編集するには
- オレンジ枠の項目はページ編集>「トップページプレビュー」のスマートフォン用情報>表示情報>おすすめ情報で編集できます。
2.「最新情報」タブ サンプルイメージ

左図は、お客様から見たスマートフォン版ストアトップページ「最新情報」タブのサンプルです。
「最新情報」は、自動でストアの最新情報を表示するページです。
自動表示される項目は、下記の3つです。該当する項目がない場合は、項目自体が表示されません。
- クーポンでお得にお買い物
- デイリーランキング
- リアルタイムランキング最新100注文
- ポイント
- フッター上部に表示される「Yahoo!ショッピングからのお知らせ」欄は、すべてのストアに表示されます。
- 1. クーポンでお得にお買い物
- 出店者様が、ストアクーポンを発行している場合は、クーポン情報が自動で表示されます。
表示されるクーポンは、ストアクリエイターPro>クーポン の設定で、「公開範囲(カート)」項目を「表示」に設定し、お客様が利用可能な状態になっているクーポンです。
表示可能なクーポンが複数ある場合、公開日の新しい順に表示されます。
初期表示では最大3本のクーポンを表示し、4本目以降のクーポンがある場合は[お得なクーポンを見る]ボタンが表示されます。
お客様が「お得なクーポンを見る」をタップすると、クーポン表示領域がひろがり、10件ずつ件数を増やして表示します。
- お役立ちクーポンの設定
- ストアクーポンの設定は、「ストアクーポンを新規発行する」をご確認ください。
- 2. デイリーランキング
- 直近7日間の注文を対象にランキングが表示されます。
- 3. リアルタイムランキング最新100注文
- お客様がアクセスした時間から最新の注文を、注文件数の多い順に最大100件自動で表示されます。
初期表示で10位のまでのランキングが表示され、お客様が「リアルタイムランキングをもっとみる」をタップすると、表示領域がひろがり、10件ずつ件数を増やして表示します。
集計対象は、過去90日間です。キャンセルは加味されません。
過去90日間で、注文件数が100注文に満たない場合は、実際の注文数に応じた件数が表示されます。
3.「ストア情報」タブ サンプルイメージ

左図は、お客様から見たスマートフォン版ストアトップページ「ストア情報」タブのサンプルです。
会社概要、お買い物ガイド(送料、お届け、お支払情報)を表示します。
緑の枠で囲まれた部分が編集可能な領域です。
- 緑枠項目を入力、編集するには
- 緑枠の項目は「ストア構築」のストア情報設定で編集できます。
ストア運営ツールの対応箇所
「ストアトップページ:スマートフォン用情報」入力画面
- 「スマートフォン用情報」入力画面
-
左図は、ストア運営ツール「ストアトップページ:スマートフォン用情報」入力画面です。
各項目の仕様、編集方法の詳細は下記をご確認ください。
各項目の仕様、編集方法の詳細は下記をご確認ください。
- 参照ツールマニュアル
- ページ編集>トップページの編集
>>「トップページを編集する」
「ストア構築:ストア情報設定」入力画面
- 「ストア情報設定」入力画面
-
左図は、ストア運営ツール「ストア構築:ストア情報設定」入力画面です。
各項目の仕様、編集方法の詳細は下記をご確認ください。
各項目の仕様、編集方法の詳細は下記をご確認ください。
- 参照ツールマニュアル
- ページ編集>トップページの編集
>>「トップページを編集する」