#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つの商品に幾つくらいの商品画像数があるかによって指定します。 | | ◾️購入ボタンエリア | 商品の価格情報や「カートに入れる」ボタンが表示されるエリア枠の背景色/枠線色の場合は色を指定、エリアの色分けなしも選択できます。

←目次へ戻る