Shopify Liquid 画像・HTMLフィルター｜image_url・image_tag・asset_url

画像の CDN URL（配信用のURL）を、サイズを指定して作ります。

書き方

{{ 画像 | image_url: width: 幅 }}

現在の画像URLの作り方の標準です。width / height / crop などを指定できます。旧来の img_url の置き換え先です。

例

{{ product.featured_image | image_url: width: 600 }}

出力

//store-dojo.com/cdn/shop/files/tee.jpg?width=600

公式ドキュメント　｜　関連TIPS：Shopifyで画像用フィルタ「img_url」のサイズ指定に変数を使う方法　｜　目次へ戻る ↑

image_url で作った URL から <img> タグを作ります。

書き方

{{ 画像URL | image_tag }}

width・height・srcset（画面幅に応じた画像の候補）・遅延読み込みを自動で付けてくれます。alt や class も指定できます。

例

{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', alt: product.title }}

出力

<img src="..." srcset="..." width="800" height="800" loading="lazy" alt="...">

公式ドキュメント　｜　目次へ戻る ↑

画像の URL を作る古いフィルターです。

書き方

{{ 画像 | img_url: '600x' }}

非推奨です。image_url に置き換えます（例: img_url: '600x' → image_url: width: 600）。

非推奨　代わりに：image_url

例

{% # 旧: product.featured_image | img_url: '600x' %}
{{ product.featured_image | image_url: width: 600 }}

公式ドキュメント　｜　関連TIPS：Shopifyで画像用フィルタ「img_url」のサイズ指定に変数を使う方法　｜　目次へ戻る ↑

<img> タグを作る古いフィルターです。

書き方

{{ 画像 | img_tag }}

非推奨です。image_url と image_tag の組み合わせに置き換えます。

非推奨　代わりに：image_tag

例

{{ product.featured_image | image_url: width: 400 | image_tag }}

公式ドキュメント　｜　目次へ戻る ↑

商品画像の URL を作る古いフィルターです。

書き方

{{ 画像 | product_img_url }}

非推奨です。image_url に置き換えます。

非推奨　代わりに：image_url

例

{{ product.featured_image | image_url: width: 400 }}

公式ドキュメント　｜　目次へ戻る ↑

コレクション画像の URL を作る古いフィルターです。

書き方

{{ 画像 | collection_img_url }}

非推奨です。image_url に置き換えます。

非推奨　代わりに：image_url

例

{{ collection.image | image_url: width: 800 }}

公式ドキュメント　｜　目次へ戻る ↑

ブログ記事画像の URL を作る古いフィルターです。

書き方

{{ 画像 | article_img_url }}

非推奨です。image_url に置き換えます。

非推奨　代わりに：image_url

例

{{ article.image | image_url: width: 800 }}

公式ドキュメント　｜　目次へ戻る ↑

画像・動画・3Dモデルなど、メディアの種類に合ったタグを自動で出力します。

書き方

{{ メディア | media_tag }}

product.media をまとめて表示するときに便利です。

例

{% for media in product.media %}{{ media | media_tag }}{% endfor %}

公式ドキュメント　｜　目次へ戻る ↑

Shopify にアップロードした動画を <video> タグで出力します。

書き方

{{ 動画 | video_tag }}

autoplay・loop・muted などを指定できます。

例

{{ section.settings.video | video_tag: autoplay: true, loop: true, muted: true }}

公式ドキュメント　｜　目次へ戻る ↑

YouTube や Vimeo の動画を埋め込む <iframe> を出力します。

書き方

{{ 外部動画 | external_video_tag }}

例

{{ media | external_video_url: autoplay: true | external_video_tag }}

公式ドキュメント　｜　目次へ戻る ↑

YouTube・Vimeo 動画の URL に再生設定を付けます。

書き方

{{ 外部動画 | external_video_url: 設定 }}

external_video_tag の前に付けて使います。

例

{{ media | external_video_url: controls: 0 }}

公式ドキュメント　｜　目次へ戻る ↑

3D モデルを表示する <model-viewer> タグを出力します。

書き方

{{ 3Dモデル | model_viewer_tag }}

例

{{ media | model_viewer_tag }}

公式ドキュメント　｜　目次へ戻る ↑

指定した URL へのリンク（<a> タグ）を作ります。

書き方

{{ 文字 | link_to: URL }}

class などの属性も追加できます。

例

{{ '会員登録' | link_to: routes.account_register_url, class: 'btn' }}

出力

<a href="/account/register" class="btn">会員登録</a>

公式ドキュメント　｜　目次へ戻る ↑

JavaScript ファイルを読み込む <script> タグを作ります。

書き方

{{ URL | script_tag }}

読み込みを遅らせる defer などは付かないため、表示速度を重視する場合は <script src defer> を自分で書く方法もあります。

例

{{ 'cart.js' | asset_url | script_tag }}
{% # 表示速度を優先する場合: <script src="{{ 'cart.js' | asset_url }}" defer></script> %}

出力

<script src="//store-dojo.com/cdn/.../cart.js" type="text/javascript"></script>

公式ドキュメント　｜　目次へ戻る ↑

CSS ファイルを読み込む <link> タグを作ります。

書き方

{{ URL | stylesheet_tag }}

例

{{ 'base.css' | asset_url | stylesheet_tag }}

公式ドキュメント　｜　目次へ戻る ↑

ファイルを先に読み込ませる preload 指定付きのタグを作ります。

書き方

{{ URL | preload_tag: as: '種類' }}

最初に必要な CSS などに使うと表示が速くなることがあります。使いすぎは逆効果です。

例

{{ 'base.css' | asset_url | preload_tag: as: 'style' }}

公式ドキュメント　｜　目次へ戻る ↑

日時を <time> タグ付きで出力します。

書き方

{{ 日時 | time_tag: '書式' }}

datetime 属性が自動で付くため、検索エンジンにも日付が伝わりやすくなります。

例

{{ article.published_at | time_tag: '%Y.%m.%d' }}

出力

<time datetime="2026-10-02T00:00:00Z">2026.10.02</time>

公式ドキュメント　｜　目次へ戻る ↑

仮の画像（プレースホルダー）を SVG で出力します。

書き方

{{ '種類' | placeholder_svg_tag }}

画像が未設定のときのダミー表示に使います。'product-1' や 'collection-1' などの種類があります。

例

{% if block.settings.image == blank %}{{ 'image' | placeholder_svg_tag: 'placeholder' }}{% endif %}

公式ドキュメント　｜　関連TIPS：Shopifyでブランク画像を生成してくれるplaceholder_svg_tagフィルターが便利　｜　目次へ戻る ↑

文字列の中の指定した語を <strong class="highlight"> で囲みます。

書き方

{{ 文字列 | highlight: 語 }}

検索結果ページで検索語を目立たせるときに使います。

例

{{ item.title | highlight: search.terms }}

公式ドキュメント　｜　目次へ戻る ↑

assets フォルダの SVG・CSS・JS ファイルの中身を、そのままページに埋め込みます。

書き方

{{ 'ファイル名' | inline_asset_content }}

アイコンの SVG を img ではなくインラインで出したいときに便利です。

例

{{ 'icon-cart.svg' | inline_asset_content }}

出力

<svg ...>...</svg>

公式ドキュメント　｜　目次へ戻る ↑

テーマの assets フォルダにあるファイルの URL を返します。

書き方

{{ 'ファイル名' | asset_url }}

CSS・JS・画像の読み込みに使う基本のフィルターです。

例

{{ 'logo.svg' | asset_url }}

出力

//store-dojo.com/cdn/shop/t/1/assets/logo.svg?v=123

公式ドキュメント　｜　目次へ戻る ↑

assets フォルダの画像の URL をサイズ指定付きで返します。

書き方

{{ 'ファイル名' | asset_img_url: 'サイズ' }}

例

{{ 'banner.jpg' | asset_img_url: '800x' }}

公式ドキュメント　｜　目次へ戻る ↑

管理画面の「ファイル」にアップロードしたファイルの URL を返します。

書き方

{{ 'ファイル名' | file_url }}

PDF などを配布するリンクに使います。

例

<a href="{{ 'catalog.pdf' | file_url }}">カタログ</a>

公式ドキュメント　｜　目次へ戻る ↑

「ファイル」にアップロードした画像の URL をサイズ指定付きで返します。

書き方

{{ 'ファイル名' | file_img_url: 'サイズ' }}

例

{{ 'campaign.jpg' | file_img_url: '1200x' }}

公式ドキュメント　｜　目次へ戻る ↑

Shopify が全ストア共通で用意しているファイルの URL を返します。

書き方

{{ 'ファイル名' | global_asset_url }}

例

<script src="{{ 'lightbox.js' | global_asset_url }}" defer></script>

公式ドキュメント　｜　目次へ戻る ↑

Shopify が用意している一部の共通ファイルの URL を返します。

書き方

{{ 'ファイル名' | shopify_asset_url }}

使えるファイル名は決まっています（option_selection.js など）。

例

{{ 'option_selection.js' | shopify_asset_url }}

公式ドキュメント　｜　目次へ戻る ↑