Shopifyで顧客アカウント（マイページ）に画像バナーを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/09/15

はじめに

「会員だけに見せたいセールがあるのに、マイページには何も置けない」。お客様がログインして注文履歴を確認しているその画面こそ、いちばん熱心なリピーターが見ている場所です。ところが Shopify の新しいお客様アカウントには、独自の画像やお知らせを差し込む標準機能がありません。

Shopify は、商品登録から決済・配送までを 1 つの管理画面で扱えるネットショップ作成サービスです。標準機能で足りない部分は、Shopify App Store で配布されているアプリを追加して補います。

「シンプルマイページバナー｜お手軽顧客アカウント画像」は、新しいお客様アカウントのプロフィール・注文一覧・注文状況の 3 ページに画像バナーを表示する Shopify アプリです。やることは 2 つだけ。管理画面で画像をアップロードして URL をコピーし、お客様アカウントのエディタでブロックに貼り付けます。ブロックごとに画像が独立しているので、プロフィールにはポイント案内、注文一覧には送料無料キャンペーン、というように置き分けられます。PC とスマートフォンで別の画像を用意することもできます。

このガイドでは、インストールからバナーが表示されるまでの最短手順、管理画面の全項目、エディタの 4 つの設定、表示されないときの見直しポイントまでを順に説明します。

料金

プラン	料金	無料体験
Basic Plan（月払い）	$3.99 / 月	7 日間
Basic Plan（年払い）	$39.99 / 年（2 ヶ月分お得）	7 日間

アプリストア

シンプルマイページバナー｜お手軽顧客アカウント画像（Shopify App Store）

シンプルマイページバナー｜お手軽顧客アカウント画像のメイン画像。アイコンとキャッチコピー、スマートフォンのマイページに表示されたバナー

「シンプルマイページバナー」でできること

まず特徴を 5 つにまとめます。

プロフィール・注文一覧・注文状況の 3 ページに画像バナーを表示できます
管理画面で画像をアップロードし、URL をコピーしてブロックに貼り付けるだけで設定が終わります
設置したブロックごとに別のバナー画像を設定できます（同じページに複数置くこともできます）
PC とスマートフォンで別々の画像を使えます
バナーに任意のページへのリンクと、代替テキストを付けられます

マイページの 3 ページにバナーを出す

対象は新しいお客様アカウントの「プロフィール」「注文一覧（Orders）」「注文状況（Order status）」です。バナーは画像の縦横比をそのまま保って本文の幅いっぱいに表示されるので、横長のバナーを用意すればそのまま横長で出ます。

顧客アカウントのプロフィールページにバナーが表示されている様子

管理画面でアップロードして URL をコピーする

画像の置き場所を別途用意する必要はありません。アプリの設定画面に画像をドロップして「アップロードする」を押すと Shopify のファイル置き場に保存され、URL が発行されます。「URLをコピー」を押してブロックに貼るだけです。

管理画面で画像をアップロードして URL をコピーしている様子

ページごと・ブロックごとに別のバナーを設定する

設定はブロック 1 つ 1 つに保存されます。プロフィールと注文一覧で別の画像を出したり、注文状況のページだけバナーを 2 枚並べたりできます。

注文一覧ページに、プロフィールとは別のバナーが表示されている様子

PC とスマートフォンで画像を切り替える

「Banner image URL (desktop)」に PC 用の画像を入れておくと、ブロックの幅が 400px 以上のときは PC 用、それ未満ではスマートフォン用が表示されます。判定に使うのは画面の幅ではなく、バナーが置かれた本文カラムの幅です。

PC 用とスマートフォン用で別の画像が表示されている様子

リンクと代替テキストを付ける

「Banner link URL」を入れるとバナー全体がリンクになり、クリックすると新しいタブで開きます。「Banner alt text」は画像が表示できないときや読み上げソフトで使われる文言です。どちらも任意です。

アプリをインストールする

アプリストア: シンプルマイページバナー｜お手軽顧客アカウント画像

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリと販売チャネル」を開き、「Shopify App Store」へ移動します。
検索窓に「Customer Accounts Banner」と入力してアプリを探します。公開直後は検索結果に出ないことがあるので、その場合は上のアプリストアのリンクを直接開いてください。
アプリ詳細ページで「インストール」をクリックします。
権限の確認画面が開きます。このアプリが求める権限はファイルの読み書き（バナー画像を Shopify のファイル置き場に保存するため）だけです。内容を確認して「インストール」を押すと、料金プランの選択画面に進みます。プランを選ぶとアプリの設定画面が開きます。

インストール直後は何も表示されません。次の「まず最初にやる設定」を済ませると、お客様のマイページにバナーが出ます。

まず最初にやる設定（5 ステップ）

バナーが表示されるまでの最短ルートです。所要時間は 5 分ほどです。

アプリの「設定」画面にある「バナー画像をアップロードする」に画像をドロップし、「アップロードする」を押します。「アップロード済みの画像」に行が増えるので、その行の「URLをコピー」を押します。
サイドバーの「初期設定」を開き、手順 2 の「エディタを開く」を押します。お客様アカウントのエディタ（プロフィールページ）が新しいタブで開きます。
エディタ左側の「Main」にある「Add block」を押し、「UR: Customer Accounts Banner」を選びます。
右に開く「Block settings」の「Banner image URL」に、手順 1 でコピーした URL を貼り付けます。プレビューにバナーが出ます。
右上の「Save」を押します。これでお客様のプロフィールページにバナーが表示されます。

アプリの「初期設定」ページ。1 から 6 の手順がスクリーンショット付きで並んでいる

注文一覧や注文状況にも出したいときは、エディタ上部のページ名（Profile）を押してページを切り替え、手順 3〜5 を繰り返します。

このアプリは新しいお客様アカウント専用です。従来のお客様アカウント（Classic）を使っているストアでは、ブロックを置く場所そのものがありません。管理画面の「設定 → お客様アカウント」で新しいお客様アカウントに切り替えてから使ってください。

管理画面でできること

管理画面は「設定」「初期設定」「よくある質問」の 3 画面です。サイドバーのアプリ名の下に並びます。

「設定」画面

アプリを開くと最初に表示される画面です。上から「初期設定」「バナー画像をアップロードする」「アップロード済みの画像」「言語設定」「おすすめアプリ」のカードが縦に並びます。

アプリの「設定」画面。初期設定カードとバナー画像のアップロードカードが並んでいる

初期設定カード

「初期設定ガイドへ」ボタンを押すと、次の節で説明する「初期設定」画面に移動します。カードの下に「本アプリは新しいお客様アカウント専用です。従来のお客様アカウントには対応していません。」と書かれているとおり、Classic アカウントでは動きません。

バナー画像をアップロードする

このアプリの中心になるカードです。ここで発行した URL をエディタに貼り付けます。

「バナー画像をアップロードする」カード。画像を追加のドロップゾーンと、押せない状態のアップロードするボタン

画像を選ぶ

点線の枠に画像をドラッグするか、「画像を追加」を押してファイルを選びます。選べるのは画像ファイル（PNG・JPG・GIF・WebP など）だけで、1 回に 1 枚です。選んだ直後に、実際の表示に近い全幅のプレビューとファイル名が枠の上に出ます。

画像を選んだ直後の状態。全幅プレビューとファイル名が表示され、アップロードするボタンが押せるようになっている

ファイルサイズは 10MB までです。超えると送信の時点で失敗します。
画像を選ぶまで「アップロードする」は押せません（グレー表示）。
別の画像を選び直すと、プレビューは新しい画像に置き換わります。

アップロードする

「アップロードする」を押すと、画像は Shopify の「コンテンツ → ファイル」に保存されます。アプリ独自のサーバーには置きません。処理が終わると「画像をアップロードしました」と表示され、プレビューは消えて、下の「アップロード済みの画像」の先頭に行が増えます。

発行される URL の末尾には #1200x300 のように画像の横幅と高さが付きます。マイページ側はこの数字から縦横比を決めています。貼り付けるときにこの部分を消さないでください（消すと正方形で表示されます）。
Shopify 側の画像処理を最大 15 秒待ちます。それまでに終わらないと「画像のアップロードに失敗しました」になるので、少し待ってからもう一度押してください。ファイル自体は Shopify に残っていることがあります。
同じ画像を 2 回アップロードすると、ファイルは 2 つ作られ、一覧には別の行として並びます。

アップロード済みの画像

アップロードした画像の一覧です。新しいものが上に来ます。1 行に、サムネイル（幅 80px・高さ 40px に切り抜いて表示）、「画像URL」の欄、「URLをコピー」、ゴミ箱アイコン（削除）が並びます。

「アップロード済みの画像」の一覧。サムネイル・画像 URL・URL をコピー・削除が 1 行に並んでいる

画像URL: 読み取り専用の欄です。手で選択してコピーすることもできます。
URLをコピー: クリップボードに URL をコピーし、画面下に「URLをコピーしました」と表示します。コピーできなかったときは「URLのコピーに失敗しました」と出ます（ブラウザがクリップボードへのアクセスを許可していないときに起きます）。
削除（ゴミ箱アイコン）: その行を一覧から削除する操作です。確認ダイアログは出ません。ただし消えるのはアプリの一覧からだけで、Shopify の「コンテンツ → ファイル」に画像は残り、その URL を貼ってあるバナーも表示され続けます。一覧から消した URL は、ファイル画面から URL を取り直せば再び使えます（縦横の数字は付かないので、末尾に #横x縦 を手で足してください）。
一覧に件数の上限はありません。

「URLをコピー」を押した直後に画面下に表示される「URLをコピーしました」の通知

言語設定

アプリの管理画面の表示言語を切り替えます。「言語を選択」のプルダウンから選び、「変更する」を押して言語を変更すると、その場で切り替わります。日本語・英語・ドイツ語・フランス語・スペイン語・イタリア語・ポルトガル語（ブラジル / ポルトガル）・中国語（簡体字 / 繁体字）・韓国語・オランダ語・ポーランド語・トルコ語・スウェーデン語・ノルウェー語・デンマーク語・フィンランド語・チェコ語・タイ語の 20 言語です。

「言語設定」カード。言語を選択のプルダウンと変更するボタン

初期状態では Shopify 管理画面の言語に合わせて表示され、対応外の言語では英語になります。
選んだ言語はブラウザに保存されます。別のブラウザや別のスタッフアカウントで開くと初期状態に戻るので、その端末でもう一度選んでください。
ここで変えられるのはアプリの管理画面だけです。エディタのブロック設定のラベル（後述）は英語のまま変わりません。

「初期設定」画面

サイドバーの「初期設定」、または設定画面の「初期設定ガイドへ」から開きます。バナーを表示するまでの 6 つの手順が、スクリーンショット付きで並んでいます。

1. バナー画像をアップロードする
1. お客様アカウントのエディタを開く
1. ブロックを追加する
1. バナー画像URLを貼り付ける
1. 保存する
1. 完了

初期設定ページの手順 2。エディタを開くボタンが表示されている

手順 2 の「エディタを開く」を押すと、Shopify の「設定 → チェックアウト → カスタマイズ」を経由せずに、お客様アカウントのエディタがプロフィールページを開いた状態で新しいタブに開きます。エディタの場所を探す必要はありません。

初期設定ページの手順 4 と 5。ブロック設定への URL の貼り付けと、右上の保存ボタン

手順 6 の「設定画面へ」で「設定」画面に戻ります。複数のページやブロックに置くときは、同じ手順を繰り返します。

「よくある質問」画面

管理画面の表示言語が日本語のときだけ、サイドバーに「よくある質問」が出ます。質問をクリックして回答を開閉するだけの画面で、質問を開閉するほかに操作はありません。英語など他の言語ではこの項目自体が表示されません。

お客様アカウントのエディタでブロックを設定する

バナーの配置と設定は、アプリの管理画面ではなく Shopify の「お客様アカウントのエディタ」で行います。テーマエディタ（オンラインストアのテーマ）とは別物なので注意してください。

エディタを開く

開き方は 3 つあります。どれでも同じ画面です。

アプリの「初期設定」画面で「エディタを開く」を押す（プロフィールページが開きます。いちばん早い方法です）
Shopify 管理画面の「設定 → チェックアウト」で「カスタマイズ」を押し、上部のページ名から「Profile」「Orders」「Order status」を選ぶ
Shopify 管理画面の「設定 → お客様アカウント」から「カスタマイズ」を押す

左側がセクションの一覧、右側がお客様に見える画面のプレビューです。バナーを置けるのは「Main」の中です。

ページを切り替える

上部中央のページ名（開いた直後は「Profile」）を押すと、ページの一覧が開きます。「Customer accounts」の下にある「Orders」「Order status」「Profile」の 3 つがこのアプリの対象です。「Sign-in」やチェックアウトのページには置けません。

エディタ上部のページ名を押して開いたページ一覧。Customer accounts の下に Sign-in・Orders・Order status・Profile が並ぶ

ブロックの設定はページごとに独立しています。プロフィールで設定した内容は注文一覧には引き継がれないので、ページを切り替えるたびに追加と設定を行ってください。

ブロックを追加する

「Main」の下にある「Add block」を押すと、追加できるブロックの一覧が開きます。「UR: Customer Accounts Banner」を選ぶと Main の末尾にブロックが追加され、プレビュー上では（まだ画像 URL が空なので）何も表示されません。

Main の Add block を押して開いたポップオーバー。UR: Customer Accounts Banner が表示されている

追加したブロックは、左側の一覧で上下にドラッグして並び順を変えられます。「Customer contact」より上に置けば名前より上に、「Addresses」より下に置けば住所の下にバナーが出ます。

エディタ左上の 3 つ目のアイコン（Apps）を押すと、インストール済みのアプリごとに「配置済みの数」と＋ボタンが表示されます。ここからもブロックを追加できます。

エディタの Apps タブ。UR: Customer Accounts Banner の配置済み数と、追加用の＋ボタン

ブロック設定の 4 項目

左側の一覧、またはプレビュー上のバナーをクリックすると、その下に「Block settings」が開きます。項目は 4 つで、いずれも 1 行のテキスト入力です。ラベルと説明文は英語で固定です。これは Shopify の仕様で、お客様アカウント向けのブロックには翻訳の仕組みが用意されていないためです（アプリの言語設定を変えても変わりません）。

ブロック設定パネル。Banner image URL・Banner image URL (desktop)・Banner link URL・Banner alt text の 4 項目と Remove block

項目（画面の表記）	意味	必須	初期値
Banner image URL	表示する画像の URL。PC 用も設定した場合はスマートフォン用として使われます	必須（空だと何も表示されません）	空
Banner image URL (desktop)	PC 表示のときに使う画像の URL。空なら全デバイスで上の画像が出ます	任意	空
Banner link URL	バナーをクリックしたときに開く URL。新しいタブで開きます	任意	空
Banner alt text	画像の代替テキスト。画像が表示できないときや読み上げソフトで使われます	任意	空

Banner image URL には、管理画面の「URLをコピー」で取った URL をそのまま貼ります。末尾の #1200x300 のような部分が縦横比の情報なので、消さないでください。Shopify のファイル画面から取った URL や外部の画像 URL も貼れますが、この数字が付いていないと正方形（1:1）で表示され、横長バナーの上下に余白が出ます。その場合は URL の末尾に #横x縦（例: #1600x400）を手で足してください。

Banner image URL (desktop) を入れると、ブロックの幅が 400px 以上のときに PC 用、それ未満のときにスマートフォン用が表示されます。実際のマイページでは PC の本文カラムが 435〜660px、スマートフォンが 340px 前後なので、ほぼ端末どおりに切り替わります。判定するのは画面の幅ではなくバナーが置かれた枠の幅なので、PC でウィンドウを極端に細くするとスマートフォン用に切り替わります。縦横比は画像ごとに別々に計算されるので、PC 用は横長・スマートフォン用は正方形、という組み合わせもできます。

Banner link URL は https:// から始まる URL を入れてください。自分のストアのコレクションページ（例: https://ストアのドメイン/collections/sale）でも外部サイトでも構いません。リンクは常に新しいタブで開きます。

Banner alt text は画像の内容を短く書きます（例: 「会員限定 30% オフセール」）。空のままでも表示に影響はありません。

入力欄に URL の形式チェックはありません。誤った URL を入れても保存はでき、その場合はマイページに何も出ないか、壊れた画像になります。保存前にプレビューで表示を確かめてください。
設定はブロックに保存されます。アプリをアンインストールしても Shopify 側に残りますが、ブロック自体が無効になるので表示は消えます。

保存する・ブロックを削除する

変更は右上の「Save」を押すまで反映されません。Save を押す前に別のページへ移動すると、変更は破棄されます。

ブロックを外すには、Block settings の下にある「Remove block」を押してから Save します。一覧のブロックにカーソルを合わせると出るゴミ箱アイコンでも同じです。

同じページに複数のバナーを置く

「Add block」を繰り返せば、1 ページに何個でもブロックを置けます。それぞれ独立した設定を持つので、上にセール告知、下にポイント案内、という置き方ができます。

お客様のマイページで起きること

お客様がストアにログインすると、設定したページの Main セクション内、ブロックを置いた位置にバナーが表示されます。

バナーは本文の幅いっぱいに、画像の縦横比のまま表示されます。角丸や枠線は付きません。
「Banner image URL」が空のブロックは、何も表示せず高さも取りません。
画像の読み込みに失敗したときの代替画像はありません。ブラウザの壊れた画像アイコン（と alt text）が出ます。
画像は Shopify の CDN から直接読み込まれます。アプリのサーバーを経由しないので、アプリ側の障害で表示が止まることはありません。
バナーの表示に顧客情報は使いません。ログイン中のお客様全員に同じバナーが出ます。顧客ごとの出し分けはできません。

こんなときはこう設定する

ページごとに違うバナーを出したいとき

プロフィールには会員向けの案内、注文一覧には次回購入を促す送料無料キャンペーン、というように、ページの目的に合わせて画像を変えます。管理画面で画像を 2 枚アップロードし、エディタで「Profile」と「Orders」それぞれにブロックを追加して、別々の URL を貼ります。

注文一覧ページ。プロフィールとは別の送料無料キャンペーンのバナーが表示されている

スマートフォンと PC で画像を分けたいとき

横長バナーの文字は、スマートフォンでは小さくて読めなくなりがちです。PC 用に横長（例: 1600×400）、スマートフォン用に少し縦のある画像（例: 1200×600）を用意し、「Banner image URL」にスマートフォン用、「Banner image URL (desktop)」に PC 用を入れます。

バナーから特定のページに送りたいとき

「Banner link URL」にセールのコレクションページや LP の URL を入れます。リンクは新しいタブで開くので、お客様はマイページに戻りやすく、注文履歴の確認を中断させません。

1 枚の画像を全ページに使いたいとき

同じ URL を 3 ページのブロックに貼るだけです。画像を差し替えたくなったら、新しい画像をアップロードして、3 ページの URL を貼り替えてください。同じ URL のまま画像だけ差し替える機能はありません。

うまく表示されないときは

マイページにバナーが出ない

エディタで Save を押しましたか。 変更は Save を押すまで反映されません。エディタを開き直して、ブロックが残っているか確認してください。
「Banner image URL」が空になっていませんか。 この欄が空のブロックは何も表示しません。URL を貼ってから Save してください。
新しいお客様アカウントになっていますか。 Shopify 管理画面の「設定 → お客様アカウント」で「新しいお客様アカウント」が選ばれている必要があります。従来のお客様アカウントではブロックを置く場所がありません。
見ているページは正しいですか。 ブロックはページごとに置きます。プロフィールにだけ置いた場合、注文一覧には出ません。
ログインしていますか。 マイページはログイン後の画面です。ログイン前のサインインページには置けません。