ShopifyでCSSやJS、画像を読み込む方法
Shopifyでテーマフォルダに入れたCSSや画像ファイルを画面に表示する方法を解説します。
テーマフォルダ以外にも管理画面からアップロードしたファイルを読み込む方法についても解説します。
ShopifyでCSSやJSファイルを読み込む方法
cssやjsフォルダの読み込み方法は次の３つがあります。
- テーマの
assetsフォルダから読み込む - 管理画面のファイルにアップロードしたものを読み込む
- 外部サーバーから読み込む
assetsフォルダにあるcssファイルやjavascriptファイルを読み込むには、asset_urlフィルタを使います。
<link rel="stylesheet" href="{{ 'style.css' | asset_url }}">
<script src="{{ 'script.js' | asset_url }}"></script>
管理画面のファイルにcssやjsファイルを入れている場合は、file_urlを使います。もしくはファイル一覧に表示されているURLを直接取得してもOK。
<link rel="stylesheet" href="{{ 'style.css' | file_url }}">
<script src="{{ 'script.js' | file_url }}"></script>
外部サーバーから読み込む場合は普通にリンクするだけ。
<link rel="stylesheet" href="https://domain.com/style.css">
<script src="https://domain.com/script.js"></script>
Shopifyで画像を読み込んで表示する方法
画像もcssファイルと同様、assetsフォルダ、ファイルからアップロード、外部サーバーから読み込むことができます。
// assetsフォルダから読み込む
<img src="{{ 'logo.png' | asset_url }}" alt="logo">
// ファイルから読み込む
<img src="{{ 'logo.png' | file_url }}" alt="logo">
元画像を読み込む他に、圧縮したり拡大された画像を読み込むこともできます。その場合はasset_img_urlかfile_img_urlを使います。
// 縦横を指定して読み込み
<img src="{{ 'logo.png' | asset_img_url: '500x200' }}" alt="logo">
<img src="{{ 'logo.png' | file_img_url: '500x200' }}" alt="logo">
// 横幅だけ指定して読み込み、比率を維持したままサイズを変更可能
<img src="{{ 'logo.png' | asset_img_url: '1024x' }}" alt="logo">
<img src="{{ 'logo.png' | file_img_url: '1024x' }}" alt="logo">
// 何も指定しないと元画像が読み込まれる
<img src="{{ 'logo.png' | asset_img_url }}" alt="logo">
<img src="{{ 'logo.png' | file_img_url }}" alt="logo">
画像の場合はファビコンのようにテーマエディタからアップロードする場合もあります。
この場合はテーマにあらかじめHTMLタグが用意されているので、カスタマイズ不要です。
CSSファイルから背景画像として読み込む方法
HTMLの他にCSSから背景画像を読み込みたい場合は、cssをliquid拡張子にします。liquidにすることで変数を使えるようになるのでアセットフォルダやアップロードしたファイルにアクセスすることができます。
/* assets/style.css.liquid */
body {
background-image: url('{{ 'background.png' | asset_url }}');
}
ファイルのアップロード方法
テーマに必要なファイルは管理画面メニューの下にある「設定」-> 「ファイル」からアップロードできます。
URLはアップロードしたファイル一覧ページから取得できます。
