日本のオンラ▪▪ンストアのデザ▪▪ンにはたくさんの個別要望が寄せられます。配送日の指定を入れたい,のし袋のオプションを入れたい,商品にバリエーション以外のオプションを持たせたい,顧客情報に性別や生年月日を持たせたい,など。
これらのニ，ズをノ，コ，ドで簡単に満たす方法は，そういった機能を提供するShopifyアプリを利用することですが,アプリは便利な一方で,個別の利用料がかかる,上記のようなストアフロントへ機能を提供する場合,そのアプリのパフォーマンスに表示速度が影響を受ける(アプリをたくさん入れたり,重いアプリを入れるとストアの表示速度も遅くなる)といった側面もあります。
そこで次のオプションとして考えられることは，こういった機能を持テマをShopifyテ，マストアから探すことですが,マーチャントのニーズ(特に日本の商習慣に固有のもの)を全て叶えるテーマを探し出すことは難しいかもしれません。
では，他に方法はないのでしょうか?実は，ょっとした液体とHTMLの知識があれば,テーマのコードを少しいじることでそういったニーズを叶えられるケースがあります。テーマのコードを少し(大幅にではないことがミソです)変えるだけであれば,テーマの元々のパフォーマンス(表示速度)を損なうこともありませんし,万が一修正箇所を元に戻す場合も大きな負担は発生しないでしょう。
このブログでは，そんないろいろな用途に応用できる簡単なテ，マ拡張方法，车的属性、行项属性、客户注意にいてご説明をしたいと思います。
1.购物车属性とは?
车的属性とは，Shopifyのカ，ト画面に独自の入力項目を追加するための特別な输入フィ，ルドです。開発ドキュメントに記載されているように、下記のような命名規則に従った输入フィ，ルドをカ，トのテ，マに挿入すると，カ，トへの独自入力項目の追加，その値の注文詳細画面への反映，液体からの参照が可能になります。
购物车属性の命名規則
购物车属性は，開発ドキュメントを参照して自分でコ，ドを挿入することもできますが，Shopify UI元素生成器というジェネレーターサイトを使って,追加したい入力項目のUIをプレビューしながら挿入するコードを生成できます。
ここでは，上記のジェネレ，タ，を使った例をご紹介したいと思います。
まず，上記のジェネレ，タ，に表示されている以下のコ，ドをコピ，します。
推车属性の実際の挿入コ，ド
name = "属性(你的名字)"は，上記命名規則に沿った输入タグであることを示します。值= "{{购物车。["你的名字"]属性}}”は,液体からこの値を参照できることを示します。
次に,Shopifyの管理画面の”オンラインストア”>“テーマ”>“アクション”>“コードの編集“のメニューから,部分/ cart-template.liquidを開きます(首发テ，マを利用の場合。テ，マによっては挿入箇所が異なる場合があります)。
上記のジェネレ，タ，には，”カトのテマファル内の内に記述すること“と書いてありますので，それに従いファ电子邮件ルの中の。> < /形式の部分を検索し，その行の上に上記のコ，ドを貼り付けて保存します。
推车属性のコドをカトのテマファルに挿入した例
この状態で,ストアフロントを開いて商品をカート入れてカート画面に遷移すると,以下のように上記で挿入したコードの入力項目が追加されているのがわかります。
购物车属性の入力項目の表示例
この項目に任意のテキストを入力して(ここでは私の名前を入力してみます),商品の購入を完了してみましょう。購入後にShopifyの管理画面の注文管理から該当の注文詳細を開きます。すると以下にように”詳細部分に購入時に入力した値が項目名と共に表示されているのがわかります。
购物车属性が注文詳細に反映された例
のは购物车属性,属性名称が重複しなければ複数指定することも可能です。その場合，名称ごとに値は構造化されて保存されます。
複数の购物车属性を挿入した例
また，挿入された値は，“編集”メニュ，で各項目ごとに変更可能です。
购物车属性の編集画面
そして(勘の良い方ならお気づきかもしれませんが)，输入タグの类型を変えることでテキストフィールド以外のUIも作れますし,JavaScriptと併用するともっと凝ったUIを提供することができます。
Shopifyのヘルプに，上記のアプロ，チで配送日時指定のuiを挿入するサンプルがありますので，ぜひ確認ください。
购物车属性を使った配送日時指定の例
2.行项属性とは?
车的属性はカ，トの独自項目用のフィ，ルドですが，行项属性は，その商品ペ，ジ版です。购物车属性同様に，下記のような命名規則に従った输入フィ，ルドを商品ペ，ジのテ，マに挿入すると，商品ペ，ジへの独自入力項目の追加，その値の注文詳細画面への反映，液体からの参照が可能になります。
行项属性の命名規則
行项属性も，開発ドキュメントを参照して自分でコ，ドを挿入することもできますが，Shopify UI元素生成器で挿入するコードを生成することもできますので,购物车属性と同じくジェネレーターを使った例をご紹介したいと思います。
まず，上記のジェネレ，タ，に表示されている以下のコ，ドをコピ，します。
行项属性の実際の挿入コ，ド
name = "属性(你的名字)"は，上記命名規則に沿った输入タグであることを示します。
次に,Shopifyの管理画面の”オンラインストア”>“テーマ”>“アクション”>“コードの編集“のメニューから,部分/ product-template.liquidを開きます(首发テ，マを利用の場合。テ，マによっては挿入箇所が異なる場合があります)。
上記のジェネレ，タ，には，”商品ペジのテマファル内の内に記述すること“と書いてありますので，それに従いファ电子邮件ルの中の。{% endform %}の部分を検索し，その行の上に上記のコ，ドを貼り付けて保存します。
行项目属性のコドを商品ペジのテマファルに挿入した例
この状態で,ストアフロントを開いて商品ページに遷移すると,以下のように上記で挿入したコードの入力項目が追加されているのがわかります。
行项属性の入力項目の表示例
この項目に任意のテキストを入力して(ここでは私の名前を入力してみます),商品の購入を完了してみましょう。購入後にShopifyの管理画面の注文管理から該当の注文詳細を開きます。すると以下にように商品の詳細に購入時に入力した値が項目名と共に表示されているのがわかります。
行项属性が注文詳細に反映された例
属性も，属性の名称が重複しなければ複数指定することも可能です。また，购物车属性と異なり，商品単位で別の値の保持が可能です。
複数の行项目产权を用意し,かつ1つの注文で複数商品に別の値を入力した例(カートでの表示)
複数の行项目产权を用意し,かつ1つの注文で複数商品に別の値を入力した例(管理画面の注文詳細での表示)
注意点としては，行项属性には編集機能はありません。項目の行の右端をマウスオバすると表示されるアコンで削除のみ可能です。
行项属性の削除ボタン
行项属性も，输入タグの类型を変えることでテキストフィールド以外のUIも作れますし,JavaScriptと併用するともっと凝ったUIを提供することができます。
冒頭の,のしオプションや商品にバリエーション以外のオプションを持たせたい場合などに利用できると思います。
3.客户说明とは?
三種の神器の最後は客户注意です。こらはストアの顧客情報に独自項目を入れる方法で，同じく特別な命名規則の输入フィ，ルドを使いますが，液体からの参照や，ジェネレ，タによる生成はできません。顧客登録画面の補助的な機能として存在します。
こらは，開発ドキュメントのチュ，トリアルを使ってご説明したいと思います。
まずは，下記の追加項目の挿入コ，ドを上記のチュ，トリアルペ，ジからコピ，します。
客户备注の実際の挿入コ，ド
name = "客户[注](过敏)”は，命名規則に沿った输入タグであることを示します。
次に,Shopifyの管理画面の”オンラインストア”>“テーマ”>“アクション”>“コードの編集“のメニューから,模板/客户/ register.liquidを開きます。
上記チュトリアルに従って，ファルの中の{% endform %}の部分を検索し，その行の上に上記のコ，ドを貼り付けて保存します。
客户说明のコドを商品ペジのテマファルに挿入した例
この状態で,ストアフロントを開いて顧客登録画面に遷移すると,以下のように上記で挿入したコードの入力項目が追加されているのがわかります。
客户说明の入力項目の表示例
この項目に任意のテキストを入力して(ここでは私の好きなものを入力してみます),顧客登録を完了してみましょう。登録後にShopifyの管理画面の顧客管理から該当の顧客を開きます。すると以下にように”お客様に関するメモ”に登録時に入力した値が項目名と共に表示されているのがわかります。
客户说明が顧客詳細に反映された例
客户备注も，备注の名称が重複しなければ複数指定することも可能です。ただし,他の二つのように構造化はされずメモとして記録されるのみですので,編集はできますが書式を壊さないように気をつける必要があります。
このチュトリアルの例では，テキストフィルドとして提供していますが，他の二同様に，输入タグの类型を変えることでテキストフィールド以外のUIも作れますし,JavaScriptと併用するともっと凝ったUIを提供することができます。
冒頭の，性別や誕生日の取得などに利用できると思います。
こらの記事も参考にしてください:
クラ@ @アントのために@ @のメ@ @ル通知をカスタマ@ @ @ @
最後に
購入者向けのテマカスタマズの三種の神器，车的属性、行项属性、客户注意の説明はいかがでしたでしょうか?
冒頭にご説明したように,アプリやテーマで要望に合う満足いくものがあればこういったカスタマイズは不要ですが,もしご自身がテーマをカスタマイズできるスキルをお持ちである場合は,簡単に試せる別のオプションとしてぜひ挑戦していただければと思います。
Shopifyの特徴として,こういった柔軟で汎用的な拡張性を持つことで,直接目的にかなう機能がない場合でも,アイディア次第で実現できることが挙げられます。
そのためのヒントとなるカスタマesc escズの例が，今日ご紹介した開発者ドキュメントやヘルプにたくさん掲載されておりますので，今回ご紹介できなかった例もぜひお試しいただければと思います。
Shopifyパ，トナ，プログラムでビジネスを成長させる
マーケティング,カスタマイズ,またはWebデザインや開発など提供するサービスに関係なく,Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で,収益分配の機会が得られ,ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマスコミュニティに今すぐ参加しましょう!
