ネットショップでプレゼントを買おうとすると、必ず最初に「相手の住所」を聞かなければなりません。SNS でつながっているだけの相手、久しぶりに連絡を取った友人、社内でも部署が違う同僚。住所を尋ねた時点で、贈り物のサプライズは半分なくなります。そして多くの場合、住所を聞き出す手間そのものが面倒で、購入まで至りません。
このハードルを取り払うのが、いわゆる eギフト(ソーシャルギフト)です。購入者は宛先を入れずに商品を買い、受け取った URL を LINE や SNS で相手に送ります。受け取った側が自分で配送先を入力すると、その住所あてに商品が発送されます。
この記事で扱う「シンプルギフトURL|お手軽住所不要」は、その仕組みを Shopify ストアへ追加するアプリです。管理画面は 6 ページ、設定できる項目は管理画面側で 72 項目、商品ページのブロックで 16 項目、あわせて 88 項目あります。通知メールは 7 種類、ギフト注文のステータスは 13 種類です。この記事では、その画面と設定を 1 つ残らず、実際のスクリーンショットと一緒に見ていきます。あわせて、画面には表示されない上限値や反映タイミングといった、触ってみないと気づけない挙動もまとめました。
前半(とは・メリット・デメリット・料金)は、導入するかどうかを判断するための材料です。後半の「各画面の説明」からは、実際にストアへ入れたあとに開く画面を 1 枚ずつ解説しています。すでにインストール済みの方は、後半だけを拾い読みしていただいても構いません。
設置の手順だけを最短で追いたい方には、別途ご利用ガイドを用意しています。
Shopify で住所不要のeギフトを贈れる「シンプルソーシャルギフト|LINE・SNSで贈れるプレゼント」のご利用ガイド
※ このご利用ガイドは、アプリ名称を変更する前の題で公開しています。内容は同じアプリのものです。
購入者に宛先を入力させないまま商品を売り、受取人が自分で配送先を入力する。この 1 点に絞り込んだ Shopify アプリです。ラッピングや熨斗(のし)、カタログギフトといった周辺機能は持たず、「住所を知らないまま贈れる」ことだけを担当します。
実際の処理は次の順番で進みます。ストア側の操作が必要なのは、最後の発送だけです。
ポイントは 5 番です。受取人の住所は、購入者の注文には一切書き込まれません。購入者の注文とは別に、受取人の住所とメールアドレスで作られた注文が立ちます。だから発送作業で追跡番号を共有しても、それが飛ぶ先は受取人であって、贈り主ではありません。
「住所を隠す」と一口に言っても、実装のしかたによって漏れ方は変わります。購入者の注文の配送先を受取人の住所で上書きする方式だと、購入者が自分の注文履歴を開いたときに受取人の住所が見えてしまいます。Shopify の標準の発送通知も、注文の顧客(=購入者)へ飛びます。
このアプリは注文そのものを分けることで、その経路を最初から作りません。管理画面のギフト注文一覧にも、受取人の氏名・住所・メールアドレスは表示されません。ストア側が受取人の情報を見られるのは、ギフト注文の詳細ページを開いたときだけです。
受取人が開く画面は、Shopify のテーマの中ではなく、アプリが配信する専用ページです。URL の形は https://ストアのドメイン/apps/egift/{ランダムなトークン} で、トークンは注文ごとに発行されます。
受取人に入力してもらう項目は次のとおりです。
上部には贈り主の名前・ギフトメッセージ・商品のサムネイル・受取手続きの期限が並びます。受け取った方は「ギフトが届いている」と分かった状態で入力に進めます。
ギフト購入の導線で宛先の入力欄が出ません。商品ページでチェックを入れ、贈り主名とメッセージを書いて、専用の購入ボタンを押すだけです。住所を尋ねるという最大の離脱ポイントが導線から消えます。
発送は受取人の住所で作られた別注文で行われます。購入者の注文には受取人の情報が残らないため、「うっかり追跡番号を贈り主へ送ってしまった」という事故が構造的に起きません。
商品ページに出るチェックボックスの文言、贈り主名やメッセージ欄の見出し、購入ボタンの文字、サンクスページに出る受取URLの案内、7 種類のメールの件名と本文。読者の目に触れるテキストは、ほぼすべて管理画面かテーマエディタから差し替えられます。コードを書く必要はありません。
受取人がいつまでも住所を入力しないギフトは、必ず発生します。その扱いを「ストアが 1 件ずつ判断する」か「購入者の請求先住所へ自動で送ってしまう」かで選べます。運用の手間をどこまで自動化したいかに合わせられます。
管理画面は日本語・英語を含む 20 言語で表示できます。受取人が開くフォームも同じ 20 言語を持っており、購入者が見ていた言語がそのまま受取人へ引き継がれます。海外向けのストアでも、受け取る側が読めない画面に飛ばされることがありません。
テーマへのブロック追加は、アプリのホーム画面のボタンから行えます。テーマエディタが開いた状態でブロックが挿入済みになるので、左のリストからブロックを探して並べる作業が要りません。
導入前に知っておいたほうがよい制約もあります。ここは正直に書きます。
ギフトとして購入するとき、商品はカートを経由しません。「ギフトとして購入」を押すと専用の決済ページへ直行します。そのため、ギフトと通常商品を 1 回の会計でまとめ買いすることはできません。 「ついでにもう 1 点」という購入が起きにくくなるので、客単価を上げたいストアにはマイナスに働きます。
eギフトの送料はアプリ側の 1 項目(全国一律の金額)で決まります。Shopify の配送プロファイルや地域別の送料テーブルは効きません。重量別・地域別の細かい送料を設定しているストアでは、ギフトのときだけ送料の考え方が変わることになります。
受取ブロックの表示テキストは 21 項目ありますが、そのうち 4 項目はデータを取得する前に描画される文言のため、管理画面で書き換えても画面には出ません。入力欄は存在するのに効かないので、気づきにくい箇所です。後半の「受取ブロックの表示テキスト」で、どの 4 項目かを具体的に挙げます。
受取人が開くフォームは、OGP とファビコンは差し替えられますが、色やレイアウトを自由に組むことはできません。テーマのデザインをそのまま持ち込みたい場合には物足りなく感じます。
このアプリは「住所不要で贈る」ことだけを担当します。ギフト包装・メッセージカードの印刷・熨斗といった、贈答まわりの他の機能は別のアプリで補う必要があります。
料金は次のとおりです。
無料プランはありませんが、7 日あればテスト注文で購入から受け取りまでを一度通すには十分です。最新の金額は、アプリのストアページでご確認ください。
インストールは Shopify 管理画面から行います。かかる時間は 1 分ほどです。


インストールが終わると、管理画面の左メニューにアプリが追加されます。
このアプリが持つ画面は 5 つです(もう 1 つ、削除前に開く画面があります)。
下の画像がホーム画面です。上に件数、下に手順が並ぶ構成になっています。

ここからが本題です。6 画面を、カードごとに分けて全部見ていきます。
ページ最上部のカードです。対応の判断がいる 4 つの数字だけが並びます。
右上の「一覧を見る」を押すと、絞り込み済みのギフト注文一覧へ移動します。確認待ちとエラーがどちらも 0 なら、その日は何もしなくて構いません。毎朝ここだけ見る運用に落とし込めます。
ホームの真ん中にある青いカードです。インストール直後に何をすればよいかが 3 ステップで書かれており、それぞれにボタンが付いています。
インストールしただけではストアフロントに何も表示されません。この 3 ステップを終えて初めて、購入から受け取りまでが通ります。

商品ページへブロックを置くためのカードです。
ここで注意したいのは、このボタンで追加されるのは必ず商品テンプレートだという点です。トップページやコレクションページには追加されませんし、追加してもブロックは動きません。
購入者に受取URLを見せるためのカードです。ボタンが 2 つ並びます。
この 2 つはテーマエディタではなくチェックアウトエディタから追加します。テーマエディタを探しても出てこないので、必ずこのボタンから開いてください。片方しか追加しないと、購入直後か後日かのどちらかでしか受取URLを見せられません。

ホーム画面のいちばん下にあるカードです。
ここで切り替わるのはアプリの管理画面だけで、ストアフロント側の言語とは独立しています。日本語で管理しながら英語のストアを運営する、といった組み合わせができます。
発行済みの受取URLを追いかける画面です。個人情報(メールアドレス・住所)はこの一覧には出ません。

一覧の上にある検索欄は 注文番号・贈り主名で検索 です。#1049 のような注文番号か、購入者が商品ページで入力した贈り主名で絞り込めます。受取人の名前では検索できません(一覧が個人情報を持たないためです)。
テーブルの列は 6 つです。
行のどこか(注文番号以外)をクリックすると、そのギフトの詳細ページへ移動します。同じ行の中で押し分ける形になるので、慣れるまでは意識して押してください。
検索欄の下にある ステータス のボタンから、13 種類をチェックボックスで選べます。

既定では「発送完了」と「キャンセル」を除いた 11 種類にチェックが入っています。つまりこの画面を開いた時点で、まだ終わっていないギフトだけが表示されています。過去の全件を見たいときは すべてクリア を押して絞り込みを外します。この初期状態は、慣れないうちは「件数が合わない」と感じる原因になるので、覚えておくと迷いません。
一覧の下にあるカードです。13 種類のステータスが、対応の観点で 4 つに分類されています。
対応が必要
エラー・要確認
待機中
完了
待機中の 4 つは、通常であれば数分で次の状態に変わります。しばらく見ていて変わらないときだけ気にすれば十分です。

一覧の行をクリックすると開く、1 件ぶんの画面です。上から順に、発送についての案内、ステータス、ギフト情報、購入者、受取人、タイムライン、手動操作と並びます。

いちばん上の青い案内に書かれているとおり、発送作業は「発送注文を開く」から行います。 ここを取り違えると事故になるので、2 つのボタンの違いを押さえてください。
発送は後者で行います。前者を発送してしまうと、贈り主に配送の通知が飛びます。
ステータスカードには現在の状態が 1 つだけ表示されます。エラーのときは、エラーコードとメッセージが赤字でここに出ます。
ギフト情報カードには 4 項目が並びます。
購入者から「URL が届かない」と問い合わせが来たら、ここからコピーして案内するのがいちばん早い経路です。その下の購入者カードには氏名とメールアドレス、受取人カードには入力された宛先が表示されます。受取人カードは、住所が入力されるまで空のままです。
そのギフトがどこまで進んだかを、4 つの日時で確認できます。
いちばん役に立つのは 受取人開封 です。ここに日時が入っていれば、少なくとも URL は相手に届いて開かれています。空欄のままなら URL が渡っていない可能性が高いので、購入者に再共有をお願いするのが近道です。

いちばん下のカードです。状況に応じて 3 つの操作ができます。
3 つ目は、受取手続き期限が切れていて、かつ受取人がまだ住所を入力していないギフトにだけ表示されます。期限内のギフトはまだ受け取ってもらえる可能性があるので、そもそもボタンが出ません。4 つ目もステータスがエラーのときだけ現れます。
なお、キャンセルと返金はこの画面では行いません。Shopify の注文ページから実施します。ストア側で注文をキャンセルすると、ギフト注文のステータスも自動でキャンセルに変わります。
このアプリの動きのルールを決めるページです。カードは 6 枚あります。最初のカードが送料です。

入力欄の左端には、ストアの通貨記号が自動で表示されます。日本円のストアなら ¥ が出ます。この 1 項目だけで送料が決まり、Shopify の配送料金設定は参照されません。
画面には書かれていない決まりが 3 つあります。
500.5 のような値は入力エラーになります。勝手に四捨五入はしません。米ドルなら小数 2 桁まで入ります2 枚目のカードには 4 項目が入っています。
2 つ目は運用が大きく変わる項目です。
後者を選んでいても、住所が取得できない場合や、その住所が受取可能国の外だった場合は、自動的に管理者確認待ちへ切り替わります。 勝手に送れない宛先へ送ろうとはしません。
3 つ目には保存の条件があります。期限切れ前リマインドは、受取手続き期限より小さい値でないと保存できません。 期限 14 日に対してリマインド 14 日を入れると、発行した直後からリマインド期間に入って毎日メールが飛ぶため、はじめから弾いています。期限 14 日なら 3 日前あたりが実用的です。
3 枚目のカードです。
国名で検索して追加でき、複数選べます。ここで選んだ国が、そのまま受取人フォームの国・地域プルダウンの選択肢になります。
未選択のままだとストア所在国だけになります。海外へも贈れるようにしたいときは、必ずここで追加してください。逆に日本国内だけに限定したいなら、空欄のままで構いません。選ぶ国は「実際に発送できる国」に限ってください。送れない国を入れておくと、受け取れない住所が入力されてしまいます。

4 枚目のカードです。受取URLを LINE や SNS で共有したときのプレビューを整えます。贈り主が相手に送ったときに最初に目に入る部分なので、ここを埋めるとギフトらしさが出ます。
画像はボタンから選びます。まだ設定していない項目には 画像をアップロード、すでに設定済みの項目には現在の画像のサムネイルと 画像を変更 が表示されます。
ここで 1 つだけ挙動が違います。OGP画像とファビコンは、ファイルを選んだ時点でアップロードされます。 画面上部の保存バーを押すのを待ちません。押しても問題はありませんが、「保存していないから反映されていないはず」という前提は成り立ちません。

5 枚目のカードです。7 つのチェックボックスが並びます。文面はメール設定ページ、送るか送らないかはここ、と役割が分かれています。
すべて初期状態でオンです。運用に合わせて減らして構いませんが、1 つ目だけはオンのままにしておくことをおすすめします。サンクスページを閉じてしまった購入者が受取URLに辿り着く、最後の経路になるためです。

6 枚目のカードです。サンクスページと注文状況ページに出る受取URLブロックの文言を上書きできます。項目は 21 個あり、後半の 4 つはサンクスページ専用です。
まず前半の 17 項目です。括弧内は既定の文言です。
入力欄のうすい文字が既定の文言です。空欄のままにすると、その既定が使われます。変えたいものだけ打ち替えるのが基本の使い方です。

後半の 4 項目は、サンクスページにだけ出る文言です。

ここで、画面を見ているだけでは絶対に気づけない制約を挙げます。21 項目のうち次の 4 つは、書き換えても画面には反映されません。
理由は、この 4 つがデータを取りに行く前に描画される文言だからです。入力欄は他の項目と同じように並んでいて、保存もできます。それでも表には出ません。手をかけるなら、共有見出し・説明文・コピーボタンの 3 つから始めるのが効率的です。
もう 1 つ、この設定はサンクスページと注文状況ページで共有されます。 「サンクスページだけ別の言い回しにする」ことはできません。

どこか 1 つでも値を変えると、画面上部に未保存の変更を知らせるバーが出ます。
カードごとの保存ボタンはありません。6 枚のカードをまとめて 1 回で保存する作りなので、あちこち触ってから最後に 1 回押せば済みます。

購入者・受取人に届くメールの文面を作るページです。

いちばん上の共通設定カードには 1 項目だけあります。
その下のタブが URL発行 / 受取人入力完了 / 受取手続き完了 / リマインド / 発送通知 / 期限切れ通知 / 購入者宛発送 の 7 つに分かれています。タブを選ぶと、すぐ下に「送信先:〇〇 / 送信タイミング:〇〇」の 1 行が出ます。どれを編集しているのか分からなくなったら、この行を見れば判断できます。
タブごとに件名と本文の 2 項目があります。編集できるのは次の 14 項目です。
本文エディタは右上で「リッチテキスト」と「HTML」を切り替えられます。リッチテキストのときは太字・斜体・下線・見出し・箇条書き・番号付きリスト・リンクのボタンが使えるので、HTML を書けなくても整った文面が作れます。細かく組みたいときだけ HTML へ切り替えてください。
本文の下に 使用できる変数 の一覧があり、それぞれ実際に入る値の例が添えられています。主な変数は次のとおりです。
{shopName} … ストア名{shopify_order_number} … 注文番号{sender_name} … 贈り主名{recipientUrl} … 受取URL{purchased_at} … ご購入日時{validity_days} … 有効日数{expires_at} … 受取手続き期限の日時{receiver_name} … 受取人氏名{tracking_number} … 追跡番号{tracking_company} … 配送会社使える変数はタブごとに違います。 受取人の氏名やお届け先住所は、受取人本人に届く受取手続き完了タブでしか使えません。購入者宛のメールに受取人の個人情報を差し込めないよう、変数の側で仕切ってあります。
有効日数には工夫があります。{validity_days} は設定画面の現在値ではなく、その注文を発行したときの実際の日数を出します。発行後に受取手続き期限を 14 日から 7 日へ変えても、先に発行済みのメールに嘘の日数が入りません。

書いた文面は 2 通りの方法で確認できます。
アドレスを入れるまでテスト送信ボタンは押せません。まずプレビューで文面を整え、最後に実際の受信環境で改行や画像の出方を確かめる、という順番が無駄がありません。
このページにも 保存 と 破棄 があります。7 タブぶんの編集をまとめて保存します。

ページ最下部のカードです。自動で送られるものの、文面を編集できないメールが列挙されています。現在は GDPRデータ開示(送信先はストア管理者、顧客データの開示要求を受信したとき)の 1 種類だけです。
法令対応のために送る内容なので、編集できないほうが安全という判断です。存在を知っておけば十分です。
アプリを削除する前に開く画面です。進行中のギフト注文が残っていれば、注文番号とステータスが一覧で表示されます。

アプリを削除すると、これらのギフトの受取手続きは止まります。 受取人が URL を開いても住所を入力できなくなるため、削除前に住所確認・期限延長・キャンセルのいずれかで片付けておいてください。進行中が 0 件なら、安全に削除できる旨が表示されます。
一時的にアプリを止めたい、プランを見直したい、といった場面で真っ先に開く画面です。移行の判断材料になります。
ストアフロントに出るものは 3 つあり、追加する場所がそれぞれ違います。
テーマエディタでサンクスページのブロックを探しても見つかりません。ここは最初につまずきやすい分かれ道です。
下の画像は、商品テンプレートのテーマエディタを開いた状態です。右側のプレビューに、チェックボックスと「eギフトとは?」のリンクが並んでいます。

左のリストからブロック名をドラッグすると、位置を動かせます。購入ボタンのすぐ上に置くと購入者が気づきやすく、迷う余地も減ります。

左のリストでブロック名をクリックすると、設定パネルが開きます。設定は「コンテンツ設定」と「追加設定」の 2 グループ、あわせて 16 項目です。
最初の 2 項目が、ブロックを表示する商品の条件です。
判定の決まりは 2 段構えです。両方とも空欄にすると、全商品でブロックが表示されます。 どちらかを設定すると、「いずれかに該当する商品」だけに絞られます。両方を同時に満たす必要はありません。
対象商品が多いストアは、「eギフト対象」という自動コレクションを 1 つ作って、そちらを指定すると管理が楽になります。商品にタグを付けるだけで対象を出し入れでき、ブロックの設定を触り直す必要がなくなります。50 件の上限にもかかりません。
対象外の商品では、ブロックの HTML・CSS・JavaScript がそもそも出力されません。表示だけ消えて中身が残る、という作りではないので、関係ない商品ページの表示が重くなる心配もありません。

次の 6 項目が、購入者が最初に目にする部分の文言です。
ここにも表示条件があります。見出しと説明文の両方が入っているときだけ、リンクとモーダルが表示されます。片方だけではリンクごと出ないので、「リンクが出ない」と思ったらこの 2 つを確認してください。
チェックを入れたあとに現れる部分の文言です。

文字数の上限は、設定ではなく実装側で固定されています。贈り主名は 50 文字、メッセージは 300 文字です。 超えるとカウンタが赤くなってエラー文が出て、ギフト購入ボタンを押しても先に進めません。貼り付けで上限をすり抜けた場合も、送信のタイミングでもう一度チェックされます。
残りの 3 項目は、購入者へ前提を伝えるための文章です。
{max} は各項目の上限文字数に置き換わります{shippable_areas} と書くと、基本設定の受取可能国で選んだ国名に自動で置き換わります。空欄にすると表示されません2 つ目は埋めておくことを強くおすすめします。受取人が住所を入力する仕組みだと知らずに買われると、「海外に送れないのか」という問い合わせに後からつながります。国名は購入者が見ている言語で表示され、日本語以外の言語では英語の国名になります。
最後のグループには 1 項目だけあります。
余白や文字色をテーマに合わせたいときだけ使ってください。書いた CSS はこのブロックの中だけに適用されるので、テーマ全体のレイアウトを壊す心配はありません。

この 2 つはチェックアウトエディタから追加します。ブロック側に設定項目はありません。表示される文言は、管理画面の受取ブロックの表示テキストで決まります。

注文状況ページ側には、受取人の状況を示すタグ(未入力・入力済み・期限切れ・利用不可・確認中)が付きます。未入力のときだけ再共有の案内が出る作りです。購入者が後から URL を確認しに戻れる場所なので、サンクスページとセットで必ず追加してください。
左のアプリ一覧で「追加済み」の数が 2 になっていれば、両方が有効になっています。

設定した結果が、お客様の側にどう出るかを見ていきます。
チェックを入れていない状態では、チェックボックスと「eギフトとは?」のリンクだけが並びます。通常の購入導線をじゃましません。

チェックを入れると、贈り主名とメッセージの入力欄、配送可能地域の案内、ギフト専用の購入ボタンが現れます。入力欄の右下には「0 / 50」「0 / 300」という文字数カウンタが常に表示されるので、購入者は上限を超える前に気づけます。

このとき、通常の「カートに追加」ボタンは押せなくなります。ギフトと通常購入のどちらなのかを、画面の側ではっきりさせる作りです。
「eギフトとは?」のリンクを押すと、仕組みの説明と番号付きの利用ステップが出ます。

このモーダルには背景を暗くする幕がありません。 テーマの固定ヘッダーと重なって崩れるのを避けるための作りで、そのぶんダイアログに枠線と影を付けて浮かせています。閉じる操作は、右上の「×」・下の閉じるボタン・ダイアログの外側のクリック・Esc キーのいずれでも効きます。
受取人が URL を開くと、次の画面が出ます。上に贈り主のメッセージ・商品・受取手続きの期限、下に配送先の入力欄が並びます。

スマートフォンの縦画面で開かれる前提の作りになっており、送信ボタンは画面下部に固定されています。
ここからは、管理画面を眺めているだけでは分からない部分です。設定値の裏でアプリが何をしているかを知っておくと、トラブルの切り分けが速くなります。
このアプリは定期処理をいくつも持っています。それぞれ走る間隔が違うので、「設定したのにすぐ変わらない」ことがあります。
最後の 1 つは保険の仕組みです。デプロイ中の一時障害などで、ギフトとして買われたのにアプリ側の記録が作られなかった注文を、後から Shopify の注文と突き合わせて拾い直します。拾えた場合は静かに直り、直せなかった場合だけストアへ通知が飛びます。
受取人が入力した氏名・住所・電話番号・メールアドレスは、暗号化して保存されます。そして、個人情報の保持日数で決めた日数が注文完了から経過すると、自動で消えます。初期値は 180 日です。
長期間ずっと止まっているギフト(エラー・確認待ち・受取人入力待ちのまま放置されたもの)も、条件を満たすと同じように消えます。ストア側で削除作業をしなくても、個人情報が無期限に残り続けることはありません。
受取URLには、購入者が見ていた言語の情報が付きます。受取人のフォームはその言語を最優先で採用するため、購入者が日本語で買えば受取人にも日本語の画面が出ます。 受取人がどの国からアクセスしても、贈り主と同じ言語の画面になります。
受取URLのトークンは注文ごとに発行されるランダムな値で、連番ではありません。加えて、そのトークンが発行されたストアと、アクセスしてきたストアが一致するかを毎回照合しています。他のストアからトークンを持ち込んでも開けません。
ログインせずに購入された場合、サンクスページには受取URLを表示しません。本人確認ができない画面に URL を出さないための判断です。この場合はメールで受取URLを送ります。「URL発行通知(購入者向け)」をオンにしておく理由の 1 つがここにあります。
ここまでの機能を自分で作れないか、という発想は当然出てきます。どこまでが簡単で、どこからが重いのかを、実際のコードで確かめてみます。
まずは見た目です。テーマのセクションにアプリブロックを足す場合、Liquid はこの程度で書けます。チェックボックスと、その下に隠れている入力欄の組み合わせです。
{%- comment -%} 商品ページに置くギフト切替ブロック {%- endcomment -%}
<div class="my-gift" data-gift-block>
<label>
<input type="checkbox" data-gift-toggle>
{{ block.settings.toggle_label | default: 'ギフトとして贈る' }}
</label>
<div data-gift-fields hidden>
<label for="gift-sender">贈り主名</label>
<input id="gift-sender" type="text" maxlength="50" data-gift-sender>
<span data-gift-counter="sender">0 / 50</span>
<label for="gift-message">メッセージ</label>
<textarea id="gift-message" maxlength="300" data-gift-message></textarea>
<span data-gift-counter="message">0 / 300</span>
</div>
</div>
maxlength を付けているので、キーボード入力の範囲ではこれだけで上限を守れます。ただし貼り付けや IME の確定では素通りすることがあるため、送信のタイミングでもう一度長さを確認する必要があります。
次に JavaScript です。チェックの状態で入力欄を出し入れし、文字数カウンタを更新します。
document.querySelectorAll('[data-gift-block]').forEach((block) => {
const toggle = block.querySelector('[data-gift-toggle]');
const fields = block.querySelector('[data-gift-fields]');
const sender = block.querySelector('[data-gift-sender]');
const message = block.querySelector('[data-gift-message]');
const sync = () => {
fields.hidden = !toggle.checked;
block.querySelector('[data-gift-counter="sender"]').textContent =
`${sender.value.length} / 50`;
block.querySelector('[data-gift-counter="message"]').textContent =
`${message.value.length} / 300`;
};
toggle.addEventListener('change', sync);
sender.addEventListener('input', sync);
message.addEventListener('input', sync);
sync();
});
ここで 1 つ落とし穴があります。テーマによっては、バリエーションを切り替えた瞬間に商品フォームごと DOM が差し替わります。上のコードは読み込み時に 1 回しか走らないので、差し替え後のチェックボックスにはイベントが付きません。「チェックしても入力欄が出ない」という不具合になります。実際の対策としては、shopify:section:load イベントと MutationObserver の両方で未初期化のブロックを拾い直し、同じブロックを二重に初期化しないようフラグを立てる、という作りが要ります。
入力された贈り主名とメッセージを注文に載せます。カートを使う実装なら、line item properties に乗せるのがいちばん手軽です。
const form = document.querySelector('form[action*="/cart/add"]');
form.addEventListener('submit', () => {
if (!toggle.checked) return;
const add = (name, value) => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = name;
input.value = value;
form.appendChild(input);
};
add('properties[_is_gift]', 'true');
add('properties[sender]', sender.value.slice(0, 50));
add('properties[message]', message.value.slice(0, 300));
});
_ で始まるキーは購入者の画面に表示されないので、内部フラグに向いています。slice を入れてあるのが、ステップ 1 で触れた「貼り付けで上限をすり抜けた値」の保険です。
ここまでで、商品ページの見た目と注文への受け渡しはできました。ここから先が本番です。
1. 受取URLをどう発行し、どう守るか。 推測できない長さのトークンを注文ごとに発行し、有効期限を持たせ、他のストアから持ち込まれた値を弾く必要があります。トークンの流出は、そのまま「知らない誰かに商品が届く」事故になります。
2. 受取人の住所をどこへ保存するか。 テーマだけでは保存先がありません。外部にデータベースを持ち、氏名・住所・電話番号・メールアドレスを暗号化して保管し、一定期間後に自動で消す仕組みまで用意することになります。
3. 購入者に受取人の住所を見せない構造をどう作るか。 購入者の注文の配送先を上書きする方式では、購入者の注文履歴から受取人の住所が見えます。発送用の注文を別に立てるなら、在庫・売上・税の二重計上をどう扱うかを決めなければなりません。ここが設計でいちばん重い部分です。
4. 期限切れを誰が検知するか。 「14 日後に自動で期限切れにする」処理は、誰かが定期的に走らせないと起きません。サーバー側の定期実行と、失敗したときのやり直しが必要です。
5. 通知メールをどう送るか。 URL 発行・入力完了・リマインド・発送・期限切れと、通知の種類だけで 7 つあります。同じメールを二重に送らない仕組み(冪等性)も自前で用意することになります。
見た目だけならテーマの改修で数時間です。しかし 2 番以降は、外部のサーバー・データベース・定期実行・メール配信をそろえる話になります。自作の費用は、最初の 1 日ではなく、その後何年ぶんの保守で見積もるのが実際に近いです。
同じ「住所不要で贈る」を扱う Shopify アプリは他にもあります。それぞれ狙っている射程が違うので、代表的なものを見ておきます。掲載している価格・評価は、記事執筆時点でアプリストアに表示されていた値です。

開発は AnyReach、評価は 4.9(25 件)です。相手の住所を入力せずに贈れる eギフト機能を軸に、かなり手広い機能を持っています。
料金は $199/月・$299/月・$600/月の 3 段階、無料体験は 14 日、日本語と英語に対応しています。カタログギフト・大量配布・受取人の顧客化まで踏み込むなら、この価格帯を取りにいく価値があります。逆に「住所不要で贈れればよい」という要件だけなら、月額が 10 倍前後になる点は判断材料になります。

開発は Huckleberry, Inc.(ハックルベリー)、評価は 4.8(134 件)です。名前のとおり、ギフト設定に必要な機能を 1 本にまとめたアプリです。
料金は $9.90/月と $49/月の 2 段階、無料体験は 14 日、日本語対応です。贈答が売上の中心で、熨斗もラッピングも eギフトも全部必要というストアなら、アプリを 1 本に集約できる利点が大きくなります。レビュー件数が 134 件と多く、日本の贈答慣習に沿った運用実績が積み上がっている点も安心材料です。

開発はイロイト株式会社です。レビューはまだ付いていません。
料金は $49/月、無料体験は 14 日、日本語対応です。対象商品の絞り込みと eギフト専用送料という基本の押さえ方は近く、そこに外部システム連携とメッセージカードが乗った構成です。倉庫や在庫を外部システムで回しているストアは、ここが決め手になります。

開発は Giftnote、評価は 5(167 件)です。こちらは方向性が違い、ギフトメッセージの自動配信と受取人の顧客化を軸にしています。多通貨のデジタルギフトカード、グリーティングカード、法人ギフト、一括ギフト、複数宛先への配送に対応しています。
料金は $19/月と $99/月、無料体験は 30 日です。ただし管理画面は英語のみで、日本語には翻訳されていません。 そして前提として、宛先が分かっている通常の注文フローの上に成り立つアプリです。住所を知らない状態からは始められません。お中元・お歳暮のように宛先が手元にあり、受取人をリスト化してリピートにつなげたいストア向けです。
要件から逆算すると、線引きははっきりします。
「シンプルギフトURL|お手軽住所不要」は、機能を広げない代わりに月額を $19.99 に抑えた構成です。まずは住所不要のギフトが自分のストアで成立するかを試し、伸びたら多機能なアプリへ移る、という進め方とも相性がよくなっています。
このアプリが引き受けているのは、「相手の住所を知らない」という 1 点のせいで買われなかったギフトを、買える状態にすることです。購入者は宛先を入れずに買い、受取人が自分で住所を入力し、その住所で作られた別注文をストアが発送する。それだけの仕組みですが、途中に必要なもの(推測できない受取URL、期限の管理、個人情報の暗号化と自動削除、7 種類の通知メール、期限切れの自動処理)を全部そろえると、自作では到底割に合わない量になります。
設定は 88 項目ありますが、動かすまでに必ず触るのは 4 か所だけです。送料・受取手続き期限・受取可能国を保存し、商品ページにブロックを追加し、サンクスページと注文状況ページにブロックを追加する。残りの 80 項目あまりは、運用しながら必要になったときに開けば足ります。
無料体験は 7 日あります。その間にテスト注文を 1 本通して、購入・URL 共有・住所入力・発送までを自分の目で確かめておくと、判断に迷いがなくなります。
ギフト販売まわりでは、他にも用途を絞ったアプリを提供しています。組み合わせると贈答の導線をひととおり揃えられます。