Shopifyの商品タグを大文字・小文字を問わず判定する方法

2025.02.02

はじめに

Shopifyの商品ページでは、特定のタグがついている商品に対してラベルを表示することができます。しかし、デフォルトの contains を使った判定では 大文字・小文字が区別される ため、意図した通りにラベルが表示されないことがあります。

今回は、ShopifyのLiquidテンプレートで タグの大文字・小文字を問わず判定する方法 を紹介します。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。

これまでのコードと問題点

従来のコードでは、商品タグに基づいて NEW や LIMITED などのラベルを表示していました。

{% if context_item.tags contains 'new' %}
  <span>NEW</span>
{% endif %}

{% if context_item.tags contains 'Limited' %}
  <span>LIMITED</span>
{% endif %}

{% if context_item.tags contains 'sale' %}
  <span>SALE</span>
{% endif %}

問題点

このコードでは contains を使ってタグを判定していますが、ShopifyのLiquidでは 大文字・小文字を区別して比較 します。そのため、

NEW → OK（contains 'new' が true）
New → NG（contains 'new' が false）
sale → OK
Sale → NG

といった問題が発生し、ラベルが正しく表示されないことがあります。

解決方法：タグを小文字に統一して判定する

この問題を解決するために、タグのリストを すべて小文字に変換 してから判定するように修正します。

修正後のコード

{% assign tags_downcase = context_item.tags | join: ',' | downcase | split: ',' %}

{% if tags_downcase contains 'new' %}
  <span>NEW</span>
{% endif %}

{% if tags_downcase contains 'limited' %}
  <span>LIMITED</span>
{% endif %}

{% if tags_downcase contains 'sale' %}
  <span>SALE</span>
{% endif %}