Shopifyで外部ファイルを読み込む方法

株式会社Kirabaの堀口です。
今回は、Shopifyのテーマで外部ファイルを読み込む方法をご紹介します。
Shopifyでは読み込む外部ファイルはテーマフォルダ内の「assets」フォルダ直下にアップロードしておく必要があります。
画像ファイルやスタイルシートを同じフォルダで管理しないといけないのでちょっと管理しにくいですね。

直下にアップロードした上でテーマ内で以下のLiquidタグを記述すると読み込めます。

スタイルシートの場合

{{ 'スタイルシートのファイル名.css' | asset_url | stylesheet_tag }}

画像の場合

{{ '画像のファイル名.png' | asset_url | img_tag }}

JavaScriptの場合

{{ 'JavaScriptのファイル名.js' | asset_url | script_tag }}

参考サイト

Liquid とは？ テンプレートタグの使い方。Shopifyのカスタマイズ。