前作Shopify Liquid言語 CSS上でLiquidを使う方法の続き？
というか、画像を読み込むときのフィルタ、asset_urlフィルタについて

imgタグ→asset_url

画像をassets/から読み込む。
読み込む画像ファイルはassets直下にないといけない。フォルダとかもつくっちゃだめ！！
assetsフォルダの中が大変なことになってるけど仕方ないらしい！

<img src= "url" alt="">

<img src="{{ "url" | asset_url }}" alt="">

|asset_url はliquidのurlフィルターの一つ。フィルターによって出力結果を変えることができる。

asset_url
Returns the URL of a file in the "assets" folder of a theme.

(Google翻訳)テーマの「assets」フォルダー内のファイルのURLを返します。
Shopify公式- filters/url-filters

ちなみに

urlフィルターの機能は他にも似たようなのがたくさんある。global_asset_url、file_url、img_urlとか。下のlink_toもurlフィルターの一種。
特に、上記のコードは画像のurlがほしかったので、「asset_urlとasset_img_urlとどっち使うんだ？」と悩んだ。ので、
それについて少しだけメモ。

`asset_img_url`

Returns the asset URL of an image in the "assets" folder of a theme.
accepts an image size parameter .

こっちはassetsフォルダ内の画像ファイルのurlを返す。
あと、画像のサイズのパラメータを受け取ることができる。
（今回は、画像のサイズは別で指定していたので、問題なさそうなのでasset_urlにした。ホントはだめかも）

逆に画像ではない場所で、asset_img_urlを使ったらどうなるか？

assetsフォルダ内の、元々はasset_urlフィルタで呼んでいたcssに対して試してみた。
すると、見事にcssが崩れ、ソースを表示すると<link href...>の形をとっていなかったので、
画像じゃないとこにasset_img_urlを使うのはだめ！学んだ

link_to

aタグ的な役割だけど、、、
クラスつけたりとかHTMLを構えないらしい。外側にタグつけてそこにスタイルを適用して対応した。

<a href="リンク先url">text</a>
              ↓
{{ 'text' | link_to:"リンク先url"}}