【徹底解説】Shopify アプリ「シンプルマイページバナー｜お手軽顧客アカウント画像」でできること

【徹底解説】Shopify アプリ「シンプルマイページバナー｜お手軽顧客アカウント画像」でできること

Shopify の「新しいお客様アカウント」は、ログイン後のマイページを Shopify 側が描画する仕組みです。テーマを触っても手が入らないため、多くのストアでは注文履歴とプロフィールが並ぶだけの、どこも同じ画面になっています。

そこに一枚だけ画像を置けるようにしたのが「シンプルマイページバナー｜お手軽顧客アカウント画像」です。管理画面でバナー画像をアップロードして URL をコピーし、お客様アカウントのエディタでブロックに貼り付けると、プロフィール・注文一覧・注文状況の 3 ページにバナーが表示されます。設定はブロック 1 つにつき 4 項目しかありません。

この記事では、このアプリの管理画面をすべての画面・すべての項目について画像付きで解説し、エディタ側の設定、実装からしか分からない制約、自作する場合のコード、競合アプリとの比較まで書きます。手順そのものは Shopifyで顧客アカウント（マイページ）に画像バナーを表示できるアプリについて徹底解説｜ご利用ガイド にまとめてあるので、ここでは「なぜそうなっているか」「どう使い分けるか」に比重を置きます。

シンプルマイページバナーとは

「シンプルマイページバナー｜お手軽顧客アカウント画像」は、UnReact が開発した Shopify アプリで、新しいお客様アカウント（マイページ）の 3 つのページに画像バナーを表示します。Customer Account UI Extension という Shopify の仕組みの上に作られており、テーマ拡張（Liquid）は持ちません。

対象になるページは次の 3 つです。

• プロフィール（Profile）… 名前・メールアドレス・住所・支払い方法が並ぶページ
• 注文一覧（Orders）… 過去の注文がカードで並ぶページ
• 注文状況（Order status）… 注文 1 件の配送状況を見るページ。注文直後のサンクスページから続いている画面です

アプリが持つ機能を先に整理しておきます。

• 管理画面で画像を Shopify のファイル置き場にアップロードし、URL を発行してコピーする
• エディタで置いたブロックごとに、別々の画像を設定する（同じページに複数のブロックも置ける）
• PC 用とスマートフォン用で画像を切り替える
• バナーにリンク先の URL と代替テキストを付ける
• 管理画面を 20 言語で表示する

逆に、持っていない機能もはっきりしています。顧客タグや購入回数による出し分け、表示期間の予約、文言だけのバナー、FAQ やお問い合わせフォームといったブロックはありません。画像を一枚置くことに絞ったアプリです。

シンプルマイページバナーのメリット

いちばん熱心なお客様に確実に届く

マイページを開くのは、ログインしているお客様だけです。広告のようにお金をかけて届けるのではなく、すでに買ってくれた人が自分から開く画面にバナーが出ます。会員限定セール、ポイントの案内、次回の送料無料といった「もう一度買ってもらう」ための告知に向いています。

テーマを変えても消えない

新しいお客様アカウントはテーマの外にあり、バナーもエディタ側のブロックとして保存されます。テーマを乗り換えても、テーマエディタで何かを消してしまっても、マイページのバナーはそのまま残ります。

ページごと・ブロックごとに画像を分けられる

設定はブロック単位で保存されるので、注文直後に見る注文状況のページと、久しぶりに開くプロフィールで、見せる内容を変えられます。

画像の置き場所を用意しなくてよい

アップロードした画像は Shopify の「コンテンツ → ファイル」に保存されます。アプリ独自のサーバーを経由しないので、アプリ側の障害で画像が消えることはなく、アプリを削除しても画像は残ります。

設定が 4 項目で終わる

エディタのブロック設定は、画像 URL（スマートフォン用）・画像 URL（PC 用）・リンク URL・代替テキストの 4 つだけです。管理画面もアップロードと URL のコピーだけなので、慣れていない担当者でも迷いにくい作りです。

シンプルマイページバナーのデメリット

ログイン前のお客様には見えない

マイページはログイン後の画面なので、初めて来たお客様やゲスト購入のお客様には届きません。トップページのバナーの代わりにはならず、リピーター向けの施策として使うものです。

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

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

エディタ側のラベルが英語になる

ブロック設定の項目名（Banner image URL など）は英語で固定です。これはアプリの手抜きではなく、お客様アカウント向けのブロックでは翻訳の仕組みが用意されていないという Shopify の仕様で、日本語に切り替えることができません。アプリ側の管理画面は日本語なので、初期設定ガイドで補っています。

出し分けや期間の設定はできない

顧客タグ・購入回数・注文金額といった条件でバナーを変えたり、キャンペーン終了日に自動で消したりする機能はありません。終わったキャンペーンのバナーは、エディタでブロックを削除するか URL を差し替えて対応します。

料金プラン

料金は Basic Plan の 1 種類で、月払いと年払いを選べます。

• 月払い: $3.99 / 月
• 年払い: $39.99 / 年（月払いより 2 ヶ月分お得）
• 無料体験: インストールから 7 日間

プランによる機能の違いはなく、置けるブロックの数や画像の枚数に上限もありません。料金は Shopify App Store のページで確認できます。

インストール

インストールは Shopify の他のアプリと同じ流れです。

管理画面の「設定」から「アプリと販売チャネル」を開き、Shopify App Store で「Customer Accounts Banner」を検索します。公開直後は検索結果に出ないことがあるので、その場合は Shopify App Store のアプリページを直接開いてください。

「インストール」を押すと権限の確認画面が開きます。このアプリが求める権限はファイルの読み書きだけで、顧客情報や注文情報へのアクセスは要求しません。続けて料金プランを選ぶと、アプリの設定画面が開きます。

アプリ管理画面の構成

管理画面は 3 つの画面でできています。

• 設定 … アプリを開くと最初に表示される画面。バナー画像のアップロードと URL の発行がここです
• 初期設定 … バナーが表示されるまでの 6 ステップをスクリーンショット付きで案内するページ
• よくある質問 … 管理画面が日本語のときだけサイドバーに出る画面

サイドバーの項目は「設定」「初期設定」の 2 つで、よくある質問は表示言語と登録内容の条件がそろったときだけ 3 つ目として現れます。

各画面の説明

「設定」画面の初期設定カード

設定画面のいちばん上にあるカードです。「初期設定ガイドへ」ボタンを押すと、次の節で説明する初期設定ページに移動します。カードの下に小さく「本アプリは新しいお客様アカウント専用です。従来のお客様アカウントには対応していません。」と書かれていて、この一文がこのアプリの前提条件のすべてです。

「設定」画面のバナー画像をアップロードするカード

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

操作は 2 段階です。まず点線の枠に画像をドラッグするか、「画像を追加」を押してファイルを選びます。これが画像を選ぶ操作で、選んだ直後に実際の表示に近い全幅のプレビューとファイル名が枠の上に出ます。

次に「アップロードする」を押します。画像を選ぶまでこのボタンはグレーで押せません。押すと画像は Shopify の「コンテンツ → ファイル」に保存され、「画像をアップロードしました」と表示されてプレビューが消え、下の一覧の先頭に行が増えます。

実装を読んで分かる制約を挙げておきます。画面には出てこないものばかりです。

• 選べるのは画像ファイルだけで、1 回に 1 枚です
• ファイルサイズの上限は 10MB で、超えると送信の時点で失敗します
• Shopify 側の画像処理が終わるまで最大 15 秒待ちます。間に合わないと「画像のアップロードに失敗しました」になるので、少し待って押し直してください
• 発行される URL の末尾には #1200x300 のように画像の横幅と高さが付きます。マイページ側はこの数字から縦横比を決めているので、貼り付けるときに消さないでください
• 同じ画像を 2 回アップロードすると、ファイルは 2 つ作られて一覧にも 2 行並びます

「設定」画面のアップロード済みの画像

アップロードした画像の一覧です。新しいものが上に来ます。

1 行に並ぶ要素はこの 4 つです。

• サムネイル … 幅 80px・高さ 40px に切り抜いて表示します。横長以外の画像は上下が切れて見えますが、表示用に切り抜いているだけで元の画像は変わりません
• 画像URL … 読み取り専用の入力欄です。手で選択してコピーすることもできます
• URLをコピー … クリップボードに URL を入れ、画面下に「URLをコピーしました」と表示します。ブラウザがクリップボードへのアクセスを許可していないと「URLのコピーに失敗しました」と出ます
• 削除（ゴミ箱アイコン）… その行を一覧から削除する操作です。確認ダイアログは出ません

削除で消えるのはアプリの一覧からだけで、Shopify のファイル自体は残ります。その URL を貼ってあるバナーも表示され続けるので、間違えて消しても慌てる必要はありません。一覧の件数に上限はありません。

「設定」画面の言語設定

アプリの管理画面の表示言語を切り替えるカードです。「言語を選択」のプルダウンから選び、「変更する」を押すとその場で切り替わります。

対応しているのは日本語・英語・ドイツ語・フランス語・スペイン語・イタリア語・ポルトガル語（ブラジル／ポルトガル）・中国語（簡体字／繁体字）・韓国語・オランダ語・ポーランド語・トルコ語・スウェーデン語・ノルウェー語・デンマーク語・フィンランド語・チェコ語・タイ語の 20 言語です。

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

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

同じ開発元の他のアプリの一覧です。バナーの動作には関係ありません。

右上の × でおすすめアプリを閉じると、24 時間は表示されません。日本語表示のときは日本語の名前と説明、それ以外の言語では英語の情報が出ます。

「初期設定」画面

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

手順の見出しはこのとおりです。

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

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

手順 6 の「設定画面へ」で設定画面に戻ります。注文一覧や注文状況にも置くときは、同じ手順を繰り返します。

「よくある質問」画面

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

テーマへの追加

このアプリはテーマ拡張を持たないので、テーマエディタで「アプリブロックを追加」する操作はありません。代わりに、お客様アカウントのエディタでブロックを追加します。

エディタの開き方は 3 通りあります。

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

ブロックを置けるのは「Main」の中です。「Add block」を押すと追加できるブロックの一覧が開き、「UR: Customer Accounts Banner」を選ぶと Main の末尾に追加されます。

左側の一覧でブロックを上下にドラッグすると並び順が変わります。「Customer contact」より上に置けば名前の上に、「Addresses」より下に置けば住所の下にバナーが出ます。エディタ左上の Apps タブからも、配置済みの数を見ながら追加できます。

ブロックの設定はページごとに独立しているので、プロフィールで設定した内容は注文一覧には引き継がれません。ページを切り替えるたびに追加と設定を行ってください。変更は右上の「Save」を押すまで反映されず、Save の前に別のページへ移動すると破棄されます。

ストアフロントの見た目を変える

ブロックを選ぶと「Block settings」に 4 つの入力欄が出ます。いずれも 1 行のテキスト入力で、必須指定も初期値もありません。

• Banner image URL … 表示する画像の URL です。PC 用も設定した場合は、こちらがスマートフォン用として使われます。空のままだとブロックは何も表示せず、高さも取りません
• Banner image URL (desktop) … PC 表示のときに使う画像の URL です。空なら全デバイスで上の画像が出ます
• Banner link URL … バナーをクリックしたときに開く URL です。常に新しいタブで開きます
• Banner alt text … 画像の代替テキストです。画像が表示できないときや読み上げソフトで使われ、未設定なら空文字になります

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

PC とスマートフォンの切り替えは、画面の幅ではなくバナーが置かれた枠の幅で判定します。しきい値は 400px で、実際のマイページでは PC の本文カラムが 435〜660px、スマートフォンが 340px 前後なので、ほぼ端末どおりに切り替わります。縦横比は画像ごとに別々に計算されるため、PC 用は横長、スマートフォン用は正方形に近い画像、という組み合わせもできます。

入力欄に URL の形式チェックはありません。誤った URL でも保存はでき、その場合はマイページに何も出ないか壊れた画像になるので、Save の前にプレビューで確かめてください。ブロックを外すには「Remove block」を押してから Save します。

コードで自作する場合

新しいお客様アカウントは Liquid でカスタマイズできません。テーマの customers/account.liquid を編集しても、新しいお客様アカウントには反映されないためです。自作するなら、Shopify CLI で Customer Account UI Extension を作ることになります。

まず、拡張の設定ファイルで「どのページに置けるか」を宣言します。このアプリと同じく 3 ページに置くなら、同じモジュールを 3 つのターゲットに結び付けます。

api_version = "2026-01"

[[extensions]]
name = "My Account Banner"
handle = "my-account-banner"
type = "ui_extension"

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

  [[extensions.targeting]]
  module = "./src/Banner.tsx"
  target = "customer-account.order-index.block.render"

  [[extensions.targeting]]
  module = "./src/Banner.tsx"
  target = "customer-account.order-status.block.render"

[extensions.settings]
  [[extensions.settings.fields]]
  key = "image_url"
  type = "single_line_text_field"
  name = "Image URL"

targeting で指定した 3 つがエディタの「Add block」に出てくる場所で、settings.fields がブロック設定の入力欄になります。ここで使える型は 1 行テキスト・複数行テキスト・数値・日付・真偽値・バリエーション参照だけで、テーマ拡張にある画像ピッカーはありません。画像を URL で受け取る形になるのはこのためです。

次に、ブロック本体です。お客様アカウントの拡張では素の img タグは描画されず、Polaris Web Components（s-image など）を使う必要があります。

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

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

function Banner() {
  const url = shopify.settings.value?.image_url as string | undefined;
  if (!url) return null;

  // URL 末尾の #横x縦 から縦横比を決める（無いと 1:1 で描画される）
  const m = url.match(/#(\d+)x(\d+)$/);
  const aspectRatio = m ? `${m[1]}/${m[2]}` : undefined;

  return (
    <s-image src={url} alt="" inlineSize="fill" objectFit="cover" aspectRatio={aspectRatio} />
  );
}

shopify.settings.value にエディタで入力した値が入ってきます。s-image は aspectRatio を指定しないと正方形で描画されるので、URL に埋めた寸法から比率を作っています。ここまでで「画像を 1 枚出す」だけの最小構成です。

ただし、自作には拡張のコード以外の作業が付いてきます。

• Shopify パートナーアカウントとアプリの作成、Shopify CLI の導入
• 画像をアップロードして URL を発行する管理画面（Files API を呼ぶサーバー）を別に用意する
• shopify app deploy で拡張を配信し、API バージョンが上がるたびに追随する
• PC とスマートフォンの切り替えを s-query-container と @container クエリで組む

「画像を一枚置く」ために、アプリ 1 本ぶんの開発と保守を抱えることになります。月額 $3.99 のアプリを入れるのと、どちらが安いかは分かりやすいと思います。

競合アプリとの比較

新しいお客様アカウントにブロックを置けるアプリは、他にもいくつかあります。ここでは 4 本を開発ストアに実際にインストールして、管理画面を確かめました。

Customer Account Blocks

• 開発者: Stack Craft Digital
• 価格: $9/月 / $19/月（7 日間の無料体験）
• 評価: ★5（29 件）
• 管理画面の言語: 英語（実際にインストールして確認しました）

開発ストアに入れて触ったときのメモです。

• 管理画面は英語のみ。ダッシュボードに「Set up Account Blocks」の 3 ステップ（ブロック作成 → 公開 → エディタに追加）が出る
• ブロックの種類は 7 つ: Rich Text / Banner（テキスト＋色＋CTA ボタン、閉じられる）/ CTA Card（画像＋テキスト＋ボタン）/ Tile Grid / FAQ Accordion / Divider・Spacer / Support Contact
• 「Banner」は Polaris の通知バナー型で画像は入らない。画像を出したいときは「CTA Card」を使う
• テンプレートが 15 種（Retention / Support / Growth / Loyalty / Compliance）。「Use template」で下書きブロックが作られ、公開（Publish）は別操作
• 配置は Profile / Order Index / Order Status を選ぶ。顧客タグなどの条件（Conditions）で出し分けができ、Languages タブで言語ごとの文面も持てる
• 顧客メタフィールドをテキストに差し込む機能は Starter（$9/月）以上

ブロックの種類と条件表示が豊富で、テンプレートから作り始められます。画像を大きく見せる用途より、文言＋ボタンの案内を出し分けたいストア向けです。

Account & Checkout Blocks

• 開発者: SureCust
• 価格: 無料
• 評価: ★4.9（17 件）
• 管理画面の表示: 英語のみでした

インストールして管理画面を開いた結果、次のことが分かりました。

• 管理画面は英語のみ。インストール直後は「App status: Inactive」で、Activate now を押して有効化する必要がある
• ブロックは 35 種以上。お客様アカウント向けには Custom Banner / Image with Text / Announcement Bar / FAQs / Trust Badges / Payment Icons / Social Media / Contact Buttons / Order Note / Order Report などがある
• 画像を出すブロックは「Image with Text」。「Custom Banner」は文言中心
• チェックアウト向けブロック（Custom Field / Free Shipping Bar / Upsells など）は Shopify Plus 限定の表示が付いている
• Rules（表示ルール）と Timeline のメニューがあり、注文への「特別リクエスト」「キャンセル申請」などの受付機能も同じアプリに入っている

無料で始められ、ブロックの種類がもっとも多いアプリです。バナーだけでなく注文まわりの受付機能まで一つで揃えたいストアに向きます。

Customer Accounts Toolbox

• 開発者: JadePuma Apps
• 価格: $1/月（30 日間の無料体験）
• 評価: ★5（5 件）
• 画面の言語: 英語（日本語表示は選べません）

実際に触ってみて気づいた点を並べます。

• 管理画面は英語のみ。ウィジェットの設定はアプリ側ではなく、お客様アカウントのエディタ（チェックアウトエディタ）のブロック設定で行う。アプリの管理画面はオンボーディング手順と表示回数の集計だけ
• ウィジェットは 6 種: Message / Image banner / Color banner / My products / My collection / My collection 2。「Image banner」がそのまま画像バナー用
• 各ウィジェットの Total views / Today's views / Last viewed を表示する簡易アナリティクスがある
• オンラインストアとお客様アカウントのカートを同期する「Persistent cart」のアプリ埋め込み（テーマエディタで有効化）が同梱されている
• 料金は月額 $1 と安い（Plan メニューあり）

月額 $1 で画像バナーと色付きバナー、商品・コレクションの表示まで揃う軽量なアプリです。設定はすべてエディタ側なので、アプリの管理画面はほぼ触りません。

Hubble: Customer Accounts

• 開発者: Overse
• 価格: $19.99/月 / $39.99/月 / $69.99/月（14 日間の無料体験）
• 評価: ★5（10 件）
• UI の言語: 英語で、日本語には切り替えられません

入れて確かめた内容は次のとおりです。

• 管理画面は英語のみ。ブロックは Static（全員に同じ内容）/ Dynamic（条件で出し分け）/ Special の 3 系統
• 無料プランで作れるのは「Announcement Banner」（文言中心のバナー）だけ。「Image Banner」「Image with text」「Featured Products」は Standard プラン（$19.99/月〜）、Custom Block / Fields / Page / Redirect は Pro 以上
• 無料でも有料ブロックを「Try」でプレビューは試せる
• 顧客の行動や属性に応じた条件（Conditions）を作って再利用できる。顧客フィールドの編集や専用ページの作成まで守備範囲が広い
• アプリのホスティングの都合か、インストール直後は管理画面の表示に 20〜30 秒かかった

条件による出し分けや専用ページの作成まで含む多機能型です。画像バナーは有料プランからなので、バナーだけが目的なら割高になります。

4 本と比べて見えること

• 管理画面の言語 … 競合 4 本はいずれも英語のみでした。「シンプルマイページバナー」は日本語です
• 画像バナー … Customer Accounts Toolbox の Image banner、SureCust の Image with Text、Customer Account Blocks の CTA Card は画像を出せます。Hubble は有料プラン（Standard 以上）で Image Banner が使えます
• 条件による出し分け … Customer Account Blocks・SureCust・Hubble は顧客の条件でブロックの表示を変えられます。Toolbox と「シンプルマイページバナー」にはありません
• 価格 … 無料の SureCust、$1 の Toolbox、$9 からの Customer Account Blocks、$19.99 からの Hubble に対して、「シンプルマイページバナー」は $3.99 です

条件による出し分けや FAQ まで含めて一つで済ませたいなら Customer Account Blocks や SureCust、画像を一枚しっかり見せたいだけなら「シンプルマイページバナー」か Toolbox、という分かれ方になります。

まとめ

マイページは、すでに買ってくれたお客様がもう一度開く場所です。「シンプルマイページバナー｜お手軽顧客アカウント画像」は、そこに画像を一枚置くことだけを、管理画面のアップロードとエディタの 4 項目で完結させています。

• 3 ページそれぞれに、ブロックごと別の画像を置ける
• 画像は Shopify のファイルに保存され、アプリのサーバーを経由しない
• PC とスマートフォンで画像を切り替え、リンクと代替テキストも付けられる
• 管理画面は日本語で、初期設定は 6 ステップのガイド付き

出し分けや期間指定が要らないストア、まず一枚置いて反応を見たいストアには、いちばん短い道です。7 日間の無料体験があるので、Shopify App Store から入れて、プロフィールページに一枚置くところから始めてみてください。

おすすめ Shopify アプリ

UnReact の他のアプリも紹介します。どれも「シンプル〇〇｜お手軽△△」の名前で、設定を絞った作りになっています。

• シンプル画像バナー｜お手軽広告バナーアプリ … オンラインストア側（テーマ）に画像バナーを置くアプリです。マイページ用の本アプリと組み合わせると、ログイン前後の両方に告知を出せます
• シンプルレビュー｜お手軽口コミ … 商品レビューを集めて表示します。マイページのバナーからレビュー投稿へ誘導する使い方ができます
• シンプル Wishlist｜お手軽お気に入り … お気に入り機能を追加します。リピーター向けの導線として相性がよいアプリです
• シンプルLINE誘導｜お手軽追従LINEアイコン … ストアに追従する LINE 誘導アイコンを置きます。マイページのバナーのリンク先を LINE 公式にする運用と組み合わせられます
• シンプル店舗受け取り｜お手軽ローカルピックアップ … 店舗受け取りの日時指定を追加します。実店舗を持つストア向けです