今回はB-Spaceで作成したキャンペーンバナーや商品棚、レビュー・購入情報をストアページのどこに設置すればいいか、おすすめのタグ設置箇所、設置方法を詳しく紹介します。

B-Spaceで取得したHTMLタグは、ストアに反映すべくストアクリエイターProでそれぞれのコンテンツを見せたいページ、見せたい場所に貼り付けていきます。

ストアページのどの設置箇所に、どう設定していくかについてわかりやすく解説しているので、ぜひ最後まで読んでみてください。

※本記事はB-SpaceのPC版に関する記事です。スマホ版（WEBブラウザ/アプリ）はB-Space管理画面から反映してください。反映方法はこちらをご覧ください。
▶今やスマホ割合が73%！スマホページのにぎわい演出、回遊性アップ対策できていますか？

PC版ストアページの構成と設置箇所

Yahoo!ショッピングのPC版ストアページは大きく「ストアトップページ」と「商品ページ」で構成されています。

B-SpaceのHTMLタグを設定できる箇所は以下の赤文字の箇所です。

そのどちらのページにも共通で同じものが表示される場所が「共通スペース」です。

各設置箇所の特徴

各設置箇所の特徴は以下のとおりです。

【ストアトップページ】フリースペース

どんな商品を取り扱っているか、お得な情報があるかなどストアの特徴を最も出せるスペースです。最大5カ所に設定ができます。

【ストアトップ・商品ページ共通】フッターフリｰスペース

フッターフリースペースを設定しておくとお客様がPCでページを表示した際に、フッターに設定した情報が表示されるので、お客様に必ずご覧いただきたい案内やストアとして推したい情報におすすめです。

【商品ページ】ひと言コメント

商品ページの右上端に表示されるインフォメーションスペースです。小さいスペースながら、目に留まりやすい位置にあるのでぜひ利用したい箇所です。

では、それぞれの設置イメージとストアクリエイターProでの設置方法を見ていきましょう。

【ストアトップページ】フリースペースの設置方法

ストアトップページのフリースペースに設置していきます。フリースペースは最大5カ所設置可能です。

ストアクリエイターProの「ストア構築」から「ページ編集」を選択します。

ページ編集画面の左側のサイトマップから、「ストアトップ」＞トップページプレビューの真ん中にある「編集」ボタンを押すと、以下のページ編集画面に移ります。

フリースペース1～5の欄の好きな箇所にB-Spaceで取得したHTMLタグを貼り付け、保存し、反映します。

【ストアトップ・商品ページ共通】フッターフリｰスペースの設置方法

ストアトップ、商品ページ下部共通のフッターフリースペースの箇所に設置していきます。

ストアクリエイターProの「ストア構築」かを選択します。

次に「新ストアデザイン」を選択します。

「新ストアデザイン」で左サイドから「フッター」を選び、「フリースペース」クリックし、「フリースペース（HTML可）と書かれている欄にタグを貼り付けて、プレビュー確認後、「反映」ボタンを押します。

【商品ページ】ひと言コメントの設置方法

商品ページの右上端にあるひと言コメントスペースに設置します。

ストアクリエイターProの「商品・画像・在庫」のタブをクリックします。

左サイドのサイトマップから商品を選択し、右側の商品ページプレビューから「編集」を選択し、商品詳細情報の「ひと言コメント」欄にタグを貼り付けます。

今回ご紹介した方法は個別での設定方法ですが、複数の商品を一括更新することができます。

ストアエディタで、商品データベースファイル（CSV形式）を「商品管理」でアップロードする（フィールド名：abstract）ことで反映します。

商品データベースの作成については以下のマニュアルをご参照ください。
▶商品データベースを作成する|ツールマニュアル（Yahoo!ショッピングストア限定）
※アクセスにはストアアカウントを取得のうえ、ストアクリエイターProへログインが必要です。

※ご注意【ストアトップ・商品ページ共通】看板は画像のみの設定になりました

これまでは看板にもHTMLでの設定が可能でしたが、2023年8月以降は使用できなくなり、看板画像のみ設定が可能となります。

■看板画像の設置方法

ストアトップ、商品ページ上部共通の看板の箇所に設置していきます。

ストアクリエイターProに移動したら、「ストア構築」を選択します。

次に「新ストアデザイン」を選択します。

「新ストアデザイン」で左サイドから「看板」を選び、「看板画像」と書かれている欄から設定したい画像を指定してください。

看板画像の設定について詳しくは以下のページをご参照ください。
▶［6/7実施］「看板（HTML）」「スマートフォン版用ストア画像」ストアページ表示終了のご案内 (Yahoo!ショッピングストア限定）
※アクセスにはストアアカウントを取得のうえ、ストアクリエイターProへログインが必要です。

まとめ

今回はB-Spaceで取得したHTMLタグをどのようにしてストアクリエイターProで設置していくのか、設置箇所の説明も含めて詳しく紹介しました。

B-Spaceを利用すればストアページの演出は簡単に作れます。

ぜひキャンペーンバナーや商品棚、レビューなどを駆使して、回遊性と購買率をアップしてみてください。

【関連記事】
▶開店したてのお店もにぎわいのあるお店に変身｜B-SpaceでYahoo!ショッピングのストアページを作ってみよう！（PC 版 ストアトップページ編）
▶商品ページの作り込みで効果が変わる｜B-SpaceでYahoo!ショッピングのストアページを作ってみよう!（PC版 商品ページ編）
▶共通スペースも有効活用｜B-SpaceでYahoo!ショッピングのストアページを作ってみよう!（PC版 共通スペース編）