キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

商品画像設定(コマースクリエイター)

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

画像幅設定

画像幅

コマースクリエイターでは、登録する元画像からリサイズする機能があります。

管理画面から商品画像をアップロードできます。その際に自動的に複数サイズの画像を自動作成します。(リサイズ処理)
自動作成される画像の画像幅を変更できます。

商品画像のサイズバリエーションを自動生成(リサイズ)する場合に使用する、各サイズバリエーションの画像幅をピクセル単位で指定してください。
商品画像の使用箇所ごとのサイズ設定は、コマースクリエイター>テーマ>テーマ設定-商品画像サイズ設定で変更できます。

画像サイズと初期設定
画像サイズ初期値使用箇所(初期値)
商品画像(メイン)商品画像(サブ)商品一覧バリエーション画像拡大画像サムネイルカートの中身注文履歴一覧注文履歴詳細お気に入り一覧レビュー一覧レビュー商品
XXL1600px
XL1200px
L800px
M400px
S200px
XS40px

XXLサイズ・オリジナル画像については初期設定しておりませんが、コマースクリエイター>テーマ>テーマ設定-商品画像サイズ設定にて使用するよう設定できます。商材や使用する画像、あるいはデザインによって任意に設定してください。

画像設定

バリエーション画像設定では、商品バリエーションの「縦軸」「横軸」いずれを商品画像と設定するか選択します。バリエーションは運用メニュー>商品管理>商品情報(バリエーション)で設定します。
選択されたバリエーションの「選択肢名」が「画像登録」欄の各商品画像のバリエーション設定の選択肢として表示されます。

画像登録

画像登録

画像登録欄で商品画像を登録します。「ファイルを選択」を押下して、商品画像を選択してください。画像点数は5点、画像ホスティング機能をご利用の場合は40点までご利用いただけます。

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

  • アップロードした画像は、設定した画像幅にあわせてリサイズ処理されます。
  • アップロードする画像が設定した画像幅より小さい場合はリサイズ処理されません。
  • 対応ファイル形式は、JPEGファイルのみとなります。(PNGファイル・GIFファイルなどは使用できません。)
    ※画像ファイル容量を小さくする処理(JPEGファイルのみ対応)を行います。
  • アップロード可能なファイルの最大容量は「500KB」までです。

商品サムネイル画像に指定する

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

表示順

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

バリエーション設定

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

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

バリエーションサムネイル画像に指定する

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

画像のキャプション

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

商品画像のURL

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

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

「itembox.design」は画像管理専用サーバのドメイン名(システム固定)となります。
商品IDは商品登録時に連番で発行される、システムで使用する番号です。商品ごとに固定となり変更できません。
画像番号は01から40までとなります。

店舗key「sampleshop」の54321番目に登録した商品の、画像01のLサイズなら以下となります。

https://sampleshop.itembox.design/product/543/000000054321/000000054321-01-l.jpg
店舗KEY:samileshop/商品ID:54321/画像01の各サイズごとファイルパス(URL)
画像サイズ 商品画像ファイルパス
オリジナルhttps://sampleshop.itembox.design/product/543/000000054321/000000054321-01.jpg
XXLhttps://sampleshop.itembox.design/product/543/000000054321/000000054321-01-xxl.jpg
XLhttps://sampleshop.itembox.design/product/543/000000054321/000000054321-01-xl.jpg
Lhttps://sampleshop.itembox.design/product/543/000000054321/000000054321-01-l.jpg
Mhttps://sampleshop.itembox.design/product/543/000000054321/000000054321-01-m.jpg
Shttps://sampleshop.itembox.design/product/543/000000054321/000000054321-01-s.jpg
XShttps://sampleshop.itembox.design/product/543/000000054321/000000054321-01-xs.jpg

実際に商品詳細や商品一覧などのシステムパーツで表示される際には、「?t={半角数字18桁}」というパラメタ(画像キャッシュ制御用)が付きます。

商品画像ファイルのパスは、フリーパーツに置換文字を記載すれば商品詳細・商品一覧(商品表示部分)で表示できます。 独自に商品画像表示する場合など、商品画像のURLを指定する場合は、置換文字一覧をご利用ください。

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

商品詳細ページでJPEG形式以外の画像を使用したい場合は、アイテムを使用していただけます。

システムに保存可能な全ファイル容量はご利用プランによって違いますが、商品画像・商品グループ画像・バンドル画像・クーポン画像とアイテムの合計で計算されます。

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。