0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Shopifyの顧客アカウント(マイページ)にバナーを表示できるアプリ5選|実際に入れて比べました

0
Posted at

はじめに

Shopify で「新しいお客様アカウント」が標準になってから、ログイン後のマイページはどのストアでも同じ見た目になりました。注文一覧・注文状況・プロフィールの 3 ページは Shopify が描画するので、テーマを編集しても手を入れられません。

一方で、マイページを見ているのはすでに買ってくれたお客様です。会員限定セール、ポイントの案内、送料無料のしきい値、新作の入荷。ここに一枚バナーを置けるかどうかで、リピート購入の導線はかなり変わります。

この記事では、新しいお客様アカウントにバナーやお知らせを表示できる Shopify アプリを 5 本取り上げます。自社で開発した「シンプルマイページバナー|お手軽顧客アカウント画像」を主役に、競合 4 本はすべて開発ストアに実際にインストールして管理画面を撮り、アプリストアの説明文だけでは分からないところを書きました。

顧客アカウント(マイページ)のバナーとは?

新しいお客様アカウントは、https://ストアのドメイン/account でお客様がログインして開く画面です。Shopify は 2024 年以降、ワンタイムコードでログインするこの方式を標準にしており、従来の「お客様アカウント(Classic)」とは仕組みが別です。

この画面に画像や文言のブロックを差し込むのが、ここで言う「マイページのバナー」です。置けるページは次の 3 つです。

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

業種別に使いどころを挙げると、次のようなものです。

  • アパレル・雑貨: 会員限定セールや新作入荷の告知をプロフィールに置く
  • 食品・消耗品: 注文一覧に「次回は送料無料」「定期購入なら 10% オフ」を置いて再購入を促す
  • B2B・卸: 注文状況に「納期の目安」「請求書の依頼先」を固定表示する
  • どの業種でも: LINE 公式やアプリのダウンロード導線をリンク付きで置く

マイページにバナーを置くメリット・デメリット

メリット

  • 確実にリピーターに届く: マイページを開くのはログイン済みのお客様だけです。広告費をかけずに、いちばん買ってくれる層に告知できます。
  • テーマに依存しない: 新しいお客様アカウントはテーマの外にあるので、テーマを変えてもバナーはそのまま残ります。
  • ページごとに文脈を変えられる: 注文直後の注文状況ページと、久しぶりに開いたプロフィールでは、見せたい内容が違います。ページ単位で出し分けられます。

デメリット

  • ログイン前には見えない: 新規のお客様やゲスト購入のお客様には届きません。トップページのバナーの代わりにはなりません。
  • 設定場所が 2 つに分かれる: どのアプリも「アプリの管理画面」と「お客様アカウントのエディタ」の両方を触ります。最初は戸惑いやすいところです。
  • ラベルが英語になりやすい: お客様アカウント向けのブロックは、Shopify の仕様でブロック設定のラベルを翻訳できません。日本語のアプリでも、エディタ側の項目名は英語になります。

Shopify 標準機能ではできないこと

新しいお客様アカウントは、Shopify 管理画面の「設定 → チェックアウト → カスタマイズ」で開くエディタから編集できます。ここで標準機能としてできるのは、色・フォント・ロゴといった全体の見た目の調整と、Shopify が用意したセクション(お客様連絡先・住所・ポリシーなど)の並び替え・非表示です。

できないのは、自分の画像や文言を置くことです。 エディタの「Add block」を押しても、アプリを入れていなければ選べるブロックがありません。テーマエディタのような「画像」「リッチテキスト」といった汎用ブロックは用意されていないため、バナーを出したい場合はアプリが必要になります。

また、お客様アカウント向けのブロックは「Customer Account UI Extension」という仕組みで動きます。テーマ拡張(Liquid)とは別物で、画像はテーマのファイルではなく URL で指定する形になります。この記事のアプリはどれもこの仕組みの上に作られています。

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

シンプルマイページバナー|お手軽顧客アカウント画像のメイン画像

はじめに(自社アプリの紹介)

「シンプルマイページバナー|お手軽顧客アカウント画像」は、プロフィール・注文一覧・注文状況の 3 ページに画像バナーを表示することだけに絞ったアプリです。管理画面で画像をアップロードして URL をコピーし、お客様アカウントのエディタでブロックに貼り付ければ表示されます。

項目 内容
アプリ名 シンプルマイページバナー|お手軽顧客アカウント画像
開発者 UnReact Inc.
価格設定 $3.99/月(年払い $39.99/年)・7 日間の無料体験
対応言語 管理画面は日本語(英語ほか 20 言語に切り替え可能)
向いているストア 画像 1 枚でしっかり見せたい/設定項目を増やしたくないストア

アプリストアで見る / ご利用ガイド

できること

3 ページにそれぞれ別のバナーを出せる

設定はブロック 1 つ 1 つに保存されるので、プロフィールにはポイント案内、注文一覧には送料無料キャンペーン、と置き分けられます。同じページに複数のブロックを置くこともできます。

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

注文一覧ページに別のバナーが表示されている様子

画像をアップロードして URL をコピーするだけ

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

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

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

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

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

リンクと代替テキスト

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

アプリのインストール

  1. Shopify 管理画面の左下にある「設定」をクリックします。
    Shopify 管理画面で左下の「設定」を選択している様子
  2. 「アプリと販売チャネル」から「Shopify App Store」へ移動します。
    設定画面の「アプリと販売チャネル」から Shopify App Store へ移動する様子
  3. 「Customer Accounts Banner」で検索するか、アプリストアのページを直接開いて「インストール」を押します。
    Shopify App Store のアプリ詳細ページ。左側にインストールボタンがある
  4. 権限の確認画面で「インストール」を押し、料金プランを選ぶと設定画面が開きます。求められる権限はファイルの読み書きだけです。

アプリ設定(管理画面)

管理画面は「設定」「初期設定」「よくある質問」の 3 画面です。「設定」画面には上から「初期設定」「バナー画像をアップロードする」「アップロード済みの画像」「言語設定」「おすすめアプリ」のカードが並びます。

アプリの設定画面。初期設定カードとバナー画像のアップロードカード

初期設定カードには「初期設定ガイドへ」ボタンがあり、6 ステップの手順ページに移動します。手順は「1. バナー画像をアップロードする」「2. お客様アカウントのエディタを開く」「3. ブロックを追加する」「4. バナー画像URLを貼り付ける」「5. 保存する」「6. 完了」で、手順 2 の「エディタを開く」ボタンを押すと、お客様アカウントのエディタがプロフィールページを開いた状態で新しいタブに開きます。手順 6 の「設定画面へ」で戻ります。

アプリの初期設定ページ。6 ステップの手順がスクリーンショット付きで並ぶ

バナー画像をアップロードするカードでは、点線の枠に画像をドラッグするか「画像を追加」で画像を選ぶと、全幅のプレビューとファイル名が出ます。画像を選ぶまで「アップロードする」は押せません。1 回に 1 枚、10MB まで、画像形式のみです。アップロードすると Shopify の「コンテンツ → ファイル」に保存され、URL の末尾に #1200x300 のように画像の横幅と高さが付きます。マイページ側はこの数字から縦横比を決めているので、貼り付けるときに消さないでください(消すと正方形で表示されます)。処理待ちは最大 15 秒で、間に合わないと「画像のアップロードに失敗しました」になります。

バナー画像をアップロードするカード。ドロップゾーンとアップロードするボタン

アップロード済みの画像は新しい順に並び、各行にサムネイル・読み取り専用の「画像URL」欄・「URLをコピー」・ゴミ箱アイコン(削除)があります。「URLをコピー」を押すと「URLをコピーしました」と表示されます。削除は確認なしで、その行を一覧から削除するだけです。Shopify のファイル自体は消えないので、貼ってあるバナーは表示され続けます。件数の上限はありません。

アップロード済みの画像の一覧。サムネイル・画像URL・URLをコピー・削除

言語設定カードは「言語を選択」のプルダウンと「変更する」ボタンで、管理画面の表示言語を 20 言語から選べます(言語を変更する操作はブラウザごとに保存されます)。おすすめアプリカードは同じ開発元のアプリ一覧で、右上の × でおすすめアプリを閉じると 24 時間表示されません。「よくある質問」画面は管理画面が日本語のときだけ出て、質問を開閉するだけの画面です。

アプリ設定(お客様アカウントのエディタ)

バナーの配置は Shopify のエディタで行います。「Main」の「Add block」を押すと「UR: Customer Accounts Banner」が出るので追加します。

お客様アカウントのエディタで Add block を押し、UR: Customer Accounts Banner を選ぶ画面

ブロックを選ぶと「Block settings」に 4 つの入力欄が出ます。ラベルは Shopify の仕様で英語固定です。

項目 意味 必須
Banner image URL 表示する画像の URL。PC 用も設定した場合はスマートフォン用 ✅
Banner image URL (desktop) PC 表示のときに使う画像の URL。空なら全デバイスで上の画像 —
Banner link URL クリック時に開く URL。新しいタブで開く —
Banner alt text 画像の代替テキスト —

ブロック設定パネル。Banner image URL・Banner image URL (desktop)・Banner link URL・Banner alt text

「Banner image URL」が空のブロックは何も表示しません。URL の形式チェックはないので、保存前にプレビューで表示を確かめるのが確実です。右上の「Save」を押すまで反映されません。

スマートフォン幅のプロフィールページ。スマートフォン用の画像が表示されている

おわりに(自社アプリ)

機能を「画像バナー」に絞っているぶん、設定は 4 項目だけで、管理画面もアップロードと URL のコピーだけです。条件による出し分けや FAQ などの機能は持たないので、「まず一枚置きたい」ストアに向いています。詳しい手順はご利用ガイドにまとめています。

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


Customer Account Blocks

Customer Account Blocksのアプリ紹介画像

アプリ概要

項目 内容
アプリ名 Customer Account Blocks
開発者 Stack Craft Digital
価格設定 $9/月 / $19/月(年払い $97/年 / $197/年)・7 日間の無料体験
対応言語 管理画面は英語のみ(実際に確認)
評価 ★ 5(29 件)

実際にインストールして触ってみた

Customer Account Blocks の管理画面

Customer Account Blocks の管理画面

Customer Account Blocks の管理画面

  • 管理画面は英語のみ。ダッシュボードに「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

Account & Checkout Blocksのアプリ紹介画像

アプリ概要

項目 内容
アプリ名 Account & Checkout Blocks
開発者 SureCust
価格設定 無料
対応言語 管理画面は英語のみ(実際に確認)
評価 ★ 4.9(17 件)

実際にインストールして触ってみた

Account & Checkout Blocks の管理画面

Account & Checkout Blocks の管理画面

  • 管理画面は英語のみ。インストール直後は「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

Customer Accounts Toolboxのアプリ紹介画像

アプリ概要

項目 内容
アプリ名 Customer Accounts Toolbox
開発者 JadePuma Apps
価格設定 $1/月・30 日間の無料体験
対応言語 管理画面は英語のみ(実際に確認)
評価 ★ 5(5 件)

実際にインストールして触ってみた

Customer Accounts Toolbox の管理画面

  • 管理画面は英語のみ。ウィジェットの設定はアプリ側ではなく、お客様アカウントのエディタ(チェックアウトエディタ)のブロック設定で行う。アプリの管理画面はオンボーディング手順と表示回数の集計だけ
  • ウィジェットは 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

Hubble: Customer Accountsのアプリ紹介画像

アプリ概要

項目 内容
アプリ名 Hubble: Customer Accounts
開発者 Overse
価格設定 $19.99/月 / $39.99/月 / $69.99/月・14 日間の無料体験
主な機能・特徴 行動や条件に基づいてカスタマイズされたコンテンツを表示します、セグメントのように、柔軟なルールを使用して条件を作成および再利用できます、条件付きコンテンツや、リダイレクト、ダウンロード、リンクなどの強力なブロックを使用できます、お客様フィールドと注文フィールドのブロックを使用して、お客様が情報を編集できるようにします、強力なページブロックを使用して、カスタムページを簡単にデザインできます
対応言語 管理画面は英語のみ(実際に確認)
評価 ★ 5(10 件)

実際にインストールして触ってみた

Hubble: Customer Accounts の管理画面

Hubble: Customer Accounts の管理画面

  • 管理画面は英語のみ。ブロックは 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 秒かかった

ワンポイント解説

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



5 つのアプリを比較

アプリ 管理画面が日本語 画像バナー 条件で出し分け 月額 評価
シンプルマイページバナー ✅ ✅ ❌ $3.99 —
Customer Account Blocks ❌ ✅ ✅ $9/月 ★5(29)
Account & Checkout Blocks ❌ ✅ ✅ 無料 ★4.9(17)
Customer Accounts Toolbox ❌ ✅ ❌ $1/月 ★5(5)
Hubble: Customer Accounts ❌ ✅ ✅ $19.99/月 ★5(10)

「条件で出し分け」は、顧客タグや購入回数などの条件でブロックの表示・非表示を変えられるかです。「画像バナー」は、画像そのものをブロックとして出せるか(文言だけのバナーは ❌ ではなく、画像用ブロックの有無で判定)です。月額は各アプリの最安の有料プラン、または無料です。

まとめ:どれを選ぶか

  • 画像バナーを一枚置きたい、設定を増やしたくない → シンプルマイページバナー|お手軽顧客アカウント画像。管理画面が日本語で、設定は 4 項目です。
  • 文言+ボタンの案内をテンプレートから作りたい → Customer Account Blocks。15 種のテンプレートと条件表示があります。
  • バナー以外(注文の申請・FAQ・信頼バッジ)も一つで揃えたい → Account & Checkout Blocks。無料で 35 種以上のブロックが使えます。
  • 月額を極力抑えたい → Customer Accounts Toolbox。$1/月で画像バナーと商品表示ができます。
  • 顧客ごとの出し分けや専用ページまで作り込みたい → Hubble。画像バナーは Standard プラン以上です。

競合 4 本はどれも管理画面が英語で、実際に触るとインストール直後に「有効化」や「公開」の一手間が要るものが多くありました。自社の「シンプルマイページバナー|お手軽顧客アカウント画像」は、その一手間をアプリ内の初期設定ガイドに 6 ステップでまとめています。7 日間の無料体験で、まずマイページに一枚置いてみてください。

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?