Shopify でギフトラッピングを実現する方法を徹底解説！

はじめに

今回は、Shopify でギフトラッピングを実現する方法について解説していきます。

1 つ目は、メタフィールドを用いたコーディングでギフトラッピングを導入する方法です。

2 つ目は、アプリを用いてギフトラッピングを導入する方法です。

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

ギフトラッピングとは？

ギフトラッピングとは、商品を贈り物として包装することです。通常、特別な包装紙やリボンを使って、商品を美しく包みます。このサービスは、商品をより特別なものにし、贈る相手に喜びや驚きを与えることが目的です。特に、誕生日やクリスマスなどのイベントや祝い事の際に、贈り物をする際に利用されます。

ギフトラッピングのメリット

• 顧客体験の向上

ギフトラッピングは、贈る人の気持ちを表現する方法の一つです。丁寧に包装された贈り物は、贈り手の思いや気配りを感じさせます。商品を送る際の付加価値として「ギフトラッピング」を提供することで、顧客により良いショッピング体験を提供できます。

• シーズンイベントの活性化

特定のシーズンやイベント（クリスマス、誕生日、バレンタインデーなど）に向けて、ギフトラッピングオプションを強調することで、シーズン性のある商品の販売促進が可能です。

• ブランド価値の向上

ギフトラッピング機能を提供することで、お店のブランド価値やイメージを向上させることができます。顧客は、贈り物を選ぶ際にブランドのサービスや注意を受けることで、よりポジティブな印象を持つ可能性があります。

メタフィールドを用いたコーティングでギフトラッピング機能を導入する方法

まずは、メタフィールドを用いたコーティングでのし機能を導入する方法について解説します。

今回は、GraphQL を用いてメタフィールドを作成していきます。

「Shopify GraphQL App」にアクセスしてください。「Shopify GraphQL App」はストア上で GraphQL を使用できるように Shopify が用意しているアプリです。

上記の Install の部分に Shopify の開発ストアの URL を入力し、Select all をクリックして、「インストール」ボタンを押すと、Shopify の開発ストアに 「Shopify GraphQL App」をインストールすることができます。

ストアのメタフィールドにギフトラッピング商品の情報を設定する

ストアのメタフィールドにギフトラッピング商品の情報を設定します。

以下の画像は、今回実装する GraphQL コードです。Mutation の部分と Variables の部分を順に解説していきます。

まずは、Mutation の部分です。以下のコードをそのまま貼り付けてください。

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      key
      namespace
      value
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
      code
    }
  }
}

今回は、metafieldsSet という API を使います。これは、メタフィールドの値を作成・更新するための API です。こちらの API には引数として、以下のものを渡します。

• key
• namespace
• ownerId
• type
• value

順に説明します。

• key
  メタフィールドを識別する一意の値です。

• namespace
  メタフィールドのグループのコンテナです。メタフィールドが集まった箱のようなものです。

• ownerId
  メタフィールドが関連付けられているリソースの固有の識別子です。

• type
  メタフィールドに格納されるデータの種類を指定します。

• value
  メタフィールドに格納されるデータです。文字列として格納します。

具体的に渡す引数は、Variables に設定します。

metafields ブロックには、登録されたメタフィールドの情報が入ります。

実行結果として、以下のものが返ってきます。

• key
• namespace
• value
• createdAt
• updateAt

key・namespace・value に関しては、先程と同様です。

• createdAt
  メタフィールドが作成された日時です。

• updateAt
  メタフィールドが更新された日時です。

userErrors ブロックには GraphQL の実行中に発生したエラーに関する情報が入ります。

実行結果として、以下のものが返ってきます。

• field
• message
• code

順に説明します。

• field
  エラーが発生した入力フィールドの場所を示しています。

• message
  エラーメッセージです。

• code
  エラーコードです。

次に、metafieldSet に渡す引数、Variables の部分について解説します。

完成形のコードがこちらです。

  {
  "metafields": [
    {
      "key": "gift_wrapping_setting",
      "namespace": "gift_wrapping_app",
      "ownerId": "gid://shopify/Shop/67358163174",
      "value": "{\"gift_wrapping_list\": [\"selling-plans-ski-wax\",\"gift-card\"]}",
      "type": "json"
    }
  ]
}

各設定項目について詳しく見ていきましょう。まず、メタフィールドの key と namespace です。今回は、key に gift_wrapping_setting 、namespace に、gift_wrapping_app を指定しています。

次に、ownerId を設定します。以下の GraphQL クエリを実行して Shop の id を取得してください。

{
  shop {
    id
  }
}


============================================
実行後のレスポンス

{
  "data": {
    "shop": {
      "id": "gid://shopify/Shop/67358163174"
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 1,
      "actualQueryCost": 1,
      "throttleStatus": {
        "maximumAvailable": 2000,
        "currentlyAvailable": 1895,
        "restoreRate": 100
      }
    }
  }
}

ownerId に、取得した Shop の id を設定してください。

次に、value にギフトラッピング機能に必要な情報を設定します。

今回は、以下の json データを文字列にエスケープしたものを設定します。

{
  "gift_wrapping_list": ["selling-plans-ski-wax","gift-card"]
}

gift_wrapping_list には、該当商品のハンドルを指定します。

ストア管理画面の左側の「商品管理」をクリックしてください。

該当する商品を選択してください。

「検索結果」の「編集」をクリックして、メニューを開きます。

「URL ハンドル」の末尾がハンドルです。（画像では、gift-card）

取得したハンドルを gift_wrapping_list に設定してください。

{
  "gift_wrapping_list": ["selling-plans-ski-wax","gift-card"]
}

json データを文字列に変換して、valueに設定します。

上記で作成した Variables を、「Shopify GraphQL App」に設定してください。

右側の実行ボタンをクリックして、GraphQL を実行してください。

これで、ストアのメタフィールドにギフトラッピングの情報を設定できました。

あとは、カートページで、ストアのメタフィールドからギフトラッピング商品の情報を取得して、「ギフトラッピングを追加」ボタンを設置する処理を追加してください。詳しい処理はかなり難しくなるので、ここでは割愛します。

アプリを用いてギフトラッピング機能を導入する方法

Shopify アプリの「シンプルギフトラッピング｜お手軽ギフト包装アプリ」を用いて、ギフトラッピング機能を導入します。以下の記事を参考に解説していきます。

Shopify で商品購入時に「ギフトラッピング」を設定する方法とアプリについて徹底解説！

「シンプルギフトラッピング｜お手軽ギフト包装アプリ」は、Shopify でギフトラッピング機能を簡単に実現できるアプリです。

料金：月額 6.99 ドル（7 日間の無料体験）

※開発ストアは無料で使用できます。

それでは、実際に解説していきます。

アプリのインストール

まずは、アプリをインストールしていきます。
以下のリンクにアクセスしてください。

「シンプルギフトラッピング｜お手軽ギフト包装アプリ」アプリストア

以下の画面に遷移します。「インストール」ボタンをクリックしてください。

「インストール」ボタンをクリックすると以下の画面に遷移します。「インストール」ボタンをクリックして、アプリのインストールを行いましょう。

以下の管理画面が表示されます。

以上でアプリのインストールは終了です。

ギフトラッピング設定

管理画面にて、ギフトラッピング設定を行います。左側のメニューの「ホーム」をクリックして、「ギフトラッピング設定」ページに移動してください。

「ギフトラッピング商品を選択」セクションで、ギフトラッピング商品を選択します。

ギフトラッピングをする商品を選択して、「追加」ボタンをクリックして商品を追加してください。

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

以上でギフトラッピング設定は、終了です。

テーマにギフトラッピング機能を追加

テーマにギフトラッピング機能を追加します。「ストアにギフトラッピング機能を表示」セクションでアプリをテーマに追加します。

アプリを追加したいテーマを選択し、「テーマに追加」ボタンをクリックしてください。

これでテーマにアプリを追加できます。忘れないように、右上の「保存する」ボタンをクリックしてください。

以上でテーマにギフトラッピング機能の追加は終了です。

ギフトラッピング商品の追加

カートページにて、ギフトラッピング商品の追加を行います。「ギフトラッピングを追加」ボタンをクリックしてください。

ギフトラッピングする商品・バリエーション・備考を記入して、「ギフトラッピングを追加」ボタンをクリックしてください。

これで、ギフトラッピングを追加できます。

以上でギフトラッピング商品の追加は終了です。

見た目のカスタマイズ

見た目のカスタマイズをします。
以下の画像は、編集できる箇所を表しています。
ボタンのテキスト・背景色・文字の色・枠線の太さ・枠線の色・丸み・位置を編集できます。

ギフトラッピング欄のラベルテキストを編集できます。

バリエーション名のラベルテキストを編集できます。

備考入力欄のラベルテキストを編集できます。

備考のプレースホルダーを入力できます。

以上で見た目のカスタマイズは終了です。

「シンプルギフトラッピング｜お手軽ギフト包装アプリ」の詳しい機能については、以下の記事を参考にしてみてください。

【Shopify アプリ】シンプルギフトラッピング｜お手軽ギフト包装アプリについて徹底解説｜ご利用ガイド

終わりに

今回は、Shopify でギフトラッピングを実現する 2 つの方法について解説しました。

少しでも、お役に立てれば幸いです。ありがとうございました。

参考記事

• Shopify で商品購入時に「ギフトラッピング」を設定する方法とアプリについて徹底解説！

• 【Shopify アプリ】シンプルギフトラッピング｜お手軽ギフト包装アプリについて徹底解説｜ご利用ガイド