#4商品ページ設定

商品詳細ページは商品登録をすると自動的に生成され、基本的には入力した商品情報(画像、テキスト、オプション、販売形態など)によって決まったフォーマットで表示されます。

テーマ「Artwork」では、商品ページごとにヘッダーエリアに大きなビジュアル画像を表示できることを特徴としており、「どう表示するか」「どの画像を表示するか」の設定や少し複雑です。

「メインビジュアルスライダー」はとりあえずOFFにしておいて、ショップ全体の設定が終わってからでも大丈夫です。

◾️メインビジュアルスライダー 商品画像ページのメインビジュアルの表示形式を設定します。
先頭1枚のみをメインビジュアルとして利用する場合はOFFに。
先頭3枚をスライドショー表示したい場合はONに。
全ての商品に統一して設定されます。ONになっていても画像が1枚しかない商品はスライドになりません。スライド化しても2枚目、3枚目の画像はコンテンツ内に表示されますので、スライドはあくまで演出として非常にゆっくりと表示されます。
⌊ OFFの場合: n枚目を使用 上の設定がOFFの場合(スライドショーではなく固定表示させる場合)に、1枚目ではなく、2〜5番目の画像をビジュアル用として指定できます。全てOFFの場合は1枚目に、2〜5番目を指定する場合はどれか1つだけONにしてください。ONの場合(スライドショーの場合)はこの設定は関係せず、先頭3枚が採用されます。

この設定の意味
初期状態では、商品画像の先頭1枚目がメインビジュアルとなります。1枚目の画像はサムネイルでもあるため、物撮り写真など分かりやすい写真となりますが、一方でメインビジュアルとしては不向きな場合があります。ビジュアルには使用シーンや製造シーンなどより抽象的なイメージを使いたい場合に、2番目以降の画像をビジュアル用に指定することができます。

例えば「5枚目を使用」をONにし、すべての商品において5枚目は商品を大胆に拡大&トリミングしたビジュアル重視の画像を設定します。すると、1枚目はその商品の物撮り写真にしつつ、すべての商品イメージを印象的なものにすることができます。ショップにより、商品写真が何枚くらい用意できるかが様々であるため幅を持たせてあるだけですので、何枚目とするかは自由です。
⌊ 選択した画像を画像一覧から除外上の設定で、もし「n番目に設定することにしたビジュアル重視の画像」が、あくまでビジュアルとして見せたいだけで商品画像一覧には不要である場合、この設定をONにすることで、選択した「n番目」の画像を商品画像一覧から除外できます。例えば、商品説明の部分はあくまで物撮り写真だけを並べたい、というような場合に活用できます。
⌊ メインビジュアル表示タイプ
  • フルスクリーン & スマホで横スライド:画像はフルスクリーンで表示します。さらにスマホ縦長でもフルスクリーンで表示しつつ、上の設定で1枚のみにした場合に動きをつけるために写真をゆっくりと横スライドさせます。商品写真が横長で、スマホの縦サイズでは左右が見切れるため、それをカバーするようにスライドする表示方法です。
  • フルスクリーン(画面全体で大きく表示):画像はどんな画面でもフルスクリーンで表示します。
  • ハーフスクリーン(画面半分でクロップ):写真全体を表示するために表示領域を半分くらいにします。これにより横長写真でも左右がある程度表示されます。
  • クロップせず縦横比を維持:商品写真が縦長である場合など、PC画面でもクロップせずにそのままの比率で表示します。画面の縦横比率は可変ですので必ず左右に隙間ができてしまいますが、あえてそのマージンをデザインとしてみせるような使い方もできます。
基本的には好みで「フルスクリーン」か「ハーフスクリーン」かを選択してください。「先頭1枚のみ」を選択している場合は「フルスクリーン & 横スライド」がお勧めです。
◾️商品説明を冒頭に表示商品のプレゼンテーション的な演出として、商品タイトル下に説明文を表示するかどうかを選択。もし写真があまりなく、ここの説明文と下に改めて表示される説明文とが近すぎる場合はこちらをOFFにします。
◾️写真サムネイル表示商品写真のサムネイルの列数を選択します。全商品で統一のため、全体として1つの商品に幾つくらいの商品画像数があるかによって指定します。
◾️購入ボタンエリア商品の価格情報や「カートに入れる」ボタンが表示されるエリア枠の背景色/枠線色の場合は色を指定、エリアの色分けなしも選択できます。背景色を指定する場合でも、文字色はその他のエリアと同じです。文字が読みづらくならないように配慮してください。
◾️スマホにて購入ボタンを固定表示スマホでの閲覧時、下にスクロールすると「カートに入れる」ボタンが画面下部に固定表示されます。商品説明コンテンツが多く、ページが長くなっている場合でも購入画面に移りやすくなります。(このボタンをタップすると本来のカートボタンエリアにスクロールして戻ります。ボタン内容は商品販売ステータスに応じて変化します。)
⌊ スマホでの商品詳細での質問ボタン表示メッセージAppを利用している場合、スマホ画面では「ショップに質問する」ボタンが比較的大きく表示されます。上の「スマホにて購入ボタンを固定表示」をしている場合、画面が狭くなってしまうため、必要に応じて質問ボタンを非表示にできます。
◾️本文下にシェアボタン表示SNSシェアボタンの有無
◾️関連商品の見出し関連商品の見出しを変更できます。
◾️セール商品を表示「セール App」にて割引率を設定し、セール中になっている商品を6つまで表示します。セール中商品の先頭6件をランダムに表示します。どの商品が表示されるか、などの詳しい制御はできません。3個表示のレイアウトになるため、セール中商品が少なくとも3つある場合に利用してください。
⌊セール商品の見出しセール商品の見出しを変更できます。(デフォルト値「On Sale」)
◾️閲覧履歴を表示最近の閲覧済みの商品3つが表示されます。
⌊ 閲覧履歴の見出し関連商品の見出しを変更できます。(デフォルト値「Recently Viewed」)