今回は、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 つの方法について解説しました。
少しでも、お役に立てれば幸いです。ありがとうございました。
参考記事
今回は、以下の記事を参考にしています。