クリエイターモードのテンプレート【Complete】では、2025年3月27日以降にデザインセットとして追加した場合は
初期値に遅延読み込み(レイジーローディング)のソースが含まれています。
すでにクリエイターモードをご利用の場合は、適用中のデザインセットの
<img>要素にloading属性を追記することで対応できます。
例として【Complete】の追記箇所は以下です。
※行数は変動することがありますので、前後を確認してください。
▼トップページ
ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
HTML欄
・93行目
<a href="<{$review_item.list[i].url}>"><img src="<{$review_item.list[i].image_S}>" alt="<{$review_item.list[i].name}>"></a>
↓
<a href="<{$review_item.list[i].url}>"><img src="<{$review_item.list[i].image_S}>" alt="<{$review_item.list[i].name}>" loading="lazy"></a>
▼カテゴリーページ
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品カテゴリー
HTML欄
・65行目
<a href="<{$category.recommend_item.list[i].url}>"><img src="<{$category.recommend_item.list[i].image_L}>"
alt=""></a>
↓
<a href="<{$category.recommend_item.list[i].url}>"><img src="<{$category.recommend_item.list[i].image_L}>"
alt="" loading="lazy"></a>
・139行目
<a href="<{$category.item.list[i].url}>"><img src="<{$category.item.list[i].image_L}>" alt=""></a>
↓
<a href="<{$category.item.list[i].url}>"><img src="<{$category.item.list[i].image_L}>" alt="" loading="lazy"></a>
▼商品検索結果ページ
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品検索結果
HTML欄
・81行目
<a href="<{$search.item.list[i].url}>"><img src="<{$search.item.list[i].image_L}>" alt=""></a>
↓
<a href="<{$search.item.list[i].url}>"><img src="<{$search.item.list[i].image_L}>" alt="" loading="lazy"></a>
▼商品詳細ページ
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
HTML欄
・69行目
<li><img src="<{$item.multi_image.list[i].image_L}>" class="item-image"
alt=""></li>
↓
<li><img src="<{$item.multi_image.list[i].image_L}>" class="item-image"
alt="" loading="lazy"></li>
・82行目
<img src="<{$item.add_image.list[i].image_url}>" alt="">
↓
<img src="<{$item.add_image.list[i].image_url}>" alt="" loading="lazy">
・296行目
<img src="<{$item.option_sku.list[i].image_S}>" data-option-image="<{$item.option_sku.list[i].image_L}>"
class="option-image">
↓
<img src="<{$item.option_sku.list[i].image_S}>" data-option-image="<{$item.option_sku.list[i].image_L}>"
class="option-image" loading="lazy">
▼まとめ買い割引ページ
ショップデザイン / テンプレート選択・編集 / クリエイターモード / まとめ買い割引
HTML欄
・82行目
<a href="<{$bulk.item.list[i].url}>"><img src="<{$bulk.item.list[i].image_L}>"
alt=""></a>
↓
<a href="<{$bulk.item.list[i].url}>"><img src="<{$bulk.item.list[i].image_L}>"
alt="" loading="lazy"></a>
【Complete】以外のテンプレートでは
上記を参照し、<img>要素にloading属性を追記してください。


