Shopify デベロッパー & 運用効率化ツール

Shopify Metafield & Liquidコード自動生成ビルダー

商品ページやコレクションに自由なカスタム項目を追加するためのMetafieldスキーマ設定値と、テーマにそのまま貼り付けて使えるLiquid・CSSコードをワンクリックで生成します。

Metafield 実装のベストプラクティス (TL;DR)

Shopify Online Store 2.0 / 2026年仕様準拠

アプリを追加せずにテーマ標準のMetafieldを活用することで、月額アプリ費用を削減しPageSpeedを維持。

Online Store 2.0の動的ソース（Dynamic Source）と接続することで、ノーコードでテーマカスタマイザーから編集可能。

空値チェック（`{% if ... != blank %}`）を必ず入れることで、未入力商品のレイアウト崩れを完全に防止。

📋 主要スペック & 決定ファクトシート

対応データ型: Text / JSON / File / Video
アプリ追加: 不要 (月額0円)
速度影響: 0% (ネイティブ動作)

作成したいカスタム項目（Metafield）を選択

プリセットを選ぶだけで、Shopify管理画面の設定値とコピペで使えるLiquid/CSSコードを生成します。

商品詳細 (Product)

スタッフ着用コメント・レビュー

店舗スタッフによる着用感やサイズ感のアドバイスを表示します。

custom.staff_review

商品詳細 (Product)

商品スペック仕様表（素材・原産国・サイズ）

素材、原産国、洗濯表示、重量などの構造化スペック表を出力します。

custom.product_specs

商品詳細 (Product)

YouTube紹介動画埋め込み

商品紹介YouTube動画（動画ID）をレスポンシブに埋め込みます。

custom.youtube_video_id

自動生成コード

スタッフ着用コメント・レビューの実装コード

データ型: multi_line_text_field

⚙️ Shopify管理画面（設定 ➔ カスタムデータ ➔ 商品）での登録値

名前: スタッフ着用コメント・レビュー

ネームスペースとキー: custom.staff_review

タイプ: multi_line_text_field

// main-product.liquid などの該当箇所に貼り付け

{% if product.metafields.custom.staff_review != blank %}
  <div class="staff-review-box">
    <h4 class="staff-review-title">👨‍💼 スタッフ着用コメント</h4>
    <p class="staff-review-text">{{ product.metafields.custom.staff_review.value | newline_to_br }}</p>
  </div>
{% endif %}

// base.css または theme.css に貼り付け

.staff-review-box {
  background: #f8fafc;
  border-left: 4px solid #4f46e5;
  padding: 16px;
  border-radius: 8px;
  margin: 20px 0;
}
.staff-review-title {
  font-weight: bold;
  font-size: 14px;
  color: #1e1b4b;
  margin-bottom: 6px;
}
.staff-review-text {
  font-size: 13px;
  color: #334155;
  line-height: 1.6;
}