Shopifyで熨斗（のし）を実装する方法を考察
はじめに
今回は、Shopify で 熨斗（のし）を実装する方法について考察していきます。
メタフィールドを利用する方法や、Ajax API を用いて実装する方法について考察していきました。
それでは、頑張っていきましょう。
Shopify における「のし」の定義
まずは、Shopify の「のし」の定義からしていきましょう。
まず、祝事や弔事に対応する「のし」の種類を定義し、顧客が簡単に選べるようにします。また、カスタムメッセージ入力フィールドを設け、顧客が自由にメッセージを追加できるように設定します。さらに、印刷やフルフィルメントのプロセスを明確にし、注文に応じた「のし」の正確な適用を確保する必要があります。
Shopifyに「のし」を導入するメリット
まずは、「のし」を導入するメリットについて考えていきましょう。
メリットが無いと、導入するメリットがあまり無いですからね。
日本の伝統文化である「のし」をオンラインショップに導入することは、顧客満足度を向上させ、ビジネスに多くのメリットをもたらします。特にギフト需要が高い店舗では、「のし」の提供が他の競合店との差別化につながります。以下に、Shopifyで「のし」を導入する主なメリットを解説します。
1. 顧客満足度の向上
「のし」を導入することで、顧客は購入する商品をより特別なものに感じ、贈り物としての価値が高まります。特に日本の顧客にとって、「のし」は伝統的な儀礼や礼儀の一環として非常に重要視されるため、これを提供することで顧客満足度が向上します。顧客が贈り物に対して細やかな配慮を感じることで、リピート購入や口コミによる新規顧客の獲得にもつながります。
2. ギフト需要の取り込み
「のし」は、贈り物の包装や演出に欠かせない要素であり、ギフトとしての商品購入を促進します。特に、結婚式や出産祝い、季節の贈答品（お歳暮やお中元など）を扱うショップにとって、「のし」を提供することは、ギフト需要を効果的に取り込む手段となります。これにより、顧客がギフト商品を選ぶ際の第一候補として、あなたのショップが選ばれる可能性が高まります。
3. 他店との差別化
多くのオンラインショップが同様の商品を取り扱っている中で、「のし」の提供は他店との差別化要因となります。「のし」を含むカスタマイズ可能なギフトオプションを提供することで、顧客に対して他にはない独自の価値を提供でき、結果として競争優位性を確立することができます。
4. 高単価商品の販売促進
「のし」を提供することで、特別な贈り物を探している顧客に対して高単価商品をアピールする機会が増えます。「のし」を含むギフトパッケージは、通常の商品の購入よりも高い価格設定が可能であり、顧客は特別な場面での購入を検討する際に、より高価な商品を選びやすくなります。これにより、平均注文額（AOV）の増加が期待できます。
5. ブランドイメージの向上
「のし」を提供することは、あなたのブランドが伝統や文化を大切にし、顧客に対して細やかなサービスを提供していることを示すものです。このような姿勢は、顧客に対してブランドに対する信頼感を醸成し、長期的なブランドロイヤルティの向上につながります。また、特別感を演出することにより、ブランドの高級感や付加価値を強調することができます。
それでは次に、デメリットについて考えていきましょう。
Shopifyに「のし」を導入するデメリット
それでは、Shopify に「のし」を導入するデメリットについて考えていきましょう。
Shopifyストアに「のし」を導入することは、顧客満足度やブランド価値を高める効果が期待できる一方で、いくつかのデメリットや課題も伴います。これらのデメリットを理解し、対策を講じることで、導入後の運用がスムーズに進むでしょう。以下に、Shopifyで「のし」を導入する際の主なデメリットについて解説します。
1. 運用と管理の負担増加
「のし」を提供することで、ストア運営者に追加の業務負担がかかります。具体的には、注文ごとに「のし」を適切に設定・印刷し、商品に取り付ける作業が発生します。この作業は特に繁忙期において時間と手間がかかり、フルフィルメントのスピードに影響を与える可能性があります。また、誤った「のし」を取り付けてしまった場合、顧客からのクレームや返品処理が発生し、さらなる負担となる可能性があります。
2. コストの増加
「のし」を提供するには、印刷やカスタマイズにかかるコストが発生します。これらの費用は商品の価格に上乗せすることが考えられますが、顧客が価格の上昇を受け入れない場合、利益率が低下するリスクがあります。また、特に少量生産や高品質な「のし」を提供する場合、そのコストがさらに高くなることが予想されます。
3. システムの複雑化
「のし」のオプションを導入することで、ストアの注文管理システムが複雑化する可能性があります。特に、カスタマイズされたメッセージやデザインを反映する必要がある場合、標準的な注文処理システムでは対応が難しく、追加のシステム開発や設定が必要になることがあります。このシステムの複雑化は、技術的なエラーを引き起こすリスクを増加させる要因となります。
4. 顧客対応の増加
「のし」をカスタマイズできるようにすることで、顧客からの問い合わせや要望が増加する可能性があります。たとえば、特定の文字やデザインの対応可否、のしの配置に関するリクエストなど、通常の商品販売にはない対応が求められることがあります。このような対応は、カスタマーサポートの負担を増加させ、迅速な顧客対応が難しくなることがあります。
5. 市場ニーズの限界
「のし」の提供は日本市場や日本文化に精通した顧客にとっては重要なサービスですが、海外市場や日本文化に馴染みのない顧客には、その価値が理解されにくい場合があります。そのため、海外展開を考慮している場合や、国際的な顧客層をターゲットとしているストアにおいては、「のし」サービスが必ずしも売上増加につながらない可能性があります。
Shopify で「のし」を実装する方法
それでは、Shopify で「のし」を実装する方法について考察していきます。
まずは、「のし」の商品を登録していきましょう。
「のし」用の商品を登録する
まずは、「のし」用の商品を登録していきましょう。
あまり目新しいことはありませんが、とりあえず解説していきます。
商品を登録するから、商品登録を行っていきましょう。
入力項目を埋めて、保存するをクリックして下さい
のしの種類は、バリエーションとして登録してください。
これで、「のし」用の商品登録は完了です。
shop のメタフィールドに「のし」の商品 ID を登録
それでは次に、shop のメタフィールドに「のし」の商品 ID を登録していきましょう。
shop オブジェクトは、Shopify のストアフロントから簡単にアクセスできます。
以下の、Liquid の shop オブジェクトの公式ドキュメントを参照してください。
以下が、Liquid からアクセスできる shop オブジェクトのサンプルコードです。
{
"accepts_gift_cards": true,
"address": {},
"brand": {},
"collections_count": 7,
"currency": "CAD",
"customer_accounts_enabled": true,
"customer_accounts_optional": true,
"description": "Canada's foremost retailer for potions and potion accessories. Try one of our award-winning artisanal potions, or find the supplies to make your own!",
"domain": "polinas-potent-potions.myshopify.com",
"email": "polinas.potent.potions@gmail.com",
"enabled_currencies": [],
"enabled_locales": [],
"enabled_payment_types": [
"american_express",
"apple_pay",
"diners_club",
"discover",
"google_pay",
"master",
"paypal",
"shopify_pay",
"visa"
],
"id": 56174706753,
"locale": "en",
"metafields": {},
"metaobjects": {},
"money_format": "${{amount}}",
"money_with_currency_format": "${{amount}} CAD",
"name": "Polina's Potent Potions",
"password_message": "Our store will be opening when the moon is in the seventh house!!",
"permanent_domain": "polinas-potent-potions.myshopify.com",
"phone": "416-123-1234",
"policies": [],
"privacy_policy": {},
"products_count": 19,
"published_locales": [],
"refund_policy": {},
"secure_url": "https://polinas-potent-potions.myshopify.com",
"shipping_policy": {},
"subscription_policy": null,
"taxes_included": false,
"terms_of_service": {},
"types": [
"",
"Animals & Pet Supplies",
"Baking Flavors & Extracts",
"Container",
"Cooking & Baking Ingredients",
"Dried Flowers",
"Fruits & Vegetables",
"Gift Cards",
"Health",
"Health & Beauty",
"Invisibility",
"Love",
"Music & Sound Recordings",
"Seasonings & Spices",
"Water"
],
"url": "https://polinas-potent-potions.myshopify.com",
"vendors": [
"Clover's Apothecary",
"Polina's Potent Potions",
"Ted's Apothecary Supply"
]
}
今回は、以下のmetafieldsを使用していきましょう。
以下のような形式で、メタフィールドに値を登録してください。
{
"noshi_product_id": string
}
shop オブジェクトに値を登録する際は、以下のmetafieldsSetの Adming GraphQL API を使用しましょう。
以下が、サンプルコードになります。
mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
metafieldsSet(metafields: $metafields) {
metafields {
key
namespace
value
createdAt
updatedAt
}
userErrors {
field
message
code
}
}
}
これで、shop オブジェクトのメタフィールドに値を登録することができました。
それでは次に、カートページから「のし」商品を選択する部分の実装方法について考えていきましょう。
カードページから「のし」商品を選択する方法
カートページから「のし」商品を選択する際には、Ajax API を利用することになります。
以下が、Shopify 公式のドキュメントになります。
今回は、カートに商品を追加する処理を行いたいので、Cartについてみていきましょう。
以下のドキュメントになります。
以下が、商品をカートに追加する際のサンプルコードになります。
let formData = {
'items': [{
'id': 36110175633573,
'quantity': 2
}]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
{
"items": [
{
"id": 36110175633573,
"title": "Red Rain Coat - Small",
"key": "794864229:03af7a8cb59a4c3c45595c76fa8cb53c",
"price": 12900,
"line_price": 12900,
"quantity": 2,
"sku": null,
"grams": 0,
"vendor": "Shopify",
"properties": {},
"variant_id": 794864229,
"gift_card": false,
"url": "/products/red-rain-coat?variant=794864229",
"featured_image": {
"url": "http://cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893",
"aspect_ratio": 1.0,
"alt": "Red rain coat with a hood"
},
"image": "http://cdn.shopify.com/s/files/1/0040/7092/products/red-rain-coat.jpeg?v=1402604893",
"handle": "red-rain-coat",
"requires_shipping": true,
"product_title": "Red Rain Coat",
"product_description": "A bright red rain coat for rainy days!",
"product_type": "Coat",
"properties" : null,
"variant_title": "Red",
"variant_options": ["Red"],
"options_with_values": [
{
"name": "Color",
"value": "Red"
}
]
}
]
}
上記のサンプルコードにある通り、カートに追加したい商品のvariant Id があれば、Ajax API を動かすことができます。
この Ajax API をカートページから実行する部分を Shopify のストアフロントに実装すれば、Shopify に「のし」機能を導入することは可能ですね。
後は、Shopify のカスタムアプリを作成して、具体的なコードを書いていけば、問題無く実装できそうです。
ここからは、非エンジニアの方にむけて、Shopify アプリを用いて「のし」を実装する方法について解説していきます。
Shopify アプリを用いて熨斗（のし）の実装を行う方法
それでは、Shopify アプリを用いて熨斗（のし）の実装を行う方法を解説していきます。
今回紹介するのは、シンプルのし（熨斗）アプリというアプリです。
以下が、Shopify 公式のアプリストアになります。
今回は、以下の記事を参考にしています。
こちらのアプリの機能について解説していきます。
シンプルのし（熨斗）アプリの機能
シンプルのし（熨斗）アプリは、非常にシンプルな「のし」機能を Shopify ストアに導入できる専用のアプリです。
以下が、公式のご利用ガイドになります。
以下の画像のように、カートページで「のし」の追加注文を簡単に実現できます。
こちらは、Shopify の Ajax API を用いて実装されているものと思われます。
また、冠婚葬祭用の「のし」を、デフォルトで多数用意しています。
また、表示する「のし」の種類や価格は、簡単に設定できます。
また、Shopify の商品管理ページから「のし」の追加を簡単に行えます。
非常にシンプルで安価なのしアプリです。カスタムアプリを作成して「のし」を導入するのが難しい場合に、選択肢の一つに入ってくるかと思います。
最後に
ここまでで、Shopify の Ajax API と shop のメタフィールドを用いて「のし」を実装する方法と、Shopify アプリを用いて「のし」を実装する方法について解説しました。
お疲れさまでした。
Discussion