Shopifyとは？WordPressとの違いとLiquid・テーマ開発の基礎

読者

Shopifyはネットショップを作るサービスだと思いますが、具体的にはどこまでできるのでしょうか？

木村

商品、在庫、注文、決済、配送、オンラインストアの表示を一つの管理画面で扱えます。テーマを編集すれば、商品の見せ方やページ構成も調整できます。

読者

WordPressでテーマを作った経験は、Shopifyでも活かせますか？

木村

HTML、CSS、JavaScript、コンポーネントを分けて考える力は活かせます。ただし、WordPress関数をLiquid関数へ置き換える仕組みではありません。Shopifyでは、用意されたオブジェクトを参照し、タグで処理を制御し、フィルターで表示を整えます。

読者

この記事を読めば、すぐにストアを公開できるようになりますか？

木村

この記事は実装前の整理です。ここで全体像を確認したうえで、開発環境の準備、Liquid、セクション制作、プレビュー、検証を順番に実践し、その結果を今後の記事でアウトプットします。

Shopifyは販売機能をまとめて扱えるECプラットフォーム

Shopifyは、オンラインストアの表示だけでなく、商品、在庫、注文、決済、配送など、販売に必要な情報をまとめて管理できるECプラットフォームです。WordPressが記事や固定ページを中心に幅広いサイトを作れるCMSであるのに対し、Shopifyは商品を販売し、注文を処理する流れが最初から用意されている点が大きな特徴です。

オンラインストア運営に必要な機能がつながっている

商品を登録すると、商品ページ、在庫、カート、注文情報へ同じデータがつながります。決済方法や配送条件を設定し、注文後の管理まで一つの仕組みとして扱えるため、買い物かごや注文管理を一から開発する必要はありません。

WordPress経験者はテーマ開発の考え方を活かせる

WordPressテーマで、テンプレート、共通パーツ、CSS、JavaScriptを分けて制作した経験はShopifyでも役立ちます。ただし、データを表示する仕組みは同じではありません。WordPressではWordPress固有のPHP関数を使いますが、ShopifyではLiquidのオブジェクト、タグ、フィルターを組み合わせます。この対応関係から理解すると、両者の違いを整理しやすくなります。

Shopifyでできること

Shopifyでは、ストアの見た目を作る作業と、販売を運営する作業を同じサービス内で進められます。ここでは、今回の事前調査で確認した主な範囲を整理します。

商品・在庫・注文を管理する

商品名、説明、画像、価格、在庫、バリエーション、公開先などを商品データとして管理できます。注文後は、支払い状況、発送状況、購入者情報などを確認し、受注から発送までの状態を更新できます。

決済・配送・販売条件を設定する

利用する決済方法、配送地域、送料、税、割引などを設定できます。利用できる方法や条件は、ストアの国・地域、契約プラン、販売内容によって異なるため、実際の案件では管理画面と公式ヘルプで確認が必要です。

テーマ・固定ページ・ブログで情報を伝える

テーマでトップページ、商品ページ、コレクションページなどの見た目を整えられます。固定ページやブログも作成できるため、商品を並べるだけでなく、ブランドの説明、よくある質問、配送・返品案内、読み物なども掲載できます。Shopify公式ヘルプでも、オンラインストアでページやブログを作成し、商品を販売できることが案内されています。

Shopify公式ヘルプ：Online Store

ShopifyとWordPressの違い

ShopifyとWordPressは、どちらも管理画面とテーマを使ってWebサイトを構築できますが、中心となる目的と、開発者が触れられる範囲が異なります。

販売中心のShopifyとコンテンツ中心のWordPress

Shopifyは販売機能を標準で備えたホスティング型のサービスです。WordPressは記事や固定ページを柔軟に管理するCMSで、EC機能が必要な場合はWooCommerceなどのプラグインや外部サービスを組み合わせます。

テーマ開発で使う技術を比較する

PHPをLiquidへ置き換えるだけではない

理解の入口として「WordPressのPHPテンプレートに近い表示部分をLiquidが担当する」と考えるのは分かりやすい方法です。ただし、WordPress関数に対応するLiquid関数が一対一で用意されているわけではありません。LiquidではPHPのように任意のサーバー処理を書いたり、データベースへ直接アクセスしたりせず、Shopifyから渡されたデータを、オブジェクト・タグ・フィルターで表示、分岐、整形すると理解するのが正確です。

Liquidとは

LiquidはShopifyが開発したオープンソースのテンプレート言語です。Shopifyテーマでは、オープンソース版を拡張したShopify独自のLiquidが使われ、商品、コレクション、カートなどストア固有のデータを扱えます。テーマからデータベースへ直接問い合わせるのではなく、Shopifyがページに応じて用意したデータを参照し、HTMLへ出力します。

オブジェクト・タグ・フィルターを使う

Liquidでは、WordPressのようにPHP関数を呼び出すのではなく、主に次の3つを組み合わせて表示を作ります。

• オブジェクト：productやcollectionなど、Shopifyが用意するデータ
• タグ：ifやforなど、条件分岐や繰り返しを指定する処理
• フィルター：moneyやupcaseなど、出力する値を整える処理

次の例では、productが商品オブジェクト、titleとpriceがそのプロパティです。ifタグで在庫状態を判定し、moneyフィルターで価格をストアの通貨設定に合わせて整えます。

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

{% if product.available %}
  <p>{{ product.price | money }}</p>
{% else %}
  <p>売り切れです</p>
{% endif %}

Shopify公式：Liquid reference

WordPressのPHPテンプレートと比較する

WordPressでは、the_title()などWordPress固有のテンプレートタグを使い、データベースに保存された投稿情報を取得・表示します。Shopifyでは、現在の商品ページへ渡されたproductオブジェクトのtitleプロパティを参照します。どちらも管理画面のデータをHTMLへ表示しますが、呼び出し方と処理できる範囲が異なります。

<h1><?php the_title(); ?></h1>

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

この例では、WordPressは関数を実行してタイトルを出力し、Shopifyはすでにページへ渡されているオブジェクトの値を出力しています。そのため、LiquidはPHP関数の代替というより、ShopifyのデータとHTMLを安全につなぐための仕組みと捉えると分かりやすくなります。

WordPress公式：Template Tags

Reactに似て見えても別の仕組み

{{ product.title }}は、ReactやJavaScriptの式展開と見た目が似ています。しかし、LiquidはJavaScriptライブラリではありません。Shopify側でテンプレートを処理してHTMLを生成する言語であり、ブラウザー上でReactが動いているという意味ではありません。

Shopifyテーマの構造と開発方法

Shopifyテーマは、決められたディレクトリ構成の中へLiquid、JSON、CSS、JavaScript、画像などを配置します。WordPressのテンプレート階層とは名前が異なるため、各フォルダーの役割から覚える必要があります。

layout・templates・sections・snippetsの役割

• layout：ヘッダーやフッターを含むページ全体の土台
• templates：商品、コレクション、固定ページなど、ページ種類ごとの構成
• sections：テーマエディターから追加・並べ替え・設定できるまとまり
• blocks：セクション内などで再利用する小さな構成要素
• snippets：複数箇所から呼び出せるLiquidの共通パーツ
• assets：CSS、JavaScript、画像などのファイル

Shopify公式：Theme architecture

sectionsとblocksをテーマエディターへつなげる

セクションファイルでは、Liquidで表示部分を作り、{% schema %}内のJSONで管理画面に表示する設定項目を定義します。これにより、制作者がコードへ固定値を書き続けなくても、運営者が見出しや表示内容をテーマエディターから変更できます。

<section class="intro-section">
  <h2>{{ section.settings.heading }}</h2>
</section>

{% schema %}
{
  "name": "紹介セクション",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "見出し",
      "default": "ショップについて"
    }
  ],
  "presets": [
    {
      "name": "紹介セクション"
    }
  ]
}
{% endschema %}

Shopify CLIでVS Codeと開発テーマをつなぐ

Shopify CLIを使うと、VS Codeで編集するローカルファイルを開発テーマとしてストアへ接続し、ストアのデータを使ってプレビューできます。公式ドキュメントでは、shopify theme devによる開発テーマ、ホットリロード、Theme Checkなどが案内されています。

shopify theme pull --store example-store
shopify theme dev --store example-store
shopify theme check
shopify theme push --unpublished

最初から公開テーマを直接編集せず、開発テーマまたは複製した未公開テーマで確認します。コマンドのオプションや必要な権限は環境によって異なるため、実行前に公式手順を確認します。

Shopify公式：Shopify CLI for themes

実装前に確認した内容

ここまでの内容は、WordPressでの制作経験とShopify公式ドキュメントを照らし合わせ、テーマ開発へ進む前に整理したものです。確認済みのことと、今後実際に試すことを分けておきます。

WordPressから活かせる知識

• HTMLで意味のある文書構造を作る
• CSS・SCSSでレスポンシブな見た目を整える
• JavaScriptでUIの操作を追加する
• 共通パーツとページ固有パーツを分ける
• 変更前のバックアップ、差分管理、検証を行う

Shopifyで新しく学ぶ内容

• Liquidのオブジェクト、タグ、フィルター
• 商品、コレクション、カートなどのデータ構造
• layout、templates、sections、blocks、snippetsの役割
• schemaとテーマエディターの連携
• Shopify CLI、Theme Check、開発テーマの扱い

まだ実装で確認していない内容

現時点では、実案件のストアへテーマを反映する作業、商品データを使った独自セクション制作、アプリとの競合、公開テーマへの反映手順までは検証していません。この記事では未確認の内容を成功済みとして書かず、実際に試した後で手順と結果を追記・別記事化します。

今後アウトプットする実装内容

今後は、調査した内容を小さな実装単位へ分け、作業前の目的、使用したコード、確認結果、つまずいた点をセットで記事にします。

Shopify CLIと開発テーマを準備する

最初に、Shopify CLIの導入、ストアへの接続、テーマの取得、開発テーマのプレビューまでを確認します。接続先、使用テーマ、変更対象を記録し、公開テーマへ直接影響しない状態を作ります。

Liquidで商品データを表示する

商品名、価格、画像、在庫状態などをLiquidで表示し、ページへ渡されるオブジェクトとプロパティの対応を確認します。さらに、ifやforなどのタグ、moneyなどのフィルターを試し、WordPressのテンプレートタグと何が異なるのかをコード付きで整理します。

sectionsとschemaで編集可能な部品を作る

見出し、画像、商品選択などをテーマエディターから変更できるセクションを作成します。表示だけでなく、設定の初期値、項目名、未入力時の挙動、スマートフォン表示まで確認します。

Theme Checkとプレビューで検証する

実装後はTheme Checkを実行し、エラーやLiquidの推奨事項を確認します。商品がある場合・ない場合、売り切れ、長い商品名、画像未登録など複数の状態を試し、結果をスクリーンショットとともに記録します。