theme-shopify-liquid-templates

Shopify Liquid テンプレート

Shopify テーマにおける Liquid テンプレート、スニペット、ロジックフロー、画像の扱い、SVG の使用に関するベストプラクティスです。

使用する場面

• Liquid テンプレートを作成または変更する
• スニペットを扱う
• 画像やメディアを扱う
• Liquid ロジックを記述する
• SVG アイコンを使用する

スニペット

使用方法

• {% render %} のみを使用します（include は使用しないでください）
• 各スニペットの先頭に 使用方法 ブロックを追加します

スニペットの構成

{%- comment -%}
Usage:
{% render 'snippet-name', param: value, another_param: value %}
{%- endcomment -%}

<div class="snippet-name">
  {{ param }}
</div>

スニペットのパラメーター

パラメーターを使ってスニペットにデータを渡します。

{% render 'product-card', 
  product: product, 
  show_price: true, 
  image_size: 'large' %}

include ではなく render を使用する理由

• render のほうがパフォーマンスに優れています
• 変数のスコープがより適切です
• Shopify が推奨しています

Liquid ロジック

{% liquid %} タグを使用する

長いロジックや複雑なロジックには、{% liquid %} タグを使用します。

{% liquid
  assign discount = product.compare_at_price | minus: product.price
  assign discount_percent = discount | times: 100 | divided_by: product.compare_at_price
  if discount_percent > 20
    assign is_big_discount = true
  endif
%}

ロジックのベストプラクティス

• 条件分岐を深くネストしないでください
• 読みやすく、直線的なロジックを優先します
• 必要に応じて、複雑なロジックを複数の liquid ブロックに分割します
• 意味が分かりやすい変数名を使用します

例：明快なロジックフロー

{% liquid
  if product.available
    assign button_text = 'Add to Cart'
    assign button_class = 'btn--primary'
  else
    assign button_text = 'Sold Out'
    assign button_class = 'btn--disabled'
  endif
%}

<button class="{{ button_class }}">
  {{ button_text }}
</button>

画像

常に image_tag を使用する

• 常に image_tag フィルターを使用します
• レスポンシブな srcset とサイズを使用します
• <img> タグをハードコードしないでください
• 画像の URL を生成するには <image_url> を使用します。
• <image_url> には、必ず幅または高さのパラメーターを指定してください。

画像タグの構文

{{ image | image_url: width: image.width | image_tag: widths: '360, 720, 1080', loading: 'lazy' }}

レスポンシブ画像

{% assign image_widths = '360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2160' %}

{{ product.featured_image | image_url: width: product.featured_image.width | image_tag: 
  widths: image_widths,
  sizes: '(min-width: 1200px) 50vw, 100vw',
  loading: 'lazy',
  alt: product.featured_image.alt | escape }}

画像の設定

image_tag の一般的なパラメーター：

• widths：srcset 用の幅をカンマ区切りで指定したリスト
• sizes：レスポンシブ画像用の sizes 属性
• loading：'lazy' または 'eager'
• alt：代替テキスト（| escape フィルターを使用）

SVG ファイル

インライン SVG

inline_asset_content フィルターを使用して SVG をインライン化します。

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

生の SVG を貼り付けない

• テンプレートに SVG マークアップをそのまま貼り付けないでください
• SVG ファイルは assets/ ディレクトリに保存します
• inline_asset_content フィルターを使用して SVG を読み込みます

SVG の例

<button class="icon-button">
  {{ 'icon-close.svg' | inline_asset_content }}
  <span class="visually-hidden">Close</span>
</button>

SVG のスタイル設定

SVG はインライン化すると CSS でスタイルを設定できます。

.icon-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

Shopify テーマのドキュメント

以下の Shopify 公式リソースを参照してください。

• Liquid のドキュメント
• Liquid オブジェクト
• Liquid フィルター
• Liquid タグ
• テーマテンプレート
• スニペット
• 画像フィルター

よく使う Liquid パターン

商品カードのスニペット

{%- comment -%}
Usage:
{% render 'product-card', product: product, show_vendor: false %}
{%- endcomment -%}

<div class="product-card">
  <a href="{{ product.url }}">
    {{ product.featured_image | image_tag: widths: '360, 720', loading: 'lazy' }}
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </a>
</div>

条件付きレンダリング

{% liquid
  if section.settings.show_title
    assign title_visible = true
  else
    assign title_visible = false
  endif
%}

{% if title_visible %}
  <h2>{{ section.settings.title }}</h2>
{% endif %}

指示

1. スニペットには render を使用し、include は使用しないでください
2. すべてのスニペットに 使用方法のコメントを追加してください
3. 複雑なロジックには liquid タグを使用してください
4. 常に image_tag を使用し、<img> をハードコードしないでください
5. inline_asset_content フィルターを使用して SVG をインライン化してください
6. ロジックは直線的に保ち、深いネストを避けてください
7. 適切な srcset とサイズを使用して レスポンシブ画像を使用してください