遅延ロードについて

スマートフォンでショップ画面を表示する際、「ページの読み込み」は表示されている部分だけでなく、表示されていない部分についても行われます。商品一覧画面（商品グループ・商品検索結果）では、商品サムネイル画像が複数配置されますので、通常は、すべての商品サムネイル画像の読み込み後に「ページの読み込み」が完了します。

この「遅延ロード」機能を利用すると、ページを表示する際に、スマートフォンの画面に表示されていない「商品サムネイル画像」を読み込みません。その結果、「ページの読み込み」が（遅延ロード機能を利用しない場合に比べて）速く完了します。

いったんページの読み込みを完了した後、ページをスクロールすると、読み込まれていなかった「商品サムネイル画像」が、画面に表示されるタイミングで、読み込みます。読み込み前には「読み込み中表示画像」が表示され、画像の読み込みが完了すると、商品サムネイル画像が表示されます。

ページ読み込み完了時（左）

赤枠内がスマートフォンに表示される範囲。範囲外の商品サムネイル画像のかわりに「読み込み中画像」が表示されます。

画面スクロール時（右）

赤枠内（スマートフォンに表示される範囲）に入った際に、商品サムネイル画像が読み込まれ、表示されます。

「遅延ロード」機能ご利用時の注意

「読み込み中表示画像」と登録されている「商品サムネイル画像」の高さが違っていると、 「商品サムネイル画像」読み込み時に高さが変更され、画面が見づらくなる場合があります。

ご登録いただいている「商品サムネイル画像」と同じ高さの「読み込み中表示画像」を登録するか、cssを利用して「商品サムネイル画像」を表示する部分の高さを指定してください。 「読み込み中表示画像」は、モバイルメニュー＞スマートフォンデザイン設定＞ボタン設定-商品サムネイル画像 「読み込み中表示」用画像で登録できます。

読み込み中表示画像

初期状態では横80ピクセル×縦80ピクセルのアニメーションGIF画像を設定しています。

読み込み後、スマートフォンの画面に表示された際に、商品サムネイル画像が読み込まれます。 画像の高さに差があるため、読み込み前後で高さが変わる場合があります。

すべてのバリエーションをセレクトボックスで表示

バリエーションを「カラー／サイズ」など「／」で区切って、セレクトボックスで表示します。 1つのセレクトボックスで表示するので、画面の表示スペースが少なくて済みます。

一方のバリエーションを選択する

バリエーションの一方を選択すると、選択したバリエーションの一覧が表示されます。
バリエーションの数が多い場合に適しています。
(例 カラー10色で、サイズがXXS・XS・S・M・L・XL・XXLの7サイズ、合計70バリエーション)

バリエーションごとにカートボタンを表示

バリエーションごとに「カートに入れる」ボタンや、在庫切れ時には「入荷お知らせメール」ボタンを表示することもできます。

定期・頒布会商品の場合は「すべてのバリエーションをセレクトボックスで表示」が適用されます。

バリエーション縦横配置設定

運用＞商品管理＞商品情報（バリエーション）で設定した「縦軸」「横軸」の項目のどちらを基準に並べるかを選択できます。

レッド／S
レッド／M
：
ブルー／S
ブルー／M
：

S／レッド
M／レッド
：
S／ブルー
M／ブルー
：

バリエーション縦横配置設定

運用＞商品管理＞商品情報（バリエーション）で設定した「縦軸」「横軸」の項目のどちらをセレクトボックスに表示するかを選択できます。 なお、バリエーションが「縦軸」「横軸」のどちらかしかない場合、セレクトボックスが表示されません。

在庫切れ表示設定

在庫切れの場合

在庫切れの場合の表示方法を設定できます。

×選択肢名を表示

在庫切れになったバリエーションは「×」を付けて表示します。（在庫切れになったバリエーションは選択できません。）

行を削除する

在庫切れになったバリエーションは表示されません。

予約在庫切れ表示設定

予約在庫切れの場合

予約販売時に「予約在庫切れ」の場合の表示方法を設定できます。

×選択肢名を表示する

予約在庫切れになったバリエーションは「×」を付けて表示します。（在庫切れになったバリエーションは選択できません。）

行を削除する

予約在庫切れになったバリエーションは表示されません。

バリエーション縦横配置設定

運用＞商品管理＞商品情報（バリエーション）で設定した「縦軸」「横軸」の項目のどちらを基準に並べるかを選択できます。 なお、バリエーションが「縦軸」「横軸」のどちらかしかない場合、設定されているバリエーションにカートボタンを付けて表示されます。

在庫切れ表示設定

在庫僅少閾値コメント

構築＞ページ設定＞商品ページ設定-在庫切れ設定-在庫表示設定にて「在庫僅少表示」を選択した場合に、在庫が「僅少表示閾値」に設定した数以下になった場合に、表示される文言を設定できます。最大文字数：全角100字

在庫数キャプション

在庫数を表示する際の文言を指定できます。「在庫数キャプション」と「在庫数は「：」で区切って表示されます。最大文字数：全角10字

予約在庫切れ表示設定

予約在庫僅少閾値コメント

構築＞ページ設定＞商品ページ設定-予約設定-予約在庫表示設定にて「予約在庫僅少表示」を選択した場合に、在庫が「予約在庫僅少表示閾値」に設定した数以下になった場合に、表示される文言を設定できます。最大文字数：全角100字

予約在庫数キャプション

予約在庫数を表示する際の文言を指定できます。最大文字数：全角10字「予約在庫数キャプション」と「予約在庫数は「：」で区切って表示されます。