Shopify Liquid その他フィルター｜色・フォント・翻訳・タグリンク・決済

色を rgb() 形式に変換します。

書き方

{{ 色 | color_to_rgb }}

非推奨の hex_to_rgba の置き換え先です。

例

{{ '#7ab55c' | color_to_rgb }}

出力

rgb(122, 181, 92)

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

色を hsl() 形式に変換します。

書き方

{{ 色 | color_to_hsl }}

例

{{ '#7ab55c' | color_to_hsl }}

出力

hsl(100, 38%, 54%)

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

色を #rrggbb 形式に変換します。

書き方

{{ 色 | color_to_hex }}

例

{{ 'rgb(122, 181, 92)' | color_to_hex }}

出力

#7ab55c

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

色を oklch() 形式（人の見え方に近い色の表し方）に変換します。

書き方

{{ 色 | color_to_oklch }}

例

{{ '#7ab55c' | color_to_oklch }}

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

色から赤・緑・青・明るさなど1つの成分を取り出します。

書き方

{{ 色 | color_extract: '成分' }}

例

{{ '#7ab55c' | color_extract: 'red' }}

出力

122

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

色の明るさ（0〜255）を返します。

書き方

{{ 色 | color_brightness }}

背景色に応じて文字色を白・黒に切り替える判定に使えます。

例

{% assign b = section.settings.bg | color_brightness %}{% if b > 150 %}dark-text{% endif %}

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

2色のコントラスト比を返します。

書き方

{{ 色 | color_contrast: 別の色 }}

読みやすさの目安（4.5以上など）の確認に使えます。

例

{{ '#ffffff' | color_contrast: '#333333' }}

出力

12.6

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

2色の色の差を数値で返します。

書き方

{{ 色 | color_difference: 別の色 }}

例

{{ '#720955' | color_difference: '#FFF3F9' }}

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

2色の明るさの差を返します。

書き方

{{ 色 | brightness_difference: 別の色 }}

例

{{ '#fff' | brightness_difference: '#000' }}

出力

255

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

色を指定した割合だけ明るくします。

書き方

{{ 色 | color_lighten: 割合 }}

例

{{ '#7ab55c' | color_lighten: 20 }}

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

色を指定した割合だけ暗くします。

書き方

{{ 色 | color_darken: 割合 }}

ボタンのホバー時の色を作るときに使えます。

例

{{ '#7ab55c' | color_darken: 15 }}

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

色の鮮やかさを上げます。

書き方

{{ 色 | color_saturate: 割合 }}

例

{{ '#7ab55c' | color_saturate: 30 }}

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

色の鮮やかさを下げます。

書き方

{{ 色 | color_desaturate: 割合 }}

例

{{ '#7ab55c' | color_desaturate: 30 }}

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

2色を指定した割合で混ぜます。

書き方

{{ 色 | color_mix: 別の色, 割合 }}

例

{{ '#7ab55c' | color_mix: '#ffffff', 50 }}

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

色の特定の成分（透明度など）を書き換えます。

書き方

{{ 色 | color_modify: '成分', 値 }}

背景色を半透明にしたいときは 'alpha' を指定します。

例

{{ '#7ab55c' | color_modify: 'alpha', 0.5 }}

出力

rgba(122, 181, 92, 0.5)

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

16進カラーを rgba() に変換する古いフィルターです。

書き方

{{ '#色' | hex_to_rgba }}

非推奨です。color_to_rgb や color_modify に置き換えます。

非推奨　代わりに：color_to_rgb、color_modify

例

{{ '#7ab55c' | color_modify: 'alpha', 0.5 }}

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

テーマ設定で選んだフォントを読み込む @font-face の CSS を出力します。

書き方

{{ フォント | font_face }}

font_display: 'swap' を付けると、読み込み中も文字が表示されます。

例

{% style %}{{ settings.type_body_font | font_face: font_display: 'swap' }}{% endstyle %}

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

同じフォントの太字や斜体など、別のスタイルを取り出します。

書き方

{{ フォント | font_modify: '項目', 値 }}

存在しないスタイルを指定すると nil になるため、確認してから使います。

例

{% assign bold = settings.type_body_font | font_modify: 'weight', 'bold' %}

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

フォントファイルの URL を返します。

書き方

{{ フォント | font_url }}

例

{{ settings.type_header_font | font_url }}

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

言語ファイル（locales）から、表示中の言語の文言を取り出します。

書き方

{{ 'キー' | t }}

正式名は translate で、t はその短縮形です。{{ 'キー' | t: name: 値 }} のように変数を差し込めます。

例

{{ 'products.product.add_to_cart' | t }}

出力

カートに追加

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

住所を、その国の書き方の順番で HTML として出力します。

書き方

{{ 住所 | format_address }}

例

{{ customer.default_address | format_address }}

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

通貨を選ぶプルダウンを出力する古いフィルターです。

書き方

{{ shop | currency_selector }}

非推奨です。form タグの 'localization' フォームで通貨・国の切り替えを作ります。

非推奨　代わりに：form。{% form 'localization' %} で国・通貨を選ぶフォームを作る（直接の代わりのフィルターは無し）

例

{% form 'localization' %}...{% endform %}

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

ログインページへのリンクを作ります。

書き方

{{ '文字' | customer_login_link }}

例

{{ 'ログイン' | customer_login_link }}

出力

<a href="/account/login" id="customer_login_link">ログイン</a>

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

ログアウトのリンクを作ります。

書き方

{{ '文字' | customer_logout_link }}

例

{{ 'ログアウト' | customer_logout_link }}

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

会員登録ページへのリンクを作ります。

書き方

{{ '文字' | customer_register_link }}

例

{{ '新規会員登録' | customer_register_link }}

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

ログイン中の顧客のアバター（プロフィール画像）を表示する HTML を出力します。

書き方

{{ customer | avatar }}

例

{% if customer %}{{ customer | avatar }}{% endif %}

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

Shop アカウントでのログイン、または Shop アプリでのフォローのボタンを出力します。

書き方

{{ shop | login_button }}

action: 'follow' を指定するとフォローボタンになります。

例

{{ shop | login_button: action: 'follow' }}

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

コレクションの URL に並び順の指定を付けます。

書き方

{{ collection.url | sort_by: '並び順' }}

'price-ascending'（安い順）や 'created-descending'（新しい順）などを指定します。

例

<a href="{{ collection.url | sort_by: 'price-ascending' }}">安い順</a>

出力

<a href="/collections/all?sort_by=price-ascending">安い順</a>

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

コレクション内の商品としての URL を作ります。

書き方

{{ product.url | within: collection }}

パンくずにコレクションを出せる反面、同じ商品に複数URLができるため、canonical（正規URL）の設定がされているか確認します。

例

<a href="{{ product.url | within: collection }}">{{ product.title }}</a>

出力

<a href="/collections/tops/products/organic-tee">...</a>

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

商品タイプの一覧ページの URL を返します。

書き方

{{ '商品タイプ' | url_for_type }}

例

{{ product.type | url_for_type }}

出力

/collections/types?q=Tシャツ

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

販売元（ベンダー）の一覧ページの URL を返します。

書き方

{{ 'ベンダー' | url_for_vendor }}

例

{{ product.vendor | url_for_vendor }}

出力

/collections/vendors?q=STORE%20DOJO

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

商品タイプの一覧ページへのリンクを作ります。

書き方

{{ '商品タイプ' | link_to_type }}

例

{{ product.type | link_to_type }}

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

販売元の一覧ページへのリンクを作ります。

書き方

{{ 'ベンダー' | link_to_vendor }}

例

{{ product.vendor | link_to_vendor }}

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

選択中のタグを <span class="active"> で囲みます。

書き方

{{ タグ | highlight_active_tag }}

タグ絞り込みのメニューで、選んでいるタグを目立たせるときに使います。

例

{% for tag in collection.all_tags %}{{ tag | highlight_active_tag | link_to_tag: tag }}{% endfor %}

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

そのタグだけで絞り込んだ一覧へのリンクを作ります。

書き方

{{ タグ | link_to_tag: タグ }}

コレクションやブログのページで使います。

例

{{ '春夏' | link_to_tag: '春夏' }}

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

今の絞り込みにタグを追加したリンクを作ります。

書き方

{{ タグ | link_to_add_tag: タグ }}

複数タグで絞り込む（AND条件）メニューに使います。

例

{{ tag | link_to_add_tag: tag }}

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

今の絞り込みからタグを外したリンクを作ります。

書き方

{{ タグ | link_to_remove_tag: タグ }}

例

{{ tag | link_to_remove_tag: tag }}

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

カートに入っている、特定バリアントの数量を返します。

書き方

{{ cart | item_count_for_variant: バリアントID }}

「カートに〇点入っています」の表示や、購入数制限の案内に使えます。

例

{{ cart | item_count_for_variant: product.selected_or_first_available_variant.id }}

出力

2

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

カートの明細から、指定した商品・バリアントの行だけを取り出します。

書き方

{{ cart | line_items_for: 商品またはバリアント }}

例

{% assign lines = cart | line_items_for: product %}{{ lines.size }}

出力

1

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

メタフィールドの型に合った HTML を出力します。

書き方

{{ メタフィールド | metafield_tag }}

リッチテキスト型などは .value をそのまま出しても表示できないため、このフィルターを使います。

例

{{ product.metafields.custom.spec | metafield_tag }}

公式ドキュメント　｜　関連TIPS：Shopifyのメタフィールドのタイプ「リッチテキスト」をストアフロントで表示する方法　｜　目次へ戻る ↑

メタフィールドの値を、HTML なしの文字だけで出力します。

書き方

{{ メタフィールド | metafield_text }}

meta タグや alt 属性など、文字だけが必要な場所で使います。

例

{{ product.metafields.custom.spec | metafield_text }}

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

商品フォームの中に、Shop Pay などの購入ボタン（動的チェックアウトボタン）を出力します。

書き方

{{ form | payment_button }}

form 'product' の中で使います。

例

{% form 'product', product %}{{ form | payment_button }}{% endform %}

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

Shop Pay の分割払い案内のバナーを出力します。

書き方

{{ form | payment_terms }}

商品フォームまたはカートフォームの中で使います。

例

{% form 'product', product %}{{ form | payment_terms }}{% endform %}

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

決済方法のロゴ画像の URL を返します。

書き方

{{ 決済種類 | payment_type_img_url }}

例

{% for type in shop.enabled_payment_types %}<img src="{{ type | payment_type_img_url }}">{% endfor %}

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

決済方法のロゴを SVG で出力します。

書き方

{{ 決済種類 | payment_type_svg_tag }}

フッターの決済アイコン一覧によく使われます。

例

{% for type in shop.enabled_payment_types %}{{ type | payment_type_svg_tag: class: 'icon' }}{% endfor %}

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