ヤフーショッピング「ストアクリエイターPro」の初期設定<商品ページ横一杯レイアウト>

最近のヤフーショッピングのお店では「商品ページ横一杯レイアウト」を使用するお店が増えてきています。

これは「ストアクリエイターPro」の初期設定がそうなっているから、昔から出店しているお店は「なんだこの店の現代風のデザインは!」と思ったかもしれません。

商品ページ横一杯レイアウトのメリット

この「商品ページ横一杯レイアウト」は画像が大きく表示されます。今までの商品ページレイアウトだとサイドバーを使った場合「商品画像」は小さくなってしまいます。

そこで「商品説明」や「フリースペース」に画像を表示させるわけですが「商品ページ横一杯レイアウト」は画像が大きく表示されるので見栄えがいい。

商品ページ横一杯レイアウトのデメリット

とても現代風のレイアウトでいいんですがサイドバー付きのテンプレートを使う場合は注意が必要。

「商品説明」「フリースぺース」「あすすめ商品」などの項目に何も記入がないとサイドバーだけなんて状態になってしまいます。

「商品ページ横一杯レイアウト」をサイドバー付きのテンプレートで使う場合は「商品説明」「フリースぺース」「あすすめ商品」などに情報が必要です。

商品ページ横一杯レイアウトの設定

新しくお店を始める場合は「商品ページ横一杯レイアウト」がデフォルトになってます。デフォルトになっていないお店は下記方法で変更できます。

ストアデザイン → ページレイアウト → 商品ページ → デザイン編集 → 商品基本情報

ここで「タイプ13」を選択。

サイドバー無しテンプレート「商品ページ横一杯レイアウト」にサイドバー

サイドバーを使わないテンプレートではメニュー関係をヘッダーやフッターに置かなくてはいけません。

サイドバー無しテンプレートを使い「商品ページ横一杯レイアウト」、そして標準ではないサイドバーが欲しい。

そんな場合は「フリースペース」に

<div class="○○-sidemenu">
<iframe src="https://shopping.geocities.jp/○○○○/side.html" vspace="0" hspace="0" marginwidth="0" marginheight="0" align="top" frameborder="0" scrolling="no"></iframe>
</div>

みたいなタグを記載して「トリプル」に置いたhtmlを読み込みます。

.○○-sidemenu{
float:right;
overflow: hidden;
}
.○○-sidemenu iframe {
width: 284px;
height: 1000px;
}

そしてのようなCSSを看板HTMLなどで読み込みます。

この場合はサイドメニューを左右どちらにも設置できます。

コメント

タイトルとURLをコピーしました