Yahoo!ストアクリエイターProのECサイト構築 開店申請から商品・カテゴリ管理、トリプル管理ツールを使ったレスポンシブサイト構築まで解説

販促用情報と人気ランキングの設置と表示位置

ECサイトにおいて、おすすめ商品や人気ランキング、「この商品を見た人は、こんな商品にも興味を持っています」などのレコメンドは重要な意味を持っています。特にヤフーや楽天などのモール店舗で購入者は、トップページではなく直接商品ページにやってきますので、その商品だけでなく他の商品をレコメンドして購入率を上げたいと思うことは普通のことで多くのショップさんがその対策を行っています。このページではストアクリエイターProの中でできるレコメンドの方法をご紹介いたします。

まずはトップページにおすすめ商品とランキングを設置する

基本中の基本ですが、お店のトップページにおすすめ商品と人気ランキングを設置する方法です。ストアクリエイターProにて、ページ編集＞ストアトップへお進み頂きますと右側にトップページプレビューが表示されます。【編集】ボタンを押し、販促用情報のタブをクリックします。

すると上図の設定画面が表示されますので、ここにトップページにおすすめ商品として表示したい商品コードを入力します。最大20個の商品コードを入力できますので、シーズンごとにおすすめ商品を入れ替えるイメージで管理していくと便利です。

パーツの並べ替えから選択したおすすめ商品と人気ランキングを設置する

次に設定した販促用情報の商品を実際にトップページに表示します。ストアクリエイターProにて、ストアデザイン＞ページレイアウト＞トップページへお進み頂きます。すると上図のようにパーツ並べ替えのタブが表示されておりますのでクリックします。ここにパーツとして【人気ランキング】【おすすめ商品】を選択して保存します。人気ランキングはヤフーでは自動表示になっておりますので、おすすめ商品のように商品コードを入れて掲載商品を選択することはできません。

商品ページのレコメンド設定

ヤフーでは1つ便利な機能として、商品ページにヤフーのシステム側が自動表示させる「この商品を見た人は、こんな商品にも興味を持っています」の機能があります。ですのでショップ側が管理画面で商品コードなどを個々の商品毎に設定しなくとも既に商品ページではレコメンドが自動表示されています。

ただ、自動表示ではなくショップ側で選んだ商品を掲載したい場合もあるかと思います。例えばアパレル関連のショップで、商品写真として使用しているモデルが着用している商品をおすすめ商品としてリストアップして掲載したい場合や、オプション感覚で抱き合わせで購入して使用してほしい商品を掲載する場合です。

その場合は、ここの商品情報修正ページで設定します。ストアクリエイターProにて、ページ編集から設定したい商品を選択して【編集】ボタンを押し、その商品情報修正ページに移行します。基本情報のタブで商品名や販売価格を入力しますが、追加表示情報のタブをクリックします。すると上図の関連商品情報という箇所におすすめ商品を設定する箇所があります。ここでトップページに掲載したように商品コードを入力します。入力された商品が、その商品ページのおすすめ商品として掲載されますので、コーディネート商品や抱き合わせで購入させたい商品をレコメンドすることができるという訳です。

おすすめ商品の表示レイアウトを変更する

では実際に商品ページに表示されているおすすめ商品の表示レイアウトを変更する方法ですが、基本はタイプ1という設定になっており3列表記のレイアウトになっています。最近のECサイトは横幅も広くとってありますので、3列表記ではなく、4列5列と設定したい場合がほとんどです。

ストアクリエイターProにて、ストアデザイン＞ページレイアウト＞商品ページへお進み頂きますと上図の画面が表示されます。右側に表示されているパーツの中でおすすめ商品をクリックして選択しますと、下図のパターン選択画面が表示されます。ここで通常はタイプ1の3列表記になっておりますので、タイプ2やタイプ3を選択することで表示レイアウトを変更することができます。

スマホの商品ページできるレコメンド

繰り返しになりますが、ヤフーでは商品ページに自動的に「この商品を見た人は、こんな商品にも興味を持っています」というレコメンドが表示されます。スマホの商品ページもPC同様にこの機能があり、自動的にそれが表示されている仕組みになっていますので、ショップ側で任意の商品をレコメンドさせたい場合は、個々の商品情報修正ページにて追加表示情報のタブ＞関連商品情報＞おすすめ商品の箇所で商品コードを入力します。

ただそれだけでなく、SALEやアウトレット商品のバナーの表示させたい場合もあると思います。PC版では左メニューやオリジナルのヘッダーが常に表示されておりますが、スマホの商品ページではそれがありません。その為、スマホ商品ページで任意のバナーを設置して紹介する場合の方法をご紹介します。

ストアクリエイターProにて、ストアデザイン＞ページレイアウト＞スマートフォン商品ページへお進み頂きますと上図の画面が表示されます。ここにスペース1と2という2パターンで任意のバナーを設置できますので、SALE商品やアウトレットのバナーなどを設置してリンク先も設置しればスマホの商品ページにそのバナーが表示されますので、SALEやアウトレットへ誘導するレコメンドの意味をなすという訳です。

商品説明HTMLにiframeを入れる方法もある

これは少々上級者向けの設定ですが、よくある設定です。ヤフートリプルもしくはカスタムページで任意のHTMLファイルを作り、そのファイルをiframeで商品ページに張り付けるという方法です。個々の商品情報修正ページのPC用フリースペース1やスマートフォン用フリースペースにiframeを設置してショップ側がおすすめしたい商品やバナーを掲載するという仕組みです。