shopify

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