📝

Shopify の名入れアプリについて調べてみた

2024/06/18に公開

Shopify

shopifyアプリ

tech

はじめに

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

1 つ目は、コーディングで実装する方法
2 つ目は、アプリを用いて名入れオプション・備考を追加する方法

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

目標

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

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

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

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

コーディングで実装する方法

コーディングで実装するのは面倒ですが、頑張りましょう。

オンラインストアのコードを編集から、コードの編集画面に移動しましょう。

コードの編集画面に移動

main-product.liquid のファイルを開きましょう。

main-product.liquid を開く

こちらのファイルにコーディングを行っていきます。

JSON 部分に任意の「type」を設定します。

{
  "type":"naire",
  "name":"名入れ",
  "settings": [
    {
      "type": "text",
      "id": "name_input_label",
      "label": "ラベル"
    }
  ]
};

次にliquid のコード内で、表示要素を追加します。

<div class="product--set-products-list">
  <label class="name-option-input-label" for="{{block.id}}-name-option">
    {{ block.settings.name_input_label }}
  </label>
  <input
    id="{{block.id}}-name-option"
    type="text"
    name="properties[名前]"
    placeholder="お名前を入力してください"
    form="product-form-{{ section.id }}"
  />
</div>

これで、名入れ用の入力インプットブロックが実装できました。

後は、商品ページで追加すれば、名入れブロックが表示されます。

アプリで実装する

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

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

今回使用していくアプリです。アプリストアは以下の画像からになります。

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

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