【Shopify】テーマカスタマイズで画像がうまく表示されない時の対処法

悩む人

ファイル名やURLをちゃんと入力しているのに画像が表示されない。
どうすればいいの？

こんな疑問を解決します。

《当サイト使用テーマ》

Shopifyでテーマ開発をしていると、

「ちゃんと画像パスを指定しているのに、画像が表示されない…」

なんてことがよくありますよね。

今回は、そんな画像がうまく表示されない時の対処法を解説し、画像をちゃんと表示させるために知っておくべき画像URLフィルターとサイズパラメータについても解説していきます。

本記事を参考にすれば、Shopifyテーマ開発で画像が表示されずに悩んで時間を無駄にすることがなくなるでしょう。

Shopifyで画像が表示されない時の対処法

結論、フィルターを使いましょう。

フィルターとは、Liquidのアウトプット{{ }}内に「｜」を記述して書くあれです。

Shopifyのテーマカスタマイズ中にうまく画像が表示されない場合は以下のフィルターを記述してみてください。

Assets内の画像を表示したい場合

{{ 'image.png' | asset_img_url: '300x' }}

このようにAssetsフォルダ内の画像を表示したい場合は、ファイル名の後にasset_img_urlを記述することで、うまく表示されるようになるはずです。

ちなみに「: ‘300x’」の部分は画像のサイズを指定しているサイズパラメータです。
詳しくは後ほど解説します。

「設定」＞「ファイル」内の画像を表示したい場合

{{ 'image.png' | file_img_url: '1024x768' }}

ストア管理画面の「設定＞ファイル」内の画像を表示したい場合は、上記のようにfile_img_urlフィルターを記述しましょう。

ストア管理画面の「設定＞ファイル」内には、商品やブログなどで使用するためにアップロードした画像が保存されています。

ブロックやコレクションなどの画像を表示したい場合

{{ block.image | img_url: '100x100' }}

ブロックや商品、コレクションなどの画像を表示したい場合は、上記のようにimg_urlを記述します。

img_urlフィルターを使用する場合にサイズパラメーターを付与しなかった場合は、画像サイズが自動で「100×100」になります。

img_urlが使えるオブジェクト

img_urlフィルターが使えるオブジェクトは以下の6つです。

img_urlはimageにもsrcにも使える

img_urlの特徴として、オブジェクトのimageまたはsrcのどちらにも使用できる点です。

例えば、以下のように記述した場合、どちらも同様に出力されます。（画像サイズは異なります）

{{ variant.image | img_url: '300x300' }}
{{ variant.image.src | img_url: '240x' }}

トマトソース

img_urlは何かと便利なので、画像が表示されない時はまずこのフィルターを試してみると良さそうです。

Shopifyで画像表示する際は『サイズパラメータ』を活用する

Shopifyでは、画像のURLを記述する際に画像のサイズの指定も同時にできるので、しっかりとサイズ指定も行うようにしておきましょう。

サイズの指定方法は以下のように、画像URLフィルターの後に「: ‘指定したいサイズ’」と記述すればOKです。

{{ product.image.src | img_url: '240x' }}

ちなみに画像サイズの指定はpxでの指定となっています。

画像のサイズ指定の最大サイズは？

Shopifyでのサイズパラメータで指定できる最大の画像サイズは「5760 x 5760 px」となっています。

ただ、一つ注意点としては、「5760 x 5760 px」と最大サイズを指定したとしても、元の画像サイズがこのサイズ未満であればそれ以上拡大されることはありません。

例えば、元の画像ファイルが「1024 x 640px」だとして、サイズパラメータで「2000 x 1242px」と指定しても「1024 x 640px」のサイズで出力されます。

画像の横幅のみの指定

{{ product.image | img_url: '240x' }}

上記のようにサイズパラメータを「240x」のみ記述した場合は、横幅のみの指定となります。

この場合は、画像のオリジナルサイズに合わせて自動で高さが算出され、出力されます。

画像の高さのみの指定

{{ product.image | img_url: 'x240' }}

今度は逆に、上記のように「x240」とだけ記述した場合は、画像の高さのみの指定ができます。

この場合も上記と同様、画像のオリジナルサイズに合わせて、画像の横幅が自動で算出されて画面に出力されます。

画像のサイズを変えたくない場合

{{ product.image | img_url: 'master' }}

上記のように「’master’」というサイズパラメータを渡せば、元の画像サイズのまま出力させることができます。

【Shopify】テーマカスタマイズで画像が表示されない時の対処法：まとめ

今回は、Shopifyのテーマカスタマイズで画像が表示されない時の対処法を解説してきました。

私もよく画像が思ったように表示されず慌てることがありますが、今回紹介した「img_url」などのフィルターのつけ忘れであることがほとんどです。

画像を表示させたい場合は、ちゃんと画像のURLフィルターを記述しているか確認し、サイズパラメータも渡して画像サイズを指定するようにしておきましょう。

サイズを指定していないと思わぬサイズで表示されることもありますからね。

今回は以上となります。

皆さんのShopifyテーマ開発に少しでもお役に立てたら幸いです。