Shopifyでカートページに備考欄を追加する方法について分かりやすく解説！

目次

• はじめに
• 備考欄とは
• 備考欄を設定するメリット
• Shopify ストアのカートページに備考欄を追加する方法
  • ノーコードで備考欄を追加する
  • コーディングで備考欄を追加する
  • コーディングで注文確定メールに備考欄の内容を表示する
• まとめ

はじめに

皆さんのサイトに備考欄はありますか？備考欄がないと、顧客は意見を伝えることができず、結果的に売上の低下に繋がる可能性があります。
今回は、Shopify サイトのカートページに「備考欄」を追加して、顧客から要望を受け取ることができるように設定する方法を解説します。

備考欄とは

備考欄とは、顧客から注文やショップに対する要望を聞き取るために設置する、任意入力欄のことです。

出典：Hamee fun

備考欄を設置すると、ショップサイトと顧客両方に様々なメリットがあります。

備考欄を設定するメリット

通常の店舗では顧客の要望を取り入れて店舗運営や商品を改善することで、売り上げを伸ばすプロセスが必要不可欠です。一方で EC サイトでは特別な機会がない限り、顧客の意見やオプションの要望を取り入れることは困難です。

顧客の意見を取り入れる方法として、商品購入ページに「備考欄」を設置する方法があります。備考欄に商品への要望や、顧客個人の意見を記入してもらうことで、顧客が商品やサイトについてどのような意見を持っているかを調査できます。

Shopify ストアのカートページに備考欄を追加する方法

Shopify で構築したストアに備考欄を追加する方法を、ノーコードで追加する方法と、コーディングで追加する方法、両方ご紹介します。

ノーコードで備考欄を追加する

コーディングせずに備考欄を追加する方法をご紹介します。

備考欄を追加する

管理画面から「オンラインストア」を選択し、「カスタマイズ」をクリックします。

画面上部の「ホームページ」をクリックして、「カート」を選択します。

左側のタブから「小計」を選択し、「テーマ設定」の「カートメモを有効にする」にチェックを入れます。（使用しているテーマによっては、設定の場所が異なる場合があります。）

これでカートページに「備考欄」を追加できました。

備考欄のラベルを編集する

備考欄のラベルにはデフォルトで「Order special instructions」と記載されています。

この表記を変更する方法をご紹介します。

まずはストア管理画面から「...」>「デフォルトテーマのコンテンツを編集する」を選択します。

検索欄にデフォルトの備考欄のラベルと同じ文字（画像では「Order special instructions」）を入力します。

「Note」の文字を備考欄のラベルとして表示したい文面に変更します。

変更した文字がラベルとして表示されます。

備考欄に入力された内容を確認する

備考欄に入力された内容は「注文管理」画面内の右側「メモ」に表示されます。

コーディングで備考欄を追加する

テーマによってはノーコードでは備考欄を追加できない場合があります。

テーマカスタマイズで設定できない場合は、以下のコーディングで実装する方法をお試しください。

ソースコードから備考欄を追加する

ストア管理画面から「...」>「コードを編集」をクリックします。

「main-cart-items.liquid」ファイルを開きます。

</form>タグの直前に以下のコードを貼り付けます。

<p style="
  font-size: 12px;
  width: 50%;
  padding: 8px 10px;
  margin-top: 12px;
">
  <span style="
    font-weight: bold;
    padding-bottom: 2px;
  ">
    ここにラベルを記入します。
  </span>
  <textarea
    name="attributes[Order note]"
    form="cart"
    style="width: 100%; height: 100px; padding: 8px; margin-top: 2px;"
    id="Cart-note"
    placeholder="ここにプレースホルダ―を入力します。"
  >
    {{ cart.attributes["Order note"] }}
  </textarea>
</p>

コードを追加すると以下のようになります。

これでコーディングによる備考欄の追加は完了です。

コーディングで注文確定メールに備考欄の内容を表示する

注文確定メールに備考欄の内容を出力するには、メールの文面にコーディングで備考欄に入力された文字を追加する必要があります。

まずは管理画面から「設定」を開きます。

「通知」から「お客様通知」をクリックします。

「注文の確認」をクリックします。

「コードを編集」をクリックして、注文確認メールの内容を編集していきます。
（※ストアで設定しているメールアドレスの認証を完了している必要があります。）

メールの文面の備考内容を表示したい部分に以下のコードを挿入します。
（今回は Taxes の下の欄に追加しました。）

{% if note != blank %}
  <p>
    <b>注文備考:</b>
    </p>
  <p>{{ note }}</p>
{% endif %}
<p></p>

挿入すると以下のようになります。

メール画面は以下のようになります。

これで注文確定メールに顧客自身が入力した備考欄の内容が表示されるようになります。

まとめ

今回は備考欄を追加する方法を、ノーコードとコーディング 2 つの方法でご紹介しました。

ショップの改善のお役に立てれば何よりです。