コンテンツにスキップ

カスタム Liquid

カスタム Liquid、アプリのスニペット、または動的コンテンツをレイアウトの任意の場所に配置します。

このセクションを使用して、アプリのスニペット、メタフィールドコンテンツ、またはその他の動的なストアフロントの詳細をページレイアウト内に直接配置します。どこに何を表示するかを細かく制御したい高度なカスタマイズに最適です。

カスタム Liquid フィールドは、このセクションの中心です。アプリ提供のスニペットを貼り付けたり、商品詳細、コレクションコンテンツ、メタフィールド、その他の動的要素用に独自の Liquid 出力を追加したりするために使用します。

設定はシンプルに保ち、少しずつテストしてください。短く動作するスニペットのほうが、大きなコードとコンテンツの混在ブロックよりもはるかにトラブルシュートしやすくなります。テーマ内でセクションがどのように機能するかの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。

このセクションは、追加した内容をそのまま表示します。Liquid が不完全である場合、現在のテンプレートでサポートされていない場合、または貼り付けが正しくない場合、セクションは空白で表示されたり、予期しない動作をしたりすることがあります。

アプリのコードを追加する場合は、変更に自信がない限り、そのまま貼り付けてください。独自の出力を記述する場合は、利用可能なデータはテンプレートによって異なるため、コンテンツがセクションを使用するページに合っていることを確認してください。

表示設定では、このセクションをデスクトップ、モバイル、またはその両方に表示するかを制御します。これは、画面サイズごとに異なるカスタム Liquid コンテンツや書式を使いたい場合に特に便利です。

デバイスベースの表示は意図して使用してください。セクションに重要なコンテンツが含まれている場合、片方のデバイスで非表示にすると、その顧客体験からその情報が完全に失われることがあります。

  1. シンプルなスニペットから始めます。 より複雑なロジックやマークアップを追加する前に、セクションが正しい場所に表示されることを確認してください。
  2. テンプレートのコンテキストに合わせます。 ページタイプに合ったコンテンツを使用してください。必要なデータが利用できるときだけ動作する動的出力もあります。
  3. アプリのスニペットはそのまま保持します。 変更が結果にどう影響するかを完全に理解していない限り、アプリ提供のコードはそのまま貼り付けてください。
  4. 目的を持って表示設定を使います。 デスクトップやモバイルでセクションを非表示にするのは、デバイスごとに異なるレイアウトを意図的に作成する場合のみです。
  5. 両方のビューポートを確認します。 配置、余白、表示、またはメディアの動作は画面サイズによって異なる場合があるため、セクションをデスクトップとモバイルの両方で確認してください。
  6. フォールバックのスタイルを想定します。 空、透明、またはデフォルトスタイルの値は通常、周囲のスタイルを維持します。一方で、明示的な色、グラデーション、またはメディアの上書きによって、セクションはより独立して見えるようになります。