はじめに

今回は、Shopify の商品ページに、名入れ指示や備考を追加できるようなフォームを設置する方法を解説していきます。

1 つ目は、Shopify のデフォルトの機能を使った方法です
2 つ目は、アプリを用いて名入れオプション・備考を追加する方法です。

Liquid からフォームを設定する方法もありますが、今回の記事ではプログラミングの知識がなくても実装できる方法を解説してきます。

それでは、それぞれの方法について詳しく解説していきます。

目標

今回の記事では、以下の画像のような、商品ページに「名前」「備考」の入力欄を追加することを目標とします。

注文後は、Shopify 管理画面の「注文管理」で顧客の入力が確認できるようにします。

Shopify のデフォルト機能で実装する

入力欄は、テーマのカスタマイズから、追加することができます。

まずは、テーマのカスタマイズ画面に移動しましょう。
管理画面で、「オンラインストア > テーマ」>「カスタマイズ」をクリックします。

画面左側の「歯車アイコン」をクリックし、「カート」を選択します。
「カート」を選択後、「カートメモを有効にする」をクリックします。

カートに「注文に関する特別な指示・備考」が追加されており、顧客がメモを入力できるようになります。

ドロワータイプ

ページタイプ

ノーコードかつ Shopify デフォルトの機能を実装する場合は、目標画像のように、商品ページに「名入れ」「備考」の入力欄を表示することはできませんが、カートページに表示することで顧客に入力欄を提供できます。こちらからの入力も、管理画面の「注文管理」 > 「メモ」から確認できます。

目標とは少し違う形になってしまいましたが、デフォルト機能のみ・コーディングなしなら妥協範囲という感じです。

アプリで実装する

次にアプリを使用して実装していきます。楽なのでこちらがおすすめです。

「シンプル名入れ｜お手軽名前入りギフトオプション」

今回使用していくアプリです。

以下は「Shopify App Store のアプリ説明欄」からの引用です。

「シンプル名入れ｜お手軽名前入りギフトオプション」は、ストアに名入れ機能を導入できるアプリです。高いカスタマイズ性の名入れ入力フォームを、ストアに簡単に導入できます。デモストアもご利用いただけますので、詳しいアプリの機能を確認したい方は、「デモストアを表示する」ボタンからアクセスしてください。
デモストアはこちらから

機能

• 商品毎に名入れオプションを設定できる
• 備考オプションも追加できる
• 同時に複数の商品に名入れオプションを設定できる
• 名入れ入力フォーム・備考入力フォームを自由にカスタマイズできる

太字部分が嬉しいポイントです。全部の商品に名入れオプションを追加したいわけではないので。

このアプリは、管理画面とテーマカスタイマイズ画面の 2 つで設定項目があります。

管理画面は、どの商品に名入れオプションを追加するかの設定
テーマカスタイマイズ画面では、名入れオプションの見た目の設定をします。

価格

• Basic Plan
  $4.99/月
  インストール日から 7 日間、無料でアプリをお試しいただけます。
  開発ストアの場合、無期限かつ完全無料で全機能をお試しいただけます。

詳しい使い方

使い方を解説していきます。

アプリのインストール

まずアプリをインストールします。

ストアの管理画面左下の「設定」をクリックします。

ストア管理画面の「アプリと販売チャネル」画面右上に表示されている「Shopify App Store」をクリックし、Shopify App Store に移動します。

検索窓に、「シンプル名入れ｜お手軽名前入りギフトオプション」と入力します。以下の画像のアプリをクリックします。

インストールボタンをクリックします。

以下の管理画面が表示されれば、インストール完了です。

管理画面でアプリの設定

まずは管理画面でアプリを設定していきます。

テーマにアプリを追加

アプリのインストール後は、以下のような表示です。

「アプリを有効化」ボタンをクリックします。

以下のページに遷移するので、「テーマに追加」をクリックして、アプリを追加しましょう。

「テーマに追加」クリック後は、テーマカスタイマイズ画面に遷移します。

「保存する」ボタンをクリックしておきましょう。

名入れ商品の設定

次に「名入れ商品設定ページ」で名入れ商品を設定します。
左側のメニューから、「名入れ商品設定」をクリックし、ページを移動します。

名入れ商品を設定します。
「任意の商品」もしくは、「コレクション」から設定できます。（コレクションでは、コレクション内のすべての商品が選択されます。）

名入れオプションを追加したい商品・コレクションを選択して、「追加」ボタンをクリックします。

「保存する」ボタンをクリックして、設定を保存します。

名入れ商品の管理

次に、名入れ商品一覧の確認・編集・削除をします。

左側のメニューから、「名入れ商品管理」をクリックし、ページを移動します。

名入れ商品管理ページでは、名入れオプションを追加した商品一覧を確認できます。

名入れ商品の編集・削除

編集・削除したい名入れ商品を選択することで、選択した商品の編集・削除ができます。

テーマカスタマイズ画面

次にテーマカスタマイズ画面で、見た目を調整します。

テーマカスタマイズの「商品詳細」ページに移動します。

手動でアプリを追加する

テーマカスタマイズ画面の「商品詳細」ページの「ブロックを追加」から、アプリを追加します。

アプリが追加されたのを確認できます。

見た目のカスタマイズ

最後に見た目をカスタマイズしていきます。

編集可能な項目はかなり多いので、いい感じに設定しましょう。

名前入力欄のラベルを編集

名前入力欄のプレースホルダーを編集

備考の表示・非表示切り替え

その他の設定項目

入力欄のラベルサイズ・入力欄のラベルの色・入力欄のプレースホルダーの色・入力欄の枠線の色・入力欄の丸みを編集できます。

上部の余白（PC）・上部の余白（スマホ）・下部の余白（PC）・下部の余白（スマホ）が編集できます。

より詳しい解説が以下の記事で確認できます。
【Shopify アプリ】シンプル名入れ｜お手軽名前入りギフトオプションについて徹底解説｜ご利用ガイド

まとめ

今回の記事では、コーディングなしで名入れオプションを追加する方法を解説しました。

デフォルト機能でも、アプリを使ってもおそらく 10 分くらいでお入れオプションを追加できると思います。

最後まで読んでいただきありがとうございました！

今回紹介したアプリは以下のリンクからインストールできます。
「シンプル名入れ｜お手軽名前入りギフトオプション」