e-commerce Japan

SEARCH

2021.02.05

Yahoo!ショッピング新ストアデザイン具体的な移行手順！

ストアクリエイターProにログインしたら、
「1月27日に「新ストアデザイン」強制適用されます。」
なんてお知らせがいきなり出てきて、どうしよう~となっているオーナーさん必見！
具体的な手順を、図多めに！　どこよりもわかりやすく！　説明します！
※この通りにやらなくてはいけないということではなく、あくまでも一つの案です。
 

▼目次

まず最低限やっておきたいこと

  • ・ヘッダー(フリースペース)をトップページ上部に移そう！
  • ・サイドナビ(フリースペース)をトップページかフッターに移そう！
  • ・フッター(フリースペース・インフォメーション)をフッターに移そう！

今回はヘッダーにフォーカスしてお伝えします！
 

新ストアデザインで、トップページにも商品ページにも上部に表示させたいものがある場合、看板エリアを使うのが良いでしょう。
ですがこのエリアは最大1290px×200pxのスペースの中で表示されるので、その中に収まらないと見えづらくなってしまいます。

新ストアデザインの看板エリア▲最大エリアを超えるとスクロールバーが表示され、スクロールしないと下まで見えない
 

新ストアデザインの看板が空白の場合▲看板エリアの使用は任意です。何も入れなかったらカテゴリの下に何もなく、とてもシンプルになります。
 
 
そこでひとまず、今までヘッダーに表示していたものを、新ストアデザインのトップページ上部に表示させてみましょう。

新ストアデザインへ移行▲今までヘッダーに設置していたものを、新ストアデザインのトップページ上部に表示させたい。
 
 
・具体的な手順
１ページ編集→編集→フリースペース1を空けます。
Yahoo!新ストアデザイン移行
フリースペース1を全部コピーしてフリースペース2にペーストしましょう。(WindowsはCtrl+Aで全選択、Ctrl+Xで切り取り、Ctrl+Vでペースト)

【ポイント】

  • ・間違えてしまったら、キャンセルかページの再読み込みをしましょう。
  • ・間違いなく出来てから保存します。
  • ・大事なものを消してしまわないか心配な場合は、どこかにコピーしておきましょう。

 
 
２(旧)ストアデザイン→ヘッダー・看板と進み、
フリースペースの中身を全て選択、コピーします。(WindowsはCtrl+Aで全選択、Ctrl+Cでコピー)
※ここは切り取り(削除)しなくて(残しておいて)も大丈夫です。
Yahoo!新ストアデザイン対応
 
 
３①のページ編集→編集→フリースペース1に戻りペーストします。
Yahoo!新ストアデザイン手順
 
 
４ページ下部[保存してプレビューへ]を押して、[パソコン版でプレビュー(新ストアデザイン)]で表示を確認しましょう。
Yahoo!新ストアデザイン移行手順
 
 
５完了したら反映管理→反映します。
Yahoo!新ストアデザイン対応手順

【ポイント】

  • ・2月中旬までは旧ストアデザインが使用可能なようです。
  • ・新ストアデザインの上部のナビゲーションは、下にスクロールしても常に上部に表示されるので、お客様への親切な誘導のためにも設定することをおすすめします。
    新ストアデザインのナビゲーションメニュー
  • ・旧ストアデザインのサイドナビにある画像や賑わいツールを表示させたい場合は、トップページやフッターに移動が必要です。
  • ・こちらの動画もわかりやすくておすすめです。
    はじめての「新ストアデザイン」移行作業
    ※Yahoo！ストアクリエイター提供の説明動画。要Yahoo!ストアクリエイターProログイン

 
 

限りある看板エリアを使い倒す！

新ストアデザインでは店舗名が一番上に表示されているので、看板エリアの使用は任意となっています。
とはいえ、店舗名は小さいですし、全体のデザインもシンプルなので、看板エリアをうまく活用して印象に残るお店にしたいものです。
看板エリアは1290px×200pxの限られたスペースですが、例えばこんな風に使えます。
↓

Yahoo新ストアデザインでも賑わいツールは使える！▲システムのところは動きがあるので、目を引きます。
 

Yahoo!新ストアデザインで賑わいツール▲もともとヘッダーにあったパーツを少し小さくして並べてみました！
 

Yahoo新ストアデザイン。にぎわいシステム

HTMLも使用可能なので、賑わいツールも設置できます。

では実際にいくつかの画像を横並びで表示してみましょう。
例えば、1000pxの看板画像と、100pxの画像、150pxの画像があったとします。

Yahoo!新ストアデザインの看板例
 
 

全体の1290pxから画像分引くと、、、
1290-1000-100-150=40で、、
40pxスペースが空くはず、、、
と、こんな計算しなくても、以下のように書けば大丈夫です！
↓
<div style="display:flex;justify-content:space-between;">
<img src="画像URL">
<img src="画像URL">
<img src="画像URL">
</div>
【ポイント】

  1. 画像全体をdivというタグで囲みます。
  2. display:flex; と書くと、中身が横並びになります。
  3. justify-content: space-between; と書くと、中身が端から端まで並び、間に均等のスペースが空きます。

 
表示させたいところ(htmlが使えるところ)で使ってみてください。
 
 

新ストアデザインでも賑わいツールは使える！

Yahoo!新ストアデザインでも、看板エリアはじめ、トップページやフッターにも賑わいシステムを設置することができます。
【ポイント】

・フッターに何か表示させたい場合…
トップページは1090px以内で表示されていますが、商品ページだと946px以内で表示されるようですので、設置したときは商品ページでも表示を確認してみましょう。

Yahoo!新ストアデザインのフッター▲商品ページでのフッターエリア。946px幅内で表示されている。
 
 
Yahoo!新ストアデザインのフッター領域▲トップページでのフッターエリア。1090px幅内で表示されている。

オススメ常時システムを設置してみましたが、横にスクロールして表示されるので欠けても問題ありません。

 
今回は以上です！お疲れ様でした！2月中旬まで猶予があるようなのでゆっくり修正していけばいいですね。
 


このようにオルグローの賑わいシステムはカスタマイズ出来るから、サイズも、色も、お店のテイストに合わせられる！
オルグローでは賑わいツールをはじめ、多くのIT向けサービスとともに、これからもビジネスオーナーさんのサポートをして参ります。
賑わいツールなんて使いこなせるかなーと不安な方も、専任のコンサルタントにお気軽にご相談ください。
よりお客様の印象に残るお店を私たちと一緒に作って行きませんか？

賑わいツールのお問い合わせ、またはお申込み
 

関連記事

PAGE TOP