Shopify

Shopifyテーマの基礎：Liquidテンプレート言語を学ぼう

Shopifyは世界中で利用されている人気のECプラットフォームであり、魅力的で機能的なオンラインストアを構築するための柔軟なテーマシステムを提供しています。その中心にあるのが、Shopifyのテンプレート言語であるLiquidです。この記事では、Liquidの基礎を学び、Shopifyテーマをカスタマイズするための第一歩を踏み出しましょう。

Liquidとは？

Liquidは、Shopifyテーマを構築・カスタマイズするためのテンプレート言語です。Rubyベースで開発され、静的なHTMLを動的に生成するための仕組みを提供します。Liquidを使用すると、商品の詳細、カート情報、顧客データなどを簡単に表示できます。

Liquidの特徴:

  • Shopifyに最適化されたテンプレート言語
  • HTMLに埋め込む形で使用
  • 読みやすく、学びやすい構文
  • 柔軟性が高く、さまざまなカスタマイズが可能

Liquidの基本構文

Liquidには以下の3つの主要な構文があります。

1. 出力タグ: {{ ... }}

データや変数を表示するために使用します。

<p>{{ product.title }}</p>

上記の例では、商品のタイトルが表示されます。

2. フィルター: {{ ... | filter }}

データを変換したりフォーマットするために使用します。

<p>{{ product.price | money }}</p>

ここでは、商品の価格を通貨形式で表示します。

3. 制御構造: {% ... %}

条件分岐やループ処理を記述するために使用します。

条件分岐の例:

{% if product.available %}
  <p>この商品は在庫があります。</p>
{% else %}
  <p>在庫切れです。</p>
{% endif %}

ループ処理の例:

<ul>
  {% for product in collection.products %}
    <li>{{ product.title }}</li>
  {% endfor %}
</ul>

この例では、コレクション内のすべての商品タイトルをリスト表示します。

Liquidでよく使うオブジェクト

Shopifyには、Liquidで扱える多くのオブジェクトが用意されています。その中でもよく使われるものを紹介します。

  • product: 商品情報（例: product.title, product.price）
  • collection: コレクション情報（例: collection.title, collection.products）
  • cart: カート情報（例: cart.items, cart.total_price）
  • customer: ログイン中の顧客情報（例: customer.email, customer.orders_count）

Liquidを使ったShopifyテーマカスタマイズ例

商品ページに「おすすめ商品」を表示する

以下のコードは、現在の商品ページに関連商品を表示する簡単な例です。

<h2>おすすめ商品</h2>
<ul>
  {% for product in collection.products limit: 4 %}
    {% unless product.id == current_product.id %}
      <li>
        <a href="{{ product.url }}">{{ product.title }}</a>
        <p>{{ product.price | money }}</p>
      </li>
    {% endunless %}
  {% endfor %}
</ul>

SEOにおけるLiquidの活用ポイント

Shopifyテーマを構築する際、Liquidを活用してSEOを最適化することも可能です。以下はそのポイントです。

動的なメタデータの生成

Liquidを使えば、商品やブログ記事に応じたメタデータを自動生成できます。

<title>{{ product.title }} | {{ shop.name }}</title>
<meta name="description" content="{{ product.description | strip_html | truncate: 150 }}">

構造化データの組み込み

JSON-LDを利用して構造化データを動的に挿入することも簡単です。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{ product.title }}",
  "image": "{{ product.featured_image | img_url: 'large' }}",
  "description": "{{ product.description | strip_html | truncate: 150 }}",
  "offers": {
    "@type": "Offer",
    "price": "{{ product.price | divided_by: 100 }}",
    "priceCurrency": "{{ shop.currency }}"
  }
}
</script>

まとめ

LiquidはShopifyテーマのカスタマイズにおいて不可欠なツールです。その基本を理解することで、独自のデザインや機能を実現できるようになります。この記事を参考にして、まずは小さなカスタマイズから始めてみましょう。

次のステップ:
Liquidを実際に試してみるために、Shopifyの開発環境をセットアップし、簡単なカスタマイズを行ってみましょう！

-Shopify
-,