商品画像のloading修正 (WareHouseテーマ)

今まで完全に見落としていましたので備忘録として。

WareHouseテーマ(Shopify)では、商品コレクションと商品ページで共通利用しているコンポーネントがいくつかあります。

商品画像を描画しているファイルもその1つです。(/snippets/product-gallery.liquid)

コレクションページ、商品ページ共通で、商品画像の描画に同じファイルを呼び出す(loading=”lazy”が指定されているファイル)ため、商品ページの画像はファーストビューで表示されるにも関わらず、loading=”lazy” が指定されています。

商品ページのloading=”lazy”回避策

{%- if request.page_type == 'product' -%}
 // 商品ページ
{%- else -%}
 // その他
{%- endif -} 

でページ種類は識別できますので、商品ページなのかコレクションページなのかで分岐して、適切なloading属性を出力するように調整することが望まれます。

注意点として、商品ページ下部に関連商品が表示されているときはページ種類だけでは識別できません。

独自settingなどで調整する必要があります。

Shopify