TOP › #4 商品ページ設定

#4商品ページ設定

商品詳細ページのレイアウト、画像表示、共通ガイド、レビュー表示、関連導線などを調整するための設定です。

商品ページビジュアル

ヘッダービジュアルを表示商品ページ上部に大きなヘッダービジュアルを表示するか切り替えます。商品ページ冒頭に世界観を強く見せたい場合に向いています。

表示する画像は、その商品の画像のうち「最後に登録されている画像」が使用されます。代表画像として見せたいのは商品単体の写真であることが多い一方で、ヘッダービジュアルとしては雰囲気を見せるためのシーン写真に向いているためです。
商品情報の最後にビジュアルを表示ヘッダービジュアルと同じような扱いで、商品説明の締めとして印象的なビジュアルを入れたい場合に使用します。こちらも商品の最後の画像を利用します。ヘッダーと合わせて使うことも、どちらかだけを使うこともできます。
画像を暗くする画像を暗くすることでトーンを抑え、白文字を見やすくします。

商品ページ レイアウト（PC表示）

商品ページ PCレイアウト 商品ページの PC 表示時レイアウトを選択します。

全幅セクション型：最初は左に商品写真、右に商品説明が２カラム表示（どちらか縦に短い方はその下端で維持したまま、長い方がスクロールしていきます）。その後、商品説明カスタムAppによる詳細コンテンツがある場合、幅いっぱいを使って大きくコンテンツを表示していきます。写真や説明を大きく見せやすい、セクションベースの構成です。

左右カラム型：写真と商品説明カスタムAppによる詳細コンテンツを全て左カラムでスクロールしていくレイアウトです。その間、右側の商品説明エリアは固定表示されます。左に商品の写真や説明を見ながら、右で常時価格やカートに入れるボタンが表示されるため、スクロールしても安心感のあるレイアウトです。
💡

「商品説明カスタムApp」を利用すれば本文エリアは自由にコンテンツ作成していくことができます。

商品画像ギャラリータイプ商品画像の見せ方を選択します。

1ステージ + サムネイル：メイン画像を大きく表示し、下または横にサムネイルを並べる形式です。標準的で使いやすいレイアウトです。

そのまま並べてスクロール：画像をそのまま縦に並べて見せる形式です。複数画像をまとめて見せたい場合に向いています。
画像拡大ビューアのON/OFF商品画像を拡大表示するビューア機能を有効にするか切り替えます。ONにすると、クリックで商品画像が拡大表示、マウスオンでズームするビューアが開きます。OFFにするとクリックしても何も起きないシンプルなページになります。
商品画像 縦横比商品画像エリアの縦横比を選択します。

1:1(正方形)：正方形に整えて表示します。安定した一覧感が出やすい比率です。

4:5(縦長)：やや縦長で表示します。ファッション商材や人物着用画像と相性が良い比率です。

アップした画像そのまま：アップロード画像の比率をそのまま活かして表示します。
💡

「商品ページレイアウト」と「商品画像ギャラリー」の設定はそれぞれの組み合わせによってもスクロール感が変わってきますので、組み合わせて比べながらお好みのレイアウトに設定してください。

商品ページ共通ガイド

商品ページ共通ガイドとは、商品説明の下にあるアコーディオン形式の補足情報欄です。全ての商品に共通して同じ内容が表示されるため、ショップの基本的なお買い物ルールや、全商品共通のサイズ表画像などに利用します。ラベルと中身を自由に設定できます。
商品ページ共通ガイド フリー1〜3：ラベル共通ガイド見出しを設定します。例: Shopping Guide、サイズについて、配送について。
内容共通ガイドの本文を設定します。送料、返品条件、発送日数など、全商品に共通する説明を記載する用途です。改行したい場合は <br> を使用します。
画像（サイズ表などに）フリー1 にのみ画像も追加できます。サイズ表などを画像にして表示したい場合などに利用します。
商品ページ共通ガイド 決済方法：ラベル4つ目の場所には決済方法ガイドが表示できます。決済方法の内容は、ABOUT 設定の決済案内と連動しますのでABOUT 設定にある決済案内で設定した内容がコンパクトに表示されます。ここではその見出しだけを設定します。（Payment、お支払い方法、など）空欄にすると決済方法ガイド自体をOFFにできます。

共通ガイドの下に、レビューAppの内容を表示することも可能です。下にあるレビューApp設定にて設定します。

フロート購入ボタン、関連商品、セール商品・閲覧履歴

スクロール時に表示されるフロートウィンドウ購入ボタン名商品ページ下部やスクロール中に表示されるフロート購入導線のボタン文言を設定します。このボタンはあくまで購入ボタンエリアにスクロールさせるだけの役割であり、実際のボタンが他のステータス表示である場合も、このボタン名は連動しません。例: 購入手続きへ、カートに進む、今すぐ購入 など。
レビュー表示位置レビューAppの表示位置を切り替えます。ON：共通ガイドの中にコンパクトな形で表示します。OFF：商品ページ下部に大きめのレビューセクションとして表示します。
レビューAppの見出しレビューセクションの見出しを設定します。
関連商品の見出し関連商品一覧の見出しを設定します。
セール商品を表示商品ページ下部にセール商品一覧を表示するか切り替えます。回遊導線を増やしたい場合に使用します。
セール商品の見出しセール商品一覧の見出しを設定します。
最近見た商品を表示商品ページ下部に閲覧履歴の商品一覧を表示するか切り替えます。ユーザーが見返しやすい導線を作りたい場合に有効です。
最近見た商品の見出し閲覧履歴セクションの見出しを設定します。
← #3 ABOUT設定 #5 App設定 →