[商品情報]商品画像設定

ECサイトを構成する、商品画像・デザイン画像・CSSなどのファイルを格納し、表示する「アイテムボックス機能」を刷新します。

本マニュアルは、アイテムのURLドメインが.itembox.cloudとなるアイテムボックス機能(新バージョン(V2))に関して解説しております。

アイテムボックス機能に関しては、2025.12上旬~2026春にかけて順次、新バージョン(V2)に切替えを行ってまいります。
切替えスケジュールについては、店舗様ごとに異なりますので、futureshopサポートより別途ご連絡をさせていただきます。

アイテムボックス機能(新バージョン(V2))についてはアイテムボックス機能(新バージョン(V2))の概要と変更点についてをご覧ください。

切替えが完了するまでは、旧バージョン(V1)のマニュアルをご参照ください。

[商品情報]商品画像設定(アイテムボックス機能(旧バージョン(V1)利用)の場合)


運用>商品管理>商品情報(商品画像設定)
運用>商品管理>商品情報(商品画像設定)
商品新規登録・商品基本情報編集画面の[商品画像]タブを押下すると表示されます。

「商品詳細」画面や「商品一覧」画面に表示する商品画像を登録できます。

本管理画面からアップロードできる対応ファイル形式は、JPEG(.jpg)のみになります。 JPEG(.JPG)・JPEG(.jpeg)・PNG・GIFなどはご利用できません。

設定項目


画像幅

コマースクリエイターでの商品画像・商品グループ画像は、登録されたオリジナル画像を元に、画像表示時に自動でリサイズされる仕様となっています。

本項目にて、操作中の商品の画像表示時に、リサイズ表示される「画像幅」を設定できます。
初期値については、全商品共通(店舗共通設定)となる設定>商品・商品グループ>商品ページ設定-商品画像幅設定の値が入力されています。

画像幅

各サイズの画像幅を、ピクセル単位で入力してください。
入力すると、商品個別でのサイズ指定となります。

各サイズの画像の用途の指定は、コマースクリエイター>テーマ>テーマ設定-商品画像サイズ設定にて行います。

<ご注意事項>

  • 画像登録後に画像幅サイズを変更しても、登録済みの画像サイズは変更されません。
  • 商品ページ設定-商品画像幅設定でサイズを変更すると、本画面の初期値も連動して変更されます。
    • ただし、以下の場合は連動しませんのでご注意ください。
      • 本画面で、画像サイズを指定(サイズを変更)した
      • これまでに、商品画像を1枚でも登録したことがある(削除も含む)

画像設定

画像設定

バリエーション商品でバリエーション毎に画像を表示したい場合に、設定します。

バリエーション画像設定では、商品バリエーションの「縦軸」「横軸」いずれを商品画像と設定するか選択します。
選択されたバリエーションの「選択肢名」が「画像登録」欄の各商品画像のバリエーション設定の選択肢として表示されます。

画像登録欄の表示も、バリエーションではない商品とは異なります。
バリエーション設定をご覧ください。

バリエーションは運用>商品管理>商品情報(バリエーション)で設定します。

画像登録(バリエーションではない商品の場合)

画像登録

画像登録

画像登録欄で商品画像を登録します。
「ファイルを選択」を押下して、商品画像を選択してください。

画像点数は5点、画像ホスティング機能をご利用の場合は40点までご利用いただけます。

必要に応じてALTテキストを入力してください。(ALTテキストは画像のALT属性の値として出力されます。)

  • アップロードした画像は、画像表示時に自動でリサイズされる仕様となっています。登録時のリサイズは行いません。
  • 対応ファイル形式は、JPEGファイルのみとなります。(PNGファイル・GIFファイルなどは使用できません。)
    ※画像ファイル容量を小さくする処理(JPEGファイルのみ対応)を行います。
  • アップロード可能なファイルの最大容量は 「1MB」 です。
[商品サムネイル画像に指定する]ラジオボタン

ラジオボタンをONにすると、サムネイル画像に指定できます。

商品サムネイル画像は 必須 です。
いずれかの画像を商品サムネイル画像に設定してください

商品バリエーション画像設定時の商品バリエーション検索の場合は、バリエーション設定が優先されます。

表示順(バリエーションではない商品の場合)

画像を表示する順番を設定できます。

メイン画像の初期表示と画像の表示順について

登録画像は各画面にて、以下のように表示されます。
使用するパーツにより異なります。

「商品グループ」画面(「商品検索結果一覧」画面)
使用パーツ
商品画像・拡大パーツ 一覧画像(初期表示時) 「商品サムネイル指定画像」を表示
[拡大]ボタン押下時 表示順の設定に従って表示
※拡大画面を閉じてから再表示すると、閉じた時点での画像が表示されます。
(閉じた時点での表示画像が保持されています。)

表示イメージなどについては「商品グループ」レイアウトのシステムパーツ-商品画像・拡大パーツをご覧ください。

「商品詳細」画面
使用パーツ
商品画像パーツ メイン画像(初期表示時) 「商品サムネイル指定画像」を表示
サブ画像 <表示順の設定に重複がない場合>
表示順の設定に従って表示

<表示順に重複がある場合>
表示順が最優先
表示順が重複している場合は、「画像番号の昇順(画像1から)」で表示
[拡大]ボタン押下時 <表示順の設定に重複がない場合>
表示順の設定に従って表示(表示開始はメイン表示画像から)

<表示順に重複がある場合>
表示順が最優先
表示順が重複している場合は、「画像番号の昇順(画像1から)」で表示

※拡大画面を閉じてから再表示すると、閉じた時点での画像が表示されます。(閉じた時点での表示画像が保持されています。)
商品画像パーツ・フリック メイン画像(初期表示時) <表示順の設定に重複がない場合>
「表示順1」の画像を表示

<表示順に重複がある場合>
「表示順1」が最優先
「表示順1」が重複している場合は、「画像1」を表示
サブ画像 <表示順の設定に重複がない場合>
表示順の設定に従って表示

<表示順に重複がある場合>
表示順が最優先
表示順が重複している場合は、「画像番号の昇順(画像1から)」で表示
[拡大]ボタン押下時 表示中の画像を拡大して表示
商品画像繰り返しパーツ 表示順(初期表示時) <表示順の設定に重複がない場合>
表示順の設定に従って表示

<表示順に重複がある場合>
表示順が最優先
表示順が重複している場合は、「画像番号の昇順(画像1から)」で表示

表示イメージなどについては以下をご覧ください。

画像登録(バリエーション商品の場合)

画像登録

バリエーション設定

画像設定で、「縦軸」または「横軸」を選択すると表示されます。

商品画像を設定するバリエーションを選択します。
商品画像にバリエーションを設定し、バリエーションサムネイル画像に指定すると、以下の箇所でバリエーションにあわせた商品画像を表示できます。

  • 商品一覧・商品詳細の商品バリエーション表示(選択)部分でバリエーションごとに設定された商品画像を表示
  • ショッピングカートに商品画像を表示する場合に、カートに追加されたバリエーションに設定された商品画像を表示
  • バリエーションを選択してお気に入りに登録された場合に、お気に入り登録されたバリエーションに設定された商品画像を表示
  • 注文履歴で購入されたバリエーションに設定された商品画像を表示
  • 商品バリエーション検索した場合の商品検索結果一覧で、検索条件に合致したバリエーション画像を商品画像として表示
    (例 バリエーション「レッド」で商品検索した場合、バリエーション「レッド」が設定された商品画像を商品検索結果一覧に表示)
    かつ、商品検索結果一覧から商品詳細画面に遷移した際に、検索条件に合致したバリエーション画像を商品画像パーツにメイン表示
[バリエーションサムネイル画像に指定する]チェックボックス

同じバリエーションを指定した画像の中で、いずれかの画像の「バリエーションサムネイル画像に指定する」のチェックをつけてください。
バリエーション設定時はバリエーションサムネイル画像が 必須 となります。

表示順(バリエーション商品の場合)

画像を表示する順番を設定できます。

メイン画像の初期表示と画像の表示順について

登録画像は各画面にて、以下のように表示されます。
使用するパーツにより異なります。

「商品グループ」画面(「商品検索結果一覧」画面)
使用パーツ
商品画像・拡大パーツ 一覧画像(初期表示時) 「サムネイル指定画像」を表示
[拡大]ボタン押下時 <表示順の設定に重複がない場合>
表示順の設定に従って表示

<表示順に重複がある場合>
表示順が最優先
表示順が重複している場合は、「バリエーション画像設定」で選択した軸側の「選択肢登録昇順(表示順序ではない)」で表示

※同一バリエーションに複数枚画像がある場合は、「画像番号の降順」で表示
※バリエーション指定のない画像は、各表示順の最後に表示 ※拡大画面を閉じてから再表示すると、閉じた時点での画像が表示されます。(閉じた時点での表示画像が保持されています。)

表示イメージなどについては「商品グループ」レイアウトのシステムパーツ-商品画像・拡大パーツをご覧ください。

「商品詳細」画面
使用パーツ レイアウト設定に「カート・バリエーション選択スライダーパーツ」を利用の場合のみ
商品画像パーツ メイン画像(初期表示時) 「商品サムネイル指定画像」を表示 商品ページ設定>バリエーション選択スライダー表示>バリエーション選択の初期値の設定に準拠

<「代表バリエーションを選択する」選択>
「代表バリエーション」(代表バリエーションが画像未登の場合は、「商品サムネイル指定画像」)

<「1番目の選択肢を選択する」選択>
「バリエーション画像設定」で選択した軸側の「表示順1」の「バリエーションサムネイル指定画像」を表示

<「初期値を設定しない」選択>
「商品サムネイル指定画像」を表示
サブ画像 <表示順の設定に重複がない場合>
表示順の設定に従って表示

<表示順に重複がある場合>
表示順が最優先
表示順が重複している場合は、「バリエーション画像設定」で選択した軸側の「選択肢登録昇順(表示順序ではない)」で表示

※同一バリエーションに複数枚画像がある場合は、「画像番号の降順」で表示
※バリエーション指定のない画像は、各表示順の最後に表示
左欄と同様
[拡大]ボタン押下時 サブ画像と同様 左欄と同様
商品画像パーツ・フリック メイン画像(初期表示時) <表示順の設定に重複がない場合>
「表示順1」の画像を表示

<表示順に重複がある場合>
「表示順1」が最優先
「表示順1」が重複している場合は、「バリエーション画像設定」で選択した軸側の「選択肢番号」の最も小さいバリエーションの画像を表示(表示順序ではない)

※該当バリエーションに、「バリエーションサムネイル画像」と「指定なし画像」が1枚のみの場合は、「バリエーションサムネイル画像」を表示
※該当バリエーションに「バリエーションサムネイル指定なし画像」が複数枚ある場合は、「画像番号」が最も大きい画像を表示(「バリエーションサムネイル画像」ではない)
商品ページ設定>バリエーション選択スライダー表示>バリエーション選択の初期値の設定に準拠

<「代表バリエーションを選択する」選択>
「代表バリエーション」(代表バリエーションが画像未登の場合は、「バリエーション画像設定」で選択した軸側の「選択肢番号」の最も小さいバリエーションの画像を表示。(※)については左欄と同様)

<「1番目の選択肢を選択する」選択>
「バリエーション画像設定」で選択した軸側の「表示順1」の「バリエーションサムネイル指定画像」を表示

<「初期値を設定しない」選択>
左欄と同様
サブ画像 <表示順の設定に重複がない場合>
表示順の設定に従って表示

<表示順に重複がある場合>
表示順が最優先
表示順が重複している場合は、「バリエーション画像設定」で選択した軸側の「選択肢登録昇順(表示順序ではない)」で表示

※同一バリエーションに複数枚画像がある場合は、「画像番号の降順」で表示
※バリエーション指定のない画像は、各表示順の最後に表示
左欄と同様
[拡大]ボタン押下時 表示中の画像を拡大して表示 左欄と同様
商品画像繰り返しパーツ 表示順(初期表示時) <表示順の設定に重複がない場合>
表示順の設定に従って表示

<表示順に重複がある場合>
表示順が最優先
表示順が重複している場合は、「バリエーション画像設定」で選択した軸側の「選択肢登録昇順(表示順序ではない)」で表示

※同一バリエーションに複数枚画像がある場合は、「画像番号の降順」で表示
※バリエーション指定のない画像は、各表示順の最後に表示
左欄と同様

表示イメージなどについては以下をご覧ください。

画像のキャプション表示について

画像のキャプションには「バリエーション選択肢名」が表示されます。
なお、画像にキャプションに表示されるのは、バリエーション選択肢名のみとなります。

複数バリエーション検索結果で表示されるバリエーションサムネイル画像について

商品バリエーション検索では複数バリエーションを同時に検索できます。

複数の検索条件にヒットし、かついずれのバリエーションにもバリエーションサムネイル画像が設定されている場合、以下の条件でバリエーションを検索してバリエーションサムネイル画像を表示します。

  1. 運用>商品管理>商品情報(バリエーション)-表示順序の早い順
  2. 運用>商品管理>商品情報(バリエーション)-登録順

【参考】商品画像のURLについて

商品画像のURLは以下のルールで記述されます。

https://{店舗KEY}.itembox.cloud/product/{商品IDの万千百の位3桁}/{商品ID・12桁表示}/{商品ID・12桁表示}-{画像番号・2桁表示}.jpg

<例>
店舗KEY:samileshop/商品ID:54321/画像01のファイルパス(URL)の場合

https://sampleshop.itembox.cloud/product/543/000000054321/000000054321-01.jpg
  • 「itembox.cloud」 は、画像管理専用サーバのドメイン名(システム固定)となります。
  • 商品IDは、商品登録時に連番で発行される、システムで使用する番号です。商品ごとに固定となり変更できません。
  • 画像番号は、01から40までとなります。
  • 画像の形式(拡張子)は、「Jpeg/webp/avif」 の中より、画像表示時に最適な形式をシステム的に自動で判断し、出力します。
  • リサイズ画像は、「サイズ種類」「タイムスタンプ」などのパラメータを、画像表示時に付与し、出力します。

商品IDは、Googleデータフィード登録用ファイル(コマースクリエイター)-商品番号【基本情報】に出力されます。
運用>商品管理>商品データ一括取得にてCSVをダウンロードしてご利用ください。

<サイズ・タイムスタンプの出力例>

サイズURLサンプル
オリジナルhttps://{店舗KEY}.itembox.cloud/product/025/000000002558/000000002558-01.jpg?size=org&t=20250602152149
XXLhttps://{店舗KEY}.itembox.cloud/product/025/000000002558/000000002558-01.jpg?size=xxl&w=MTYwMA&t=20250602152149
XLhttps://{店舗KEY}.itembox.cloud/product/025/000000002558/000000002558-01.jpg?size=xl&w=MTIwMA&t=20250602152149
Lhttps://{店舗KEY}.itembox.cloud/product/025/000000002558/000000002558-01.jpg?size=l&w=ODAw&t=20250602152149
Mhttps://{店舗KEY}.itembox.cloud/product/025/000000002558/000000002558-01.jpg?size=m&w=NDAw&t=20250602152149
Shttps://{店舗KEY}.itembox.cloud/product/025/000000002558/000000002558-01.jpg?size=s&w=MjAw&t=20250602152149
XShttps://{店舗KEY}.itembox.cloud/product/025/000000002558/000000002558-01.jpg?size=xs&w=MTAw&t=20250602152149

「商品詳細」画面や「商品一覧」画面などに独自で(手動で)表示したい場合

商品画像ファイルのパスは、フリーパーツに置換文字を記載すれば商品詳細・商品一覧(商品表示部分)で表示できます。

独自に商品画像表示する場合など、商品画像のURLを記述したい場合は、置換文字一覧をご利用ください。

関連情報

FTP経由で一括登録する場合

商品画像はFTP経由で一括登録が可能です。

詳しくは、FTPサーバから商品画像・商品グループ画像・アイテムをアップロードをご覧ください。

商品詳細ページでGIFファイル、PNGファイルなどを使用する場合

商品詳細ページでJPEG形式以外の画像を使用したい場合は、アイテムを使用していただけます。
ただしその場合は、画像表示時の自動リサイズ判定はありませんので、事前にリサイズした画像をアップロードしてください。