2024/06/12

Shopify ストアに名入れオプションを追加する方法を徹底解説!

@ 五条真一

Shopify

はじめに

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

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

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

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

目標

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

名入れオプションを設定すると、商品のプロパティに自動反映!

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

管理画面の「注文管理」から顧客の入力を確認

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

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

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

テーマのカスタマイズ画面へ移動する

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

カートメモを有効にする

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

ドロワータイプ

ドロワーにカートに「注文に関する特別な指示・備考」が追加

ページタイプ
カートページにカートに「注文に関する特別な指示・備考」が追加

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

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

アプリで実装する

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

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

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

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

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

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

機能

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

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

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

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

価格

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

詳しい使い方

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

アプリのインストール

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

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

アプリのインストール手順1

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

アプリのインストール手順2

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

検索窓に入力

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

アプリのインストール

アプリのインストール

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

アプリ管理画面

管理画面でアプリの設定

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

テーマにアプリを追加

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

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

アプリの有効化

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

テーマ追加

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

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

保存する

名入れ商品の設定

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

名入れ商品設定

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

名入れ可能な商品を選択

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

名入れ商品を追加

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

名入れ商品設定を保存

名入れ商品の管理

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

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

名入れ商品一覧の確認

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

名入れ商品の編集・削除

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

名入れ商品の編集・削除

テーマカスタマイズ画面

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

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

手動でアプリを追加する

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

手動でアプリを追加

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

アプリの追加を確認

見た目のカスタマイズ

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

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

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

名入れオプションラベルの編集

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

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

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

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

その他の設定項目

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

入力欄のスタイルの編集

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

余白の編集

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

まとめ

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

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

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

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

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

© 2021 powerd by UnReact