Shopify ストアでのしを実現する方法を徹底解説！

はじめに

今回は、Shopify ストアでのしを実現する 2 つの方法について解説していきます。

今回は、以下の記事を参考にしています。
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": "noshi_setting",
      "namespace": "noshi_app",
      "ownerId": "gid://shopify/Shop/67358163174",
      "value": "{\"noshi_handle\": \"のし\"}",
      "type": "json"
    }
  ]
}

各設定項目について詳しく見ていきましょう。まず、メタフィールドの key と namespace です。今回は、key に noshi_setting、namespace に noshi_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 データを文字列にエスケープしたものを設定します。

{
  "noshi_handle": "のし";
}

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

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

これで、ストアのメタフィールドにのし機能の情報を設定できました。

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

ここまででコーディングを用いてセット販売を行う方法は終了です。

アプリを用いてのし機能を導入する方法

Shopify アプリの「シンプルのし（熨斗）アプリ」を用いて、のし機能を導入します。以下の記事を参考に解説していきます。

Shopify で商品購入時にのしを設定する方法とアプリについて徹底解説！

「シンプルのし（熨斗）アプリ」は、Shopify でのしの追加注文を簡単に実現できるアプリです。

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

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

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

アプリをインストール

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

「シンプルのし（熨斗）アプリ」アプリストア

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

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

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

テーマにのし機能を追加

「のし設定」ページの「ストアにのし機能を表示」セクションからのし機能をカートページに追加します。

のし機能を追加したいテーマを選択し、「のし選択機能を追加」の「カートページに追加」ボタンをクリックすると、テーマにのし機能を自動追加できます。

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

のし設定

のしの価格・表示するのしの種類を設定します。

のしの価格を設定

のしの価格の設定は、「のし設定」ページの「価格（一律）」セクションで設定します。

価格を入力し、「保存する」ボタンをクリックすると、価格を設定できます。

表示するのしの種類の設定

表示するのしの種類の設定は、「のし設定」ページの「のしの種類」セクションで設定します。該当するのしを選択し、「保存する」ボタンをクリックすると、表示するのしの設定ができます。

のしの種類の追加

続いて、のしの種類の追加を行います。ストアに合わせたオリジナルののしを追加できます。

まず、左側のメニューの「商品管理」をクリックして、「商品管理ページ」に移動してください。

のしを選択してクリックしてください。

以下のページに遷移します。

のしの追加は「バリエーション」セクションで行います。「バリエーションを追加」をクリックしてください。

「バリエーションを追加する」ページに遷移します。オプション・価格設定・在庫・配送を設定して、「バリエーションを保存する」ボタンをクリックすることで、のしを追加できます。

カートにのしを追加

カートにのしを追加します。カートページに移動してください。

「のしを追加」ボタンをクリックしてください。

以下のモーダルが表示されます。用途・表書き・送り主・のしのかけ方・備考を入力してください。

「のしを追加」ボタンをクリックすることで、のしを追加できます。

見た目のカスタマイズ

見た目のカスタマイズをします。

以下の画像は編集できる箇所を表しています。

ボタンのテキスト・背景色・文字の色・枠線の太さ・枠線の色・ボタンの丸み・位置を編集できます。

用途欄のラベルテキスト、表書き欄のラベルテキスト・プレースホルダーを編集できます。

送り主入力欄のラベルテキスト・プレースホルダーを編集できます。

のしのかけ方欄のラベルテキスト、備考入力欄のラベルテキスト・プレースホルダーを編集できます。

「シンプルのし（熨斗）アプリ」の詳しい機能については、以下の記事を参考にしてみてください。

【Shopify アプリ】シンプルのし（熨斗）アプリについて徹底解説｜ご利用ガイド

終わりに

今回は、Shopify ストアでのしを実現する 2 つの方法について解説しました。

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

参考記事

• Shopify で商品購入時に「のし」を設定する方法とアプリについて徹底解説！

• 【Shopify アプリ】シンプルのし（熨斗）アプリについて徹底解説｜ご利用ガイド