Shopifyの商品ページに、商品ごとにそれぞれ固有のサイズ表を作成・表示させたくありませんか？
この記事では、Shopifyでアプリを使用せずにメタフィールドを活用することで、ノーコードでサイズ表を自由に作成して商品ページに表示させる方法を紹介します。
※当記事の内容を利用する場合は、利用規約が適用されます。
CONTENTS
完成形はこちら
まず、結論としてのアウトプットをスクショでご覧ください。
サイズ表の例１
Shopify商品管理画面のメタフィールドでサイズ表の内容を指定して…
（こちらの例はシャツを想定しています。）
このように、商品ページにはHTMLのTableタグによってサイズ表が出力されます。
サイズ表の例２
先ほどと同様に、別のShopify商品管理画面のメタフィールドで異なる内容を指定します。
（こちらの例はパンツを想定しています。）
今後は、商品ページに同じくHTMLのTableタグによってパンツのサイズ表が出力されます。
実現するための方法
上記のサイズ表生成機能を実現するための方法を紹介します。
必要なもの
今後のストア運用でノーコードでサイズ表を更新するために、初回だけは下記の①メタフィールドの設定 ②HTML・Liquidによるコーディングが必要です。
Liquidは、Shopify独自のプログラミング言語です。
①メタフィールドの設定
次に紹介するコードを使用する場合は、メタフィールドのネームスペース・キーは下記画像と同様に設定してください。
また、メタフィールドの形式は「単一行のテキスト（リスト）」を指定してください。
②HTML・Liquidによるコーディング
こちらが、上記のメタフィールドの入力によって動的にHTMLのTableタグでサイズ表を生成するコードです。
上記と同様のメタフィールド設定であれば、そのまま使用できます。
