【徹底解説】Shopify アプリ「シンプルマイページクーポン｜お客様アカウント割引コード表示」でできること

【徹底解説】Shopify アプリ「シンプルマイページクーポン｜お客様アカウント割引コード表示」でできること

せっかく配った割引コードが、使われないまま期限を迎えていませんか。メールで送ったクーポンは受信箱の奥に沈み、トップページのバナーは次のキャンペーンで差し替わります。お客様が「あのコード、どこだっけ」と探した時点で、購入のテンションは一段下がっています。

「シンプルマイページクーポン｜お客様アカウント割引コード表示」は、この「探させる」状態をなくすための Shopify アプリです。ログインしたお客様のプロフィールページ（マイページ）にクーポンを常設し、コードの横に「コピー」ボタンを置きます。お客様は買い物の途中でマイページを開けば、いつでも同じ場所にクーポンがあり、ワンタップでコードをコピーしてチェックアウトに貼り付けられます。

この記事では、アプリの仕組み・メリットとデメリット・料金から始めて、管理画面の全画面と全設定項目、お客様アカウントのエディタでの操作、運用の実例、自作する場合のコード、他のアプリとの併用の考え方まで、ひととおり解説します。インストールを迷っている方も、入れた後に細かい挙動を確かめたい方も、この 1 本で判断できる内容にしました。

「シンプルマイページクーポン」とは

「シンプルマイページクーポン」は、UnReact が開発した Shopify アプリで、新しいお客様アカウントのプロフィールページにクーポンのブロックを追加します。アプリの管理画面で「クーポンセット」を登録すると ID が発行され、その ID をお客様アカウントのエディタに貼り付けると、マイページにクーポンが並びます。

新しいお客様アカウントのプロフィールページに置くブロック

Shopify のお客様アカウントには、従来のタイプと「新しいお客様アカウント」の 2 種類があります。新しいお客様アカウントはパスワードの代わりにワンタイムコードでログインし、注文一覧・注文詳細・プロフィールの各ページを、チェックアウトと同じエディタでカスタマイズできます。2023 年に登場してから段階的に既定になり、いま新規に開設したストアはこちらが選ばれています。

このアプリが対象にするのは、その新しいお客様アカウントの「プロフィール」ページです。プロフィールページには標準で「お客様連絡先」と「住所」のセクションがあり、その上下にアプリのブロックを差し込めます。「シンプルマイページクーポン」はここに「クーポン」という見出しのセクションを追加し、その中に登録したクーポンを縦に並べます。

ID を貼るだけ、という仕組み

管理画面でクーポンを登録して保存すると、そのセット専用の「クーポンID」が自動で発行されます。ID は英数字とハイフンからなる文字列で、マーチャントが決める必要はありません。エディタ側のブロック設定には「Coupon ID」という入力欄が 1 つだけあり、ここに ID を貼り付けると、ブロックはその ID に対応するセットを読みに行きます。

この方式の利点は、ブロックとデータが切り離されていることです。ブロックを 2 つ置いて別々の ID を入れれば、別のクーポンセットを並べられます。逆に、キャンペーンの内容を変えたいときは管理画面のセットを書き換えるだけで済み、エディタを開き直す必要がありません。ID はセットを削除しない限り変わらないので、一度貼ったら貼りっぱなしで運用できます。

このアプリがやらないこと

機能を絞ってあるので、何をしないかも先に書いておきます。

• 割引そのものは作りません。Shopify 管理画面の「ディスカウント」で作ったコードを、文字列として登録して表示します
• コードが実在するかの照合はしません。入力ミスがあってもそのまま表示されるので、登録後に Shopify 側のコードと見比べてください
• お客様の情報は一切読みません。顧客タグや購入履歴による出し分けはできず、ログインした全員に同じ内容が出ます
• 表示先はプロフィールページだけです。カート・チェックアウト・注文詳細・オンラインストアのテーマには何も追加しません

「できないこと」がはっきりしているぶん、設定で迷う場所がありません。登録するのは画像・コード・見出し・利用条件の 4 つで、エディタ側で入れるのは ID の 1 つだけです。

「シンプルマイページクーポン」のメリット

買う直前のお客様にクーポンが見える

マイページを開くのは、注文履歴を見たい・住所を直したい・もう一度買いたい、という目的を持ったお客様です。つまり購入に近いところにいる人が集まる場所で、そこにクーポンが常設されていれば、思い出してもらうための送信やバナーの張り替えが要りません。メールの開封率に左右されず、ログインするたびに同じ場所で目に入ります。

コピーボタンで入力ミスが減る

クーポンコードを文章で載せるだけだと、お客様はスマートフォンで長押しして範囲を選び、チェックアウトまで覚えて戻る必要があります。このアプリはコードを入力欄の形で表示し、横の「コピー」ボタンを押すとその行のコードだけがクリップボードに入ります。大文字小文字の打ち間違いや、似た文字の読み違いがなくなり、「コードが無効です」で離脱する場面を減らせます。

キャンペーンの切り替えに Shopify のエディタを触らなくてよい

マイページの表示内容は、管理画面のクーポンセットを保存した瞬間に切り替わります。月替わりのキャンペーンを回すときも、担当者が触るのはアプリの管理画面だけで、お客様アカウントのエディタは最初の設定以降は開かずに済みます。エディタはチェックアウトの設定と同じ場所にあるため、触る人を限定したいストアほどこの分離が効きます。

20 言語のお客様にそれぞれの言語で表示される

お客様に見える見出し「クーポン」とボタン「コピー」は、お客様がストアを表示している言語に合わせて自動で切り替わります。対応は日本語と英語を含む 20 言語です。海外のお客様が多いストアでも、言語ごとにブロックを作り分ける必要はありません。クーポンごとの「見出し」と「利用条件」はマーチャントが入力した文字列がそのまま出るので、多言語で出し分けたい場合は言語別のセットを用意する形になります。

お客様の個人情報に触らない

このアプリが Shopify に求める権限は「ファイルの読み取りと書き込み」だけです。クーポン画像をストアの「ファイル」に保存するために使い、顧客・注文・商品のデータには一切アクセスしません。個人情報の取り扱いに関する審査区分も最も軽いレベルで、アプリを入れることでプライバシーポリシーの見直しが必要になる、という心配がありません。

「シンプルマイページクーポン」のデメリット

ログイン前のお客様には届かない

表示先がお客様アカウントの中なので、ログインしていないお客様や、アカウントを持たないゲスト購入のお客様には見えません。新規のお客様にクーポンを配る目的なら、オンラインストア側のバナーやポップアップのアプリと役割を分ける必要があります。このアプリは「すでにアカウントを持っているお客様に、もう一度買ってもらう」ための道具だと考えてください。

従来のお客様アカウントでは使えない

新しいお客様アカウント専用です。ストアが従来のお客様アカウント（旧タイプ）のままだと、エディタにブロックを追加する場所がなく、マイページにも何も出ません。Shopify 管理画面の「設定」>「お客様アカウント」で、どちらのタイプが有効かを先に確認してください。切り替え自体は Shopify の設定で行えますが、ログイン方法が変わるため、お客様への案内とセットで検討することになります。

お客様ごとの出し分けはできない

顧客タグ・購入回数・会員ランクでクーポンの内容を変えることはできません。ログインした全員に同じセットが表示されます。これは「顧客データを読まない」という設計の裏返しで、出し分けが必要なストアには向きません。代わりに、ブロックを複数置いて「全員向け」「期間限定」のようにセット単位で並べることはできます。

ブロック設定のラベルが英語になる

エディタのブロック設定に出る項目名「Coupon ID」と説明文は英語のまま表示されます。Shopify の仕様で、お客様アカウント拡張の設定ラベルは翻訳できないためです。入力するのは ID の 1 つだけなので運用上の支障はありませんが、日本語の管理画面に慣れていると少し戸惑う点として挙げておきます。お客様に見える文言はすべて日本語になります。

料金プラン

料金は月額 3.99 ドルの単一プランで、機能の制限や上位プランはありません。年額プランは 39.99 ドルで、月額を 12 か月払うより 2 か月分安くなります。インストールから 7 日間は無料で試せるので、クーポンを 1 つ登録してマイページに出るところまでを、料金が発生する前に確かめられます。

プランの選択は Shopify の課金画面で行い、アプリ側に料金の設定画面はありません。価格は Shopify App Store のページに載っているものがそのまま適用されます。無料期間のうちにアンインストールすれば請求は発生しません。

インストール

インストールの手順は他の Shopify アプリと変わりません。Shopify 管理画面の左下にある「設定」から「アプリと販売チャネル」を開き、アプリストアへ進みます。

アプリストアで「マイページクーポン」と検索するか、Shopify App Store のアプリページを直接開き、「インストール」を押します。権限の確認画面には「ファイルの読み取りと書き込み」だけが表示されるはずです。確認して進むと、続けて料金プランの画面が出るので、無料体験を開始すると管理画面が開きます。

インストールしただけではマイページに何も表示されません。次の章で解説する管理画面でクーポンを登録し、発行された ID をお客様アカウントのエディタに貼って保存する、という 3 段階を経て初めて表示されます。

アプリ管理画面の構成

管理画面はサイドバーの「クーポン一覧」「初期設定」「設定」の 3 ページと、クーポン一覧から入る「クーポンを作成」「クーポンを編集」の 2 画面で構成されています。インストール直後に開くのは「クーポン一覧」です。

• クーポン一覧 … 登録済みのクーポンセットを表で管理する主画面です。新規作成と削除の入口でもあります
• クーポンを作成 … 設定名とクーポンの内容を入れて保存すると、ID が発行されて編集画面に切り替わります
• クーポンを編集 … 保存済みのセットを開く画面です。ID のコピーと内容の変更をここで行います
• 初期設定 … マイページに表示するまでの 6 手順をスクリーンショット付きで案内するページです
• 設定 … 管理画面の表示言語と、同じ開発元のアプリの紹介を置いた画面です

見た目に関する設定項目は管理画面にもエディタにもありません。クーポンの見え方はお客様アカウントのデザイン（色・フォント）に自動で合わせる作りで、マーチャントが決めるのは「何を表示するか」だけです。

各画面の説明

ここからが本記事の本体です。5 つの画面を、設定項目と操作ボタンを 1 つずつ取り上げて解説します。

「クーポン一覧」画面

アプリを開いて最初に表示される画面です。上部に「初期設定」のカードがあり、その下に登録済みのクーポンセットが表で並びます。右上の「クーポンを作成」から新規作成へ進みます。

表の列は次の 4 つです。

• 設定名 … マーチャントがセットを見分けるために付けた名前です。お客様の画面には出ません
• クーポンID … エディタのブロック設定に貼り付ける ID です。一覧では表示のみで、コピーは編集画面から行います
• クーポン数 … そのセットに登録されているクーポンの件数です。コードが空の行も件数に含みます
• 更新日 … 最後に保存した日付です。表示形式はブラウザの言語設定に従います

行をクリックすると、そのセットの編集画面が開きます。初期設定カードには「初期設定ガイドへ」のボタンと、「本アプリは新しいお客様アカウント専用です。従来のお客様アカウントには対応していません。」という注記が置かれています。マイページに出ないときに真っ先に疑う条件なので、毎回目に入る場所にあります。

セットが 1 件も無いときは、表の代わりに「クーポンがまだありません」という案内と作成ボタンだけが表示されます。

「クーポン一覧」画面のクーポンセットの削除

行頭のチェックボックスを入れると、表の上に「1を選択済み」のような件数と「削除」ボタンが現れます。複数の行を選んでまとめて消すこともできます。

「削除」を押すと確認ダイアログは出ず、すぐに「削除しました。」と表示されて一覧から消えます。取り消しはできないので、チェックを入れた行をよく確かめてから押してください。

削除したセットの ID がエディタのブロックに残っていても、エラーにはなりません。そのブロックは何も表示しなくなるだけです。また、そのセットでアップロードしたクーポン画像はストアの「ファイル」に残り続けます。不要なら Shopify 管理画面の「コンテンツ」>「ファイル」から消してください。

「クーポンを作成」画面の設定名

「クーポンを作成」を押すと、空の入力画面が開きます。最初の項目が「設定名」で、その下に「クーポン 1」の入力欄がまとまっています。

設定名は必須で、50 文字以内です。入力欄の下に「管理画面での識別用です。お客様には表示されません。」とあるとおり、マーチャントだけが見る名前なので、「新規会員向け」「2026 春セール」のように用途が分かる名前を付けておくと、セットが増えても迷いません。空のまま保存しようとすると、欄が赤くなり「設定名を入力してください。」と表示されて保存が止まります。

「クーポンを作成」画面のクーポン画像

各クーポンの先頭にある「クーポン画像」は、点線の枠に「画像を選択」ボタンが置かれた欄です。ボタンを押してファイルを選ぶか、枠の中にドラッグして指定します。任意の項目で、何も選ばなければ画像なしのクーポンとして表示されます。

選んだ画像はその場でプレビューされ、「保存する」を押したときにストアの「ファイル」へアップロードされます。1 ファイルの上限は 10 MB で、それを超えると保存全体が失敗します。横長のバナーでも縦長の画像でも、アップロード時に縦横比が記録され、マイページでは切り取られずに元の比率で表示されます。差し替えたいときは、もう一度「画像を選択」から別の画像を選んで保存すれば、新しい画像に切り替わります。以前の画像は「ファイル」に残ります。

「クーポンを作成」画面のクーポンコード・見出し・利用条件

画像の下に、文字で入力する 3 項目が続きます。

• クーポンコード … お客様がコピーする割引コードです。Shopify の「ディスカウント」で作成したコードをそのまま入力します。欄の下に「空欄のクーポンはお客様のマイページに表示されません。」とあるとおり、コードが空の行はマイページに出ません。セットの中にコードが 1 件も無いと「クーポンコードを 1 件以上入力してください。」と出て保存できません
• 見出し … クーポンの上に太字で出る一言です。「初回のご注文が 10% オフ」のように、何の特典かを書きます。任意で、空ならその行は描画されません
• 利用条件 … クーポンの下に薄い文字で出る補足です。「他のクーポンとの併用はできません」「2026 年 3 月末まで」のような注意書きを入れます。入力欄は 2 行分ですが文字数の制限はなく、任意です

コードには大文字小文字の区別がそのまま残ります。Shopify のディスカウントコードは入力時に大文字小文字を区別しないため、お客様がコピーしたコードがそのまま通りますが、見た目を揃えるなら作成時のコードと同じ表記で入れておくと安心です。

「クーポンを作成」画面のクーポンを追加・このクーポンを削除

「クーポンを追加」を押すたびに「クーポン 2」「クーポン 3」と入力欄のまとまりが増えます。1 つのセットに入れられるのは 20 件までで、上限に達するとボタンを押しても増えません。

クーポンが 2 件以上あるときは、各クーポンの右上にゴミ箱のアイコン（このクーポンを削除）が表示され、押すとその 1 件だけが消えます。最後の 1 件は消せない仕様なので、1 件だけのときはアイコン自体が出ません。マイページでの並び順は、この画面での上から下の順と同じです。順番を変えたいときは、入力欄の内容を入れ替えてください。

「クーポンを作成」画面の保存する

右下の「保存する」は、何かを入力または変更するまで押せません。押すと設定名と各クーポンの検証が走り、問題がなければ画像のアップロードとセットの保存が行われます。

保存に成功すると、画面がそのセットの編集画面に自動で切り替わり、先頭のカードにクーポンIDが表示されます。登録できるセットは 50 件までで、超えると「登録できるクーポンセットの上限に達しています。」と表示されて保存されません。画像のアップロードに失敗した場合は「画像のアップロードに失敗しました。」と出て、セット全体が保存されずに止まります。

「クーポンを編集」画面のクーポンID と IDをコピー

一覧の行をクリックすると編集画面が開きます。画面の見出しには設定名が表示され、先頭のカードに「クーポンID」が出ます。ID は保存時に自動で発行された値で、変更も再発行もできません。

ID の右にある「IDをコピー」を押すと、画面上部に「IDをコピーしました」というトーストが出て、クリップボードに ID が入ります。この値をお客様アカウントのエディタの「Coupon ID」に貼り付けます。コピーに失敗したときは「IDのコピーに失敗しました」と赤いトーストが出るので、その場合は ID の文字列を手で選択してコピーしてください。

「クーポンを編集」画面で内容を変更する

設定名・画像・コード・見出し・利用条件は、作成時と同じ欄でいつでも書き換えられます。「クーポンを追加」で件数を増やすことも、ゴミ箱アイコンで減らすこともできます。

変更して「保存する」を押すと「保存しました。」と表示され、マイページの表示はその瞬間から新しい内容に切り替わります。ブロックは表示のたびにセットを読みに行く作りなので、エディタ側で何かをし直す必要はありません。ID も変わらないため、貼り付け済みのブロックはそのまま使えます。変更が無い状態では「保存する」は押せないので、「押せない＝未保存の変更が無い」と覚えておくと、保存漏れに気づけます。

「初期設定」画面

サイドバーの「初期設定」は、マイページにクーポンを表示するまでの流れを 6 つの手順で案内するページです。「1. クーポンを作成してIDをコピーする」「2. お客様アカウントのエディタを開く」「3. ブロックを追加する」「4. クーポンIDを貼り付ける」「5. 保存する」「6. 完了」の順に、それぞれスクリーンショットが付いています。

手順 1 には「クーポンを作成」、手順 2 には「エディタを開く」、末尾には「クーポン一覧へ」のボタンがあります。「エディタを開く」は、Shopify 設定の「チェックアウト」一覧を経由せず、お客様アカウントのエディタをプロフィールページを表示した状態で新しいタブに開きます。エディタの中でページを切り替える手間がないので、ブロックを置くときはこのボタンから入るのが近道です。

「設定」画面の言語設定

サイドバーの「設定」を開くと、最初に「言語設定」のカードがあります。「言語を選択」で表示言語を選び、「変更する」を押すと、その場で管理画面全体が切り替わります。

選べるのは、チェコ語・デンマーク語・ドイツ語・英語・スペイン語・フランス語・イタリア語・オランダ語・ノルウェー語・ポーランド語・ポルトガル語（ブラジル）・ポルトガル語（ポルトガル）・フィンランド語・スウェーデン語・トルコ語・タイ語・日本語・中国語（簡体字）・中国語（繁体字）・韓国語の 20 言語です。英語に切り替えると、サイドバーの項目名から表の列名、ボタンの文言まで英語になります。

この設定はいま使っているブラウザに保存されます。別のパソコンやブラウザで開くと Shopify 管理画面の言語に合わせた表示に戻るため、スタッフごとに表示言語を変えたい場合は、それぞれのブラウザで選び直してください。ここで変わるのは管理画面だけで、お客様のマイページに出る文言はお客様側の言語で決まります。

「設定」画面のおすすめアプリ

言語設定の下には「おすすめアプリ」のカードがあり、UnReact の他のアプリが並びます。クリックするとそれぞれのアプリストアのページが開きます。右上の × で閉じられ、閉じた状態もブラウザに記憶されます。アプリの動作には関係しない紹介欄なので、不要なら閉じたままで問題ありません。

お客様アカウントのエディタへの追加

管理画面で ID を手に入れたら、次はお客様アカウントのエディタです。テーマエディタではなく、Shopify 管理画面の「設定」>「チェックアウト」の「カスタマイズ」から開くエディタで、アプリの「初期設定」画面の「エディタを開く」からも直接開けます。

左パネルの「プロフィール」ページは「お知らせバー」「ヘッダー」「メイン」「フッター」に分かれており、アプリのブロックは「メイン」の中に追加します。上部中央のページ切り替えが「プロフィール」になっていることを確かめてから、「メイン」の「ブロックを追加」を押します。

「UR: Customer Accounts Coupon」の見出しの下にある「UR: Mypage Coupon」を選ぶと、ブロックが「メイン」の一覧に入り、既定ではプレビューの一番上（お客様連絡先の上）に置かれます。並び順はドラッグで変えられます。

ブロックをクリックすると左パネルに「ブロック設定」が開き、項目は「Coupon ID」の 1 つだけです。ここに管理画面でコピーした ID を貼り付けます。

貼り付けるとプレビューがすぐに切り替わり、そのセットのクーポンが表示されます。ここで 1 つ注意があります。入力欄にカーソルを置いたまま右上の「保存」を押すと、最初のクリックがフォーカスを外すだけで消費され、保存が走らないことがあります。貼り付けたらプレビューの余白を一度クリックしてから「保存」を押してください。

保存すると「保存」ボタンがグレーに戻り、お客様の画面にも反映されます。ブロック設定の下にある「アプリを管理」はアプリの管理画面へのリンク、「ブロックを削除」はこのブロックをページから外すボタンです。

マイページでの見え方

ブロックには見出し「クーポン」が付き、その中にクーポンが縦に並びます。1 件ごとの構成は上から、クーポン画像（設定したときだけ）、見出し（太字。設定したときだけ）、クーポンコードの入力欄と「コピー」ボタン、利用条件（薄い文字。設定したときだけ）の順です。

「コピー」を押すと、その行のコードだけがクリップボードに入ります。見出し「クーポン」とボタン「コピー」は、お客様の表示言語に合わせて 20 言語で切り替わります。

スマートフォンでは幅いっぱいに表示され、画像も横幅に合わせて縮みます。色やフォントはストアのお客様アカウントの設定（チェックアウトと共通のブランディング）に従うため、アプリ側で色を指定する項目はありません。

運用の実例（こう設定すると、こう見える）

設定項目は少ないので、組み合わせ方で運用の幅が決まります。実際によく使う 3 つのパターンを、どの画面で何を入れるかまで含めて書きます。

常設の会員特典と期間限定キャンペーンを分ける

「会員はいつでも送料無料」のような常設の特典と、「3 月限定 15% オフ」のような期間限定の特典を 1 つのセットに混ぜると、キャンペーン終了のたびに常設分まで触ることになります。管理画面でセットを 2 つ作り、エディタで「UR: Mypage Coupon」のブロックを 2 つ追加して、それぞれの「Coupon ID」に別の ID を入れてください。

キャンペーンが終わったら、期間限定のブロックの ID を空にするか「ブロックを削除」で外すだけで、常設のブロックには影響しません。管理画面のセットを消す必要もなく、次のキャンペーンで同じセットの中身を書き換えて再利用できます。

画像なしで始めて後からバナーを足す

クーポン画像は任意なので、画像を用意する時間がないときは見出し・コード・利用条件だけで登録しても、きちんとした見た目になります。まず文字だけで公開し、デザイナーからバナーが届いたら編集画面の「画像を選択」で追加して保存する、という順番で進められます。

画像を使う場合は、横長（たとえば 1500×500）のバナーをおすすめします。アップロード時に縦横比が記録されるので、横長でも正方形に切られることはありません。スマートフォンでは横幅に合わせて縮むため、画像の中の文字は大きめに作っておくと読みやすくなります。

割引コードの作り方（Shopify のディスカウントとの関係）

アプリに登録するコードは、Shopify 管理画面の「ディスカウント」で先に作っておきます。「ディスカウントを作成」から「ディスカウントコード」を選び、コード名・割引の種類・適用条件・有効期間を設定します。

マイページに常設する用途では、ディスカウント側の設定が実質の「利用条件」になります。次の 3 点を決めておくと、アプリの「利用条件」欄に書く内容も自然に決まります。

• 顧客あたりの利用回数 … 常設クーポンを毎回使えてよいかどうかです。1 回限りにするなら「お一人様 1 回まで」と利用条件に書きます
• 最低購入金額 … 「5,000 円以上のご注文で」のような条件は、ディスカウント側で設定したうえで、利用条件欄にも同じ文言を入れます
• 有効期間 … ディスカウントの終了日を過ぎるとコードは無効になりますが、アプリ側の表示は自動では消えません。終了日が来たら管理画面でセットを書き換えるか、ブロックの ID を空にしてください

コードを変更したときは、アプリ側のクーポンコードも同じ値に書き換えます。アプリは Shopify のディスカウントと連動していないため、片方だけ変えるとお客様が無効なコードをコピーすることになります。

うまく表示されないときの確認順

このアプリは、表示できるものが無いときにエラーを出さず、ブロックごと非表示にする作りです。「何も出ない」ときは次の順に確認すると早く原因にたどり着けます。

1. ストアが新しいお客様アカウントになっているか。Shopify 管理画面の「設定」>「お客様アカウント」で確認します。従来タイプではブロック自体を置けません
2. エディタの「プロフィール」ページの「メイン」に「UR: Mypage Coupon」があるか。あっても右上の「保存」が押せる状態なら未保存です
3. ブロック設定の「Coupon ID」が空でないか、管理画面の一覧にある「クーポンID」と 1 文字ずつ同じか。前後に空白が入っていると一致しません
4. 削除したセットの ID が残っていないか。削除後はそのブロックが何も出さなくなります
5. セットの中のクーポンコードがすべて空になっていないか。コードが空の行は出ないため、全行が空だとブロックごと消えます
6. 画像が出ないときは、保存時に「画像のアップロードに失敗しました。」が出ていなかったか。10 MB 以内の画像ファイルで選び直して保存します
7. 保存したのに古い内容が出るときは、お客様アカウントのページを再読み込みします。エディタのプレビューも古い状態が残ることがあるので、エディタ側も再読み込みすると確実です

ここまで確認して出ない場合は、アプリをアンインストールして入れ直すよりも、まず別のブラウザのシークレットウィンドウでお客様としてログインし直してみてください。エディタのプレビューと実際のお客様画面で状態が違う、というケースのほとんどは、エディタの未保存か画面のキャッシュです。

コードで自作する場合

新しいお客様アカウントのページは Liquid でカスタマイズできません。テーマの「customers/account.liquid」を編集しても、新しいお客様アカウントには反映されないためです。自作するなら、Shopify CLI で Customer Account UI Extension を作ることになります。ここでは「コピーボタン付きのクーポンを 1 件出す」最小構成を示します。

まず拡張の設定ファイルで、置く場所（ターゲット）と、エディタに出す設定項目を宣言します。プロフィールページのブロックとして置き、クーポンコードをエディタから入力できるようにするなら次のようになります。

api_version = "2026-01"

[[extensions]]
name = "My Coupon Block"
handle = "my-coupon-block"
type = "ui_extension"

  [[extensions.targeting]]
  module = "./src/Coupon.tsx"
  target = "customer-account.profile.block.render"

  [extensions.settings]
    [[extensions.settings.fields]]
    key = "coupon_code"
    type = "single_line_text_field"
    name = "Coupon code"

「target」がエディタの「ブロックを追加」に出てくる場所で、「settings.fields」がブロック設定の入力欄になります。設定欄に使える型は 1 行テキスト・複数行テキスト・数値・日付・真偽値などに限られ、画像を選ぶピッカーはありません。画像を出したければ URL を文字列で受け取る形になり、画像のアップロード先は別に用意することになります。

次にブロック本体です。お客様アカウントの拡張では素の HTML タグが描画されず、Polaris Web Components（s-text-field や s-button など）で組みます。コピーは「s-clipboard-item」にコードを持たせ、ボタンの「commandFor」でそれを指す書き方です。

import '@shopify/ui-extensions/preact';
import { render } from 'preact';

export default async () => {
  render(<CouponBlock />, document.body);
};

function CouponBlock() {
  const code = shopify.settings.value?.coupon_code as string | undefined;
  if (!code) return null;

  return (
    <s-section heading="クーポン">
      <s-grid gridTemplateColumns="1fr auto" gap="small-100" alignItems="center">
        <s-text-field label="クーポンコード" labelAccessibilityVisibility="exclusive" value={code} readOnly />
        <s-clipboard-item id="coupon-clip" text={code} />
        <s-button commandFor="coupon-clip" command="--copy">コピー</s-button>
      </s-grid>
    </s-section>
  );
}

「shopify.settings.value」にエディタで入力した値が入ってきます。コードが空ならブロックごと何も描画しない、という分岐も入れてあります。見出しとボタンの文言を固定で書いているので、このままでは日本語のお客様にしか合いません。20 言語で出し分けるなら「locales」フォルダに言語ごとの JSON を置き、「shopify.i18n.translate」で引く形に直すことになります。

ここまでは「エディタに入れた 1 件のコードを出す」だけの構成です。「シンプルマイページクーポン」と同じことをしようとすると、拡張のコード以外に次の作業が付いてきます。

• Shopify パートナーアカウントとアプリの作成、Shopify CLI の導入と「shopify app deploy」での配信
• クーポンを複数件まとめて登録・編集する管理画面（Remix などで作るサーバー側）と、その保存先（ショップのメタフィールドなど）
• 画像をストアの「ファイル」にアップロードして URL を得る処理と、縦横比を記録して「s-image」に渡す処理
• API バージョンが上がるたびの追随と、ブロックが黙って消えたときの切り分け（拡張の実行時エラーは画面にもログにも出ません）

「クーポンを並べてコピーさせる」ために、アプリ 1 本ぶんの開発と保守を抱えることになります。月額 3.99 ドルで同じ機能が手に入ることを考えると、自作が得になるのは、他の独自機能と同じ拡張にまとめたい場合に限られます。

他のお客様アカウント拡張アプリと一緒に使うときの考え方

プロフィールページにブロックを置けるアプリは、このアプリだけではありません。Stack: Customer Account Blocks、Genius Account、LEO ‑ Customer Account Blocks、Howdy 新しいお客様アカウント 新規会員登録フォームなど、お知らせや FAQ、登録フォームを置くアプリと同じページを共有することがあります。ここでは、それらと組み合わせるときの決め方を整理します。各アプリの料金や機能の比較ではなく、同じエディタの中でどう棲み分けるかの話です。

同じページに置けるブロックは 1 種類ではない

お客様アカウントのエディタの「メイン」には、複数のアプリのブロックを好きな数だけ追加できます。したがって「クーポンはこのアプリ、お知らせは別のアプリ」という分担は自然に成り立ちます。問題になるのは、別のアプリでもクーポンの案内を書いてしまい、同じページにコードが 2 か所に出る状態です。

決め方は単純で、コードをコピーさせる場所は「シンプルマイページクーポン」のブロックに一本化し、他のアプリのブロックには「マイページでクーポンをご確認ください」のような誘導文だけを書きます。2 か所にコードを書くと、片方を更新し忘れたときに古いコードが残り、お客様はどちらが正しいか判断できません。

ブロックの並び順と重複を決める

エディタの「メイン」の中では、ブロックをドラッグして並び順を変えられます。お客様が最初に目にするのは一番上のブロックなので、次の順に並べると迷いが少なくなります。

• 一番上にクーポン … マイページを開いた目的が何であれ、特典があることを先に見せます
• その下にお知らせやフォーム … 営業日の案内や追加項目の入力は、特典を見た後でも遅くありません
• お客様連絡先と住所は既定の位置のまま … Shopify 標準のセクションを動かすと、住所変更の導線を探すお客様が出ます

同じアプリのブロックを 2 つ置くときは、片方の ID を変え忘れて同じセットが 2 回出ていないかをプレビューで確かめてください。同じ ID を 2 つのブロックに入れてもエラーにはならず、同じクーポンが 2 回並ぶだけなので、気づきにくい状態です。

どちらを先に入れるか

複数のアプリを検討しているなら、入れる順番は「お客様に何をしてほしいか」で決めます。

• もう一度買ってほしい … クーポンが先です。このアプリを入れて、ID を貼って保存するまで 5 分ほどで終わります。マイページに特典が出る状態を作ってから、他の案内を足すほうが効果を測りやすくなります
• 登録時に情報を集めたい … 会員登録フォームを拡張するアプリが先です。フォームの項目が決まってから、登録後に見せる特典としてクーポンを置くと流れが自然です
• 問い合わせを減らしたい … FAQ やお知らせのブロックが先で、クーポンは後からでも追加できます

どの順で入れても、このアプリの設定は「管理画面でセットを作る」「エディタで ID を貼る」の 2 つだけなので、後から足しても他のアプリの設定をやり直すことにはなりません。

まとめ

「シンプルマイページクーポン｜お客様アカウント割引コード表示」は、クーポンを「配る」アプリではなく、配ったクーポンを「使ってもらう」ためのアプリです。管理画面で画像・コード・見出し・利用条件を登録し、発行された ID をお客様アカウントのエディタに貼るだけで、ログインしたお客様のマイページにコピーボタン付きのクーポンが常設されます。

設定項目は少なく、できないことははっきりしています。ログイン前のお客様には見えず、お客様ごとの出し分けもできません。その代わり、キャンペーンの切り替えは管理画面の保存だけで済み、お客様の個人情報には一切触れず、20 言語のお客様にそれぞれの言語で見出しとボタンが出ます。

リピーター向けの特典をすでに用意しているのに、使われる率が思ったほど上がらないストアには、置き場所を変えるだけで効く施策です。7 日間の無料体験のうちに、クーポンを 1 つ登録してマイページに出るところまでを確かめてみてください。

• Shopify App Store でアプリの詳細と最新の価格を確認できます

おすすめ Shopify アプリ

UnReact では、設定を絞って「これだけやる」アプリを多数公開しています。マイページのクーポンと組み合わせやすいものをいくつか紹介します。

• シンプルマイページバナー｜お手軽顧客アカウント画像 … 同じ新しいお客様アカウントに画像バナーを置くアプリです。クーポンの上にキャンペーンのビジュアルを置き、その下にコードを並べる構成が組めます
• シンプル画像バナー｜お手軽広告バナーアプリ … オンラインストア側（テーマ）に画像バナーを置くアプリです。ログイン前のお客様への告知を担当させ、ログイン後はマイページのクーポンに引き継げます
• シンプルQRコード｜お手軽QRコード作成・印刷アプリ … 商品・コレクション・割引用の QR コードを作って印刷できます。店頭やチラシからマイページのクーポンへ誘導する使い方ができます
• シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション … 画像付きの複数カラムのドロップダウンナビゲーションを、コードに触れずに作れます