Shopify Liquid 実装Tips

ECサイト構築プロジェクトで得た、Shopify Liquid実装のTipsをまとめます。Liquidの独特な記法に慣れると、WordPressよりも柔軟な実装が可能です。

Tip 1: メタフィールドを積極活用する

商品情報の拡張には、Shopifyのメタフィールドが便利です。成分表、使い方、ストーリーなど、標準フィールドに収まらないデータをメタフィールドで管理することで、管理画面からの編集が容易になります。

Tip 2: カスタムセクションの設計

テーマのカスタマイズはセクションとブロックで設計しましょう。schema JSONで編集可能な項目を定義することで、コードを触らずにページレイアウトを変更できます。クライアント様が自分で運用できる仕組みが大切です。

Tip 3: パフォーマンス最適化

Shopifyサイトはデフォルトでアプリが多く読み込まれがちです。使っていないアプリのスニペットを削除し、Critical CSSをインライン化することで、Core Web Vitalsのスコアを大きく改善できます。

Tip 4: metaobjectsでコンテンツ管理

metaobjectsを使うと、ブランド情報や店舗情報などをコンテンツとして管理できます。各商品のストーリーをmetaobjectで管理し、複数ページで再利用する手法は、多くのECプロジェクトで効果を発揮しています。