1. Top
  2. ブログ一覧
  3. Shopify公式アプリ「Checkout Blocks」だけでギフトラッピング機能は実装できるのか?
Eコマース

Shopify公式アプリ「Checkout Blocks」だけでギフトラッピング機能は実装できるのか?

公開日

2024.12.12

Shopify公式アプリ「Checkout Blocks」だけでギフトラッピング機能は実装できるのか?のサムネイル

ECサイトの運営者にとって、顧客体験の向上や売上拡大のために、カスタマイズ機能の追加は欠かせません。特に、ギフトラッピング機能は、贈り物として商品を購入する際に重要な要素となります。Shopify Plusプランなら無料で利用できるShopify公式アプリ「Checkout Blocks」を使えば、チェックアウトページにギフトラッピング機能を追加できるのか検証してみました。

Shopify公式アプリ「Checkout Blocks」とは?

「Checkout Blocks」は、Shopify Plusプランのストアで無料で利用できる公式アプリです。このアプリを使うことで、ノーコードまたはローコードでチェックアウトページを拡張できます。具体的には、カスタムテキスト、画像、フォーム要素などをチェックアウト画面に挿入でき、顧客が注文完了までのフローで追加の情報を入力したり、特定のオプションを選択したりすることが可能になります。ギフトラッピング、メッセージカード追加、特別なプロモーション告知など、顧客体験を向上させる様々な要素を柔軟に組み込みやすい点が特徴です。

ギフトラッピング機能の実装検証

ギフト設定は大きく分けて「注文単位」と「商品単位」の2パターンが考えられます。

1. 注文単位のギフトラッピング

Checkout Blocksをインストールします。

alt text

インストール後、アプリの設定画面から「Add a block」をクリックし、新しいブロックを作成します。

alt text

Custom fieldを選択します。

alt text

ちょうどギフトメッセージのテンプレートがあるので、それを選択します。

alt text

フィールドのラベルやkeyを設定します。ここでは「gift_message」としました。
入力後、保存します。

alt text

作成後、ブロックを有効化します。

alt text

ありがたいことにSetup guideがあるので、それに従ってチェックアウト画面に埋め込みましょう。 「Add to editor」をクリックします。

alt text

情報ページをターゲットにして、ブロックを追加します。

alt text

shop payでも表示されるようにしておきましょう。設定後、保存します。

alt text

せっかくなので、ギフトの差出人も入力できるようにしましょう。
先ほどのブロック設定画面に戻り、新しいfiledを追加します。

alt text

Text inputを選択し、ラベルとkeyを設定します。ここでは「gift_sender」としました。

alt text

alt text

alt text

一通り設定したので、実際に商品をカートに入れて確認してみましょう。 チェックアウト画面でギフトメッセージと差出人の入力欄が表示されていれば成功です。shop payでも表示されています。

alt text

alt text

注文詳細画面を見ると、ちゃんと入力した情報が表示されています。

alt text

以上で、注文単位のギフトラッピング機能の実装が完了しました。ただし、このままではギフトラッピングに追加料金を設定したり、有料化することはできません。そのため、追加のアプリ開発や既存アプリ導入が必要になります。

2. 商品単位でのギフトラッピング

商品単位でギフトラッピングを選択したい場合、商品ごとにLine Item Propertiesを付与したいところですが、現時点でCheckout BlocksはLine Item Propertiesの追加がサポートされていません。サポートされるのは以下の要素のみです。

  • Order Metafield
  • Order note attribute
  • Order note

alt text

そのため、商品ごとにギフトラッピングの選択や指示を行うことは、Checkout Blocks単体では困難です。もし商品単位でギフトラッピング機能を実現したい場合は、以下のような代替策を検討できます。

  • 商品ページでLine Item Propertiesを追加できるUIを構築し、顧客が商品をカートに入れる段階でギフト選択を行う。
  • 注文単位でのメモ欄に「商品Aだけギフトラッピング希望」というような自由記述を顧客に促し、受注処理時に店舗側で対応する。
  • 外部アプリやカスタムアプリでCheckouts APIを活用し、独自に商品単位オプションを挿入・編集できる仕組みを作る。

alt text

わかったこと

  • Checkout Blocksを使えば、チェックアウトページに簡単にテキストフィールドやメモ欄を追加可能。
  • 注文単位のギフトラッピング機能は容易に実装できるが、有料化や金額調整をするには追加の実装が必要。
  • 商品単位でのギフトラッピング機能は、Checkout Blocks単体では対応不可。代替的なワークフローや外部アプリが必要になる。
  • 外部決済サービス利用時は、Checkoutカスタマイズが無効になるケースがあるため、その点にも留意が必要。

運用のヒント

  • 外部決済(Amazon Payなど)を利用している場合は、ギフトラッピング機能が表示されない可能性があるので、その旨をFAQやサポートページで顧客に伝えておく。
  • ギフトラッピングの料金加算が必要な場合、Shopify Functionsやサードパーティアプリを活用して、注文額に反映できる仕組みを検討する。

まとめ

Shopify公式アプリ「Checkout Blocks」を利用すれば、Shopify Plusストアでチェックアウトページをある程度自由にカスタマイズできます。注文単位でのギフトラッピング指示やメッセージ入力は簡単に実装できますが、商品単位での指定や追加料金計算など、より高度な要望には別途開発が必要です。

今後、Checkout Blocksのアップデートでさらなるカスタマイズ性が期待できますが、現状では基本的な拡張にとどまり、高度な機能はアプリ開発や外部サービスへの依存が必要となるケースが多いと言えるでしょう。

次回は商品単位でのギフトラッピング機能を実現する方法や、ラッピングアイテムを追加する方法について実装する手順をご紹介したいと思います。乞うご期待ください。

参考