【商品ページ】ページが左寄りに表示されます(目玉商品や共通説明文の設定あり)

楽天RMSの目玉商品共通説明文(大)の横幅が影響している可能性がございます。

商品ページが左寄りに表示される原因は、商品画像や動画の表示サイズが影響している場合もございますため、以下よくあるご質問ページも併せてご確認くださいませ。

▼商品ページがページが左寄りに表示されます(商品画像や動画の表示サイズが原因)
https://lab.biiino.com/faq/item-register/item-page-displayed-to-left-by-image-size/

問題の現象

下図のようにレフトナビやフッターがヘッダーの横幅より左側に表示されることがあります。

サンプル画像:左寄り表示

本現象は楽天RMSにて以下パーツのご設定をされている場合に発生することを確認しております。

  • 目玉商品
  • 共通説明文(大)

原因について

楽天RMS:目玉商品や共通説明文(大)の横幅による影響

まず、楽天市場の仕様により、商品ページのメインエリア(中央の商品説明や商品名等があるエリアです)の横幅が広くなりますと、レフトナビやフッターが左寄りに表示されるといったことが判明しております。

そのため、店舗様にて楽天RMSへご設定されている、目玉商品や共通説明文(大)の横幅が広い場合には商品ページが左寄りに表示される場合がございます。

※恐れ入りますが、ビーノにて上記箇所のご設定は行っておりませんため、ビーノご利用以前にご設定されている可能性がございます。

PC用新店舗トップ未移行の店舗様向けRMS設定画面
PC用新店舗トップ移行済の店舗様向けRMS設定画面

目玉商品や共通説明文(大)の表示イメージ

楽天RMSにて目玉商品や共通説明文(大)をご設定されている場合、商品ページやカテゴリページの下側へ以下のように表示されます。

目玉商品の表示例

解消方法

まず、楽天RMSにて目玉商品や共通説明文(大)の設定がされているかご確認をお願いいたします。

目玉商品や共通説明文(大)の設定状況を確認する方法

以下手順に沿って楽天RMSを確認してみましょう。

楽天RMSの確認方法

  1. 楽天RMSトップ > 店舗設定 > 5 デザイン設定 と進み、PCデザイン設定内の「目玉商品」または「共通説明文(大)」をお選びください。
  2. テンプレートの編集・削除 にて「(自動選択)」となっているテンプレートの【編集】をクリックしましょう。
  3. 目玉商品や共通説明文がご設定されているかご確認ください。
    ※目玉商品の場合、ページを下までスクロールしていただき、商品画像が複数並んでいる場合は設定がされています。

▼目玉商品の例(PC用新店舗トップ未移行の店舗様向け)

解決策その1:全体の横幅を900px程度へ変更

ビーノの商品ページデザインでは、PC用販売説明文の横幅を「最大910px」としています。

そのため、目玉商品や共通説明文(大)の全体的な横幅も900px程度へ変更することで、ページ全体が中央に表示されますことを確認しています。

目玉商品が設定されている場合

目玉商品の設定画面にございます、以下サイズのご変更をお願いいたします。

  • 画像のサイズ
  • 商品名の横幅
💡変更例:目玉商品が3つ横並びの場合

1. 楽天RMSトップ > 店舗設定 > 5 デザイン設定 と進み、PCデザイン設定内の「目玉商品」をお選びください。

2. 「画像のサイズ」と「商品名の横幅」を 300px へご変更をお願いいたします。(300px × 3商品 = 900px)

目玉商品の変更箇所

3. ページ下部の【プレビュー画面へ進む】をクリックいただき、最後に【登録する】より変更内容を登録しましょう。

共通説明文(大)が設定されている場合

ご設定されておりますHTMLの内容をご確認いただき、横幅の指定がございます場合はそちらを全体が900px程度になるよう変更をお願いいたします。

なお、大変恐縮ではございますが、HTMLタグにつきましては、専門的な知識が必要となりますことからサポート対象外とさせていただいております。

解決策その2:目玉商品や共通説明文(大)を削除

目玉商品や共通説明文(大)の表示を削除しても問題ないようでございましたら、削除する方法がございますためお試しいただけますと幸いです。

目玉商品の削除方法

  1. 楽天RMS > 店舗設定 > 5 デザイン設定 とお進みいただき、PCデザイン設定内の「目玉商品」をお選びください。
  2. テンプレートの編集・削除 にて「(自動選択)」となっているテンプレートの【編集】をクリックしましょう。
  3. 登録されている目玉商品のチェックボックスすべてにチェックを入れていただき、【削除】をクリックします。
  4. ページ下部の【プレビュー画面へ進む】をクリックいただき、最後に【登録する】より変更内容を登録しましょう。

共通説明文(大)の削除方法

  1. 楽天RMS > 店舗設定 > 5 デザイン設定 とお進みいただき、PCデザイン設定内の「共通説明文(大) 」をお選びください。
  2. ご設定されておりますHTMLタグをすべて削除お願いいたします。
  3. ページ下部の【プレビュー画面へ進む】をクリックいただき、最後に【登録する】よりご登録をお願いいたします。

ご解消されない場合

以下の記事もあわせてご確認ください!

最後に

もし上記をお試しいただきましても改善されない場合は他の原因が影響している可能性がございますため、カスタマーサポートまでお問い合わせください。

この記事について評価をお願いいたします
  • 役に立った (0)
  • わかりにくい (0)
  • 必要な情報がなかった (0)
  • 探しにくかった (0)

関連しそうなFAQなど

ビーノとSUMAOU!の違い 次の開発予定 動画で学ぶビーノ 導入事例