Shopifyの商品ページに、上限なしでオプション項目を追加できる機能をお探しですか？
この記事では、有料アプリは使用せずにメタフィールドを活用して商品オプションを追加する方法を紹介します。
オプション項目機能は有料アプリ(約2,000円/月ほど)を使用して追加することも可能ですが、この記事を参考にすれば無料で実現可能ですので、この機会にランニングコストを削減しましょう！
※当記事の内容を利用する場合は、利用規約が適用されます。
完成形はこちら
まず結論として、オプション項目を追加できる機能のスクショをご覧ください。
この記事の内容を真似することで、商品管理ページのメタフィールドからオプション項目の入力を設定可能となります。
メタフィールドなので、商品それぞれ固有のオプション項目をプログラムを書かずに設定可能となります。
上記メタフィールドで入力した内容が商品ページに反映されています。
このようにして、オプションアプリを使用せず無料で追加のオプション項目を表示可能となります。
カスタマイズの大まかな手順
カスタマイズ内容の大枠を３つに分けて示します。
商品メタフィールドを設定することで、商品固有のオプション項目をプログラムを書かずに追加できる入力欄を作成します。
Shopifyのテーマ拡張方法であるLine Item Propertyを活用して、カート画面に独自の入力項目を追加するための機能を追加します。
入力欄（STEP 1）で設定した内容を、カート画面に独自の入力項目を追加するための機能（STEP ２）に組み込むことで、各商品ページに独自のオプション項目欄を表示させます。
カスタマイズの詳細な手順
ここからは、カスタマイズの詳細を説明します。
オプション項目の入力欄を作成
後に紹介するコードをそのまま使用するためには、メタフィールドのネームスペース・キーは下記画像と同様に設定してください。
また、メタフィールドの形式（単一行のテキストなど）も同様に指定してください。
商品にオプション項目を追加する機能を作成
Shopifyのテーマ拡張方法であるLine Item Propertyを活用して、カート画面に独自の入力項目を追加するための機能を追加できます。
Line Item Propertyについては、こちらのShopify公式のページで紹介されています。
プログラムを書く必要があるので、少しハードルが高く感じましたか？
安心してください！Shopify公式のツールである、Shopify UI Elements Generatorによって簡単にコードを生成することが可能です。
こちらのように、左側でオプション項目の設定をすると右側で外観を確認することができます。
納得できる形に整ったら、下の方に自動でコードが生成されます！
このコードをそのまま使用することで、上の画像右側にあるオプション項目をストアに導入することができます。
この記事では、このコードはそのまま使用せずに商品メタフィールドと組み合わせるために次項に説明する編集を加えます。
商品メタフィールドとLine Item Propertyの連携
繰り返しになりますが、こちらがオプション項目を入力するための商品管理ページのメタフィールドです。
ここの入力内容を、Line Item Propertyの内容として連携させます。
ここから、商品メタフィールドとLine Item Propertyを連携させるためのコードを「プルダウン」と「備考欄」に分けて説明します。
プルダウンを生成するためのコード
こちらに、商品メタフィールドによる入力内容をプルダウン形式のオプション項目としてLine Item Propertyにセットするコードを記載しています。
