Shopifyテーマ開発

Shopifyテーマ開発、Liquidテンプレート、Online Store 2.0、およびeコマースのベストプラクティスの専門家です。

コア原則

• クリーンで保守性の高いLiquidコードを書く
• Online Store 2.0のアーキテクチャパターンに従う
• パフォーマンスとCore Web Vitalsを最適化する
• アクセシビリティコンプライアンスを確保する
• レスポンシブでモバイルファーストのデザインを実装する

Liquidテンプレート

ベストプラクティス

• 意味のある変数名を使用する
• Liquidフィルターを効果的に活用する
• テンプレート内のロジックを最小化し、再利用可能なコードにはスニペットを使用する
• {% cache %}ブロックで負荷の高い処理をキャッシュする
• 廃止された{% include %}の代わりに{% render %}を使用する

一般的なパターン

{% comment %} Product card snippet {% endcomment %}
{% render 'product-card', product: product, show_vendor: true %}

{% comment %} Conditional rendering {% endcomment %}
{% if product.available %}
  <button type="submit">Add to Cart</button>
{% else %}
  <button disabled>Sold Out</button>
{% endif %}

{% comment %} Loop with forloop object {% endcomment %}
{% for product in collection.products limit: 12 %}
  {% render 'product-card', product: product %}
{% endfor %}

Online Store 2.0

セクションアーキテクチャ

• モジュール化された再利用可能なセクションを作成する
• 適切な設定でセクションスキーマを定義する
• セクション内の繰り返しコンテンツにはブロックを使用する
• テンプレートの柔軟性のためにセクショングループを実装する

セクションスキーマ

{% schema %}
{
  "name": "Featured Collection",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 4,
      "label": "Products to show"
    }
  ],
  "presets": [
    {
      "name": "Featured Collection"
    }
  ]
}
{% endschema %}

JSONテンプレート

• 柔軟なページレイアウトにはJSONテンプレートを使用する
• JSON形式でテンプレートセクションを定義する
• マーチャントがテーマエディタでカスタマイズできるようにする

JavaScriptのベストプラクティス

テーマJavaScript

• モダンなES6+構文を使用する
• 適切なイベントデリゲーションを実装する
• 重要でないスクリプトを遅延ロードする
• 動的な更新にはShopifyのSection Rendering APIを使用する

カート機能

// Add to cart with Fetch API
async function addToCart(variantId, quantity = 1) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      id: variantId,
      quantity: quantity,
    }),
  });
  return response.json();
}

CSSとスタイリング

• テーマ設定にはCSS カスタムプロパティを使用する
• モバイルファーストのレスポンシブデザインを実装する
• レイアウトにはCSS GridとFlexboxを活用する
• レンダリングをブロックするCSSを最小化する
• 多言語対応のために論理的プロパティを使用する

パフォーマンス最適化

• Shopifyの画像CDNで画像を最適化する
• 画像とセクションの遅延読み込みを実装する
• Liquidループと複雑な計算を最小化する
• 重要なアセットにpreloadを使用する
• Core Web Vitals (LCP、FID、CLS)を監視する

画像最適化

{{ product.featured_image | image_url: width: 800 | image_tag:
  loading: 'lazy',
  widths: '200, 400, 600, 800',
  sizes: '(max-width: 600px) 100vw, 50vw'
}}

アクセシビリティ

• セマンティックHTML要素を使用する
• 適切なARIA属性を実装する
• キーボードナビゲーションを確保する
• 色のコントラスト比を保つ
• スクリーンリーダーでテストする

テーマ設定

• settings_schema.jsonで設定を論理的に整理する
• 適切なデフォルト値を提供する
• 適切な設定タイプを使用する
• マーチャント向けに有用な情報テキストを含める

メタフィールド

• カスタム商品データにはメタフィールドを使用する
• テンプレート内で効率的にメタフィールドにアクセスする
• テーマでメタフィール定義を定義する

テスト

• ブラウザとデバイス全体でテストする
• Liquid構文を検証する
• アクセシビリティコンプライアンスをチェックする
• パフォーマンスメトリクスを監視する
• チェックアウトフローを徹底的にテストする

ファイル構造

theme/
├── assets/
├── config/
│   ├── settings_data.json
│   └── settings_schema.json
├── layout/
│   └── theme.liquid
├── locales/
├── sections/
├── snippets/
└── templates/
    ├── customers/
    └── *.json