Shopify のマイページ（新しいお客様アカウント）でおすすめ商品を表示する方法｜アップセル・クロスセルでリピートを促進

目次

• はじめに
• 記事の構成
• Shopify のマイページ（新しいお客様アカウント）におすすめ商品を表示できる？
• マイページにおすすめ商品を表示するメリット・デメリット
  • メリット
  • デメリット
• テーマのコード編集とアプリ導入の比較
  • Customer Account UI Extension をコードで実装する方法
  • アプリを導入する方法
  • 結論：最初はアプリで小さく試すのがおすすめ
• おすすめ Shopify アプリ「シンプル注文履歴おすすめ商品｜お手軽マイページアップセル」紹介
  • アプリの基本情報
  • できること
• アプリのインストール手順
• アプリをマイページに追加（有効化）
• アプリの設定項目を理解する
  • 関連商品のマッピング設定
  • デフォルトおすすめ商品リストの設定
  • 表示・見出し・説明文の設定
  • ボタンの設定
• すぐ使えるおすすめ設定例
  • ユースケース1：消耗品・関連商品のクロスセル
  • ユースケース2：新商品・売れ筋商品の認知拡大
  • 文言のテンプレ例
• 関連施策との組み合わせ
• テーマのコード編集で実装する場合のサンプルコード
  • 実装の流れ
  • 拡張機能の登録
  • おすすめ商品の取得と表示
  • カートに追加する処理
  • コード実装の注意点
• 運用のコツ
• よくある質問
• まとめ
• 参考記事

はじめに

Shopify でストアを運営していると、「新規のお客様を集めること」だけでなく、「一度買ってくれたお客様にもう一度買ってもらうこと」がいかに大切かを実感する場面が増えてきます。広告費をかけて集めた新規顧客に一度きりの購入で終わられてしまうのは、非常にもったいないことです。

そこで注目したいのが、Shopify の 「新しいお客様アカウント（マイページ）」 を活用した おすすめ商品 の表示です。お客様が注文後にログインして注文状況や注文詳細を確認するマイページは、商品やブランドへの関心が高まっている絶好のタイミングです。ここに おすすめ商品 を表示できれば、アップセル・クロスセル によって自然に追加購入・リピート購入を促せます。

この記事では、Shopify のマイページにおすすめ商品を表示する方法を、メリット・デメリットからおすすめアプリ、コードでの実装例まで幅広く解説します。「マイページを活用してリピートを増やしたい」という方は、ぜひ参考にしてください。

この記事は以下の記事を参考にしています。

• Shopify でマイページ（新しいお客様アカウント）におすすめ商品を表示する方法とアプリ｜アップセル・クロスセル徹底解説
• Shopify の新しいお客様アカウントにおすすめ商品を表示できるアプリ6選｜マイページでアップセル・クロスセル

記事の構成

この記事は以下の流れで解説します。

• Shopify のマイページにおすすめ商品を表示できるのか（結論）
• マイページにおすすめ商品を表示するメリット・デメリット
• テーマのコード編集とアプリ導入の比較
• おすすめアプリ「シンプル注文履歴おすすめ商品｜お手軽マイページアップセル」の紹介と設定方法
• コードで実装する場合のサンプル
• 関連施策との組み合わせ、運用のコツ、よくある質問

Shopify のマイページ（新しいお客様アカウント）におすすめ商品を表示できる？

結論からお伝えすると、Shopify のマイページ（新しいお客様アカウント）におすすめ商品を表示することは可能です。ただし、Shopify の標準機能だけでは、注文状況ページや注文詳細ページに商品ごとのおすすめ商品を表示する仕組みは用意されていません。

実現する方法は、大きく分けて 2 つあります。

• Customer Account UI Extension をコードで実装する方法
• 専用アプリを導入する方法

新しいお客様アカウントは「Checkout and Customer Accounts」エディタからブロックを追加してカスタマイズしますが、商品ごとのおすすめ商品を表示するには、コードを書くか、その機能を持つアプリを導入する必要があります。それぞれの方法には一長一短があるため、以下で詳しく見ていきましょう。

マイページにおすすめ商品を表示するメリット・デメリット

メリット

関心が高まったタイミングで追加購入を促せる

お客様が注文内容を確認するマイページは、商品やブランドへの関心が最も高まっている瞬間の一つです。このタイミングでおすすめ商品を提案することで、ストアの世界観を保ったまま、自然な形で追加購入をご案内できます。

• チェックアウト直後の注文状況ページ
• マイページからアクセスする注文詳細ページ

これらはいずれも「自分が買ったもの」を確認する前向きな状態のため、クロスセルの効果が期待できます。

広告費をかけずに売上を伸ばせる

すでに購入してくれた既存顧客に対する施策のため、新規集客のための広告費がかかりません。アップセル・クロスセルは、もっとも費用対効果が高い売上アップ施策の一つとされています。

お店ならではの商品提案ができる

商品ごとに手動でおすすめ商品を設定できる仕組みなら、「この商品にはこれが合う」というお店の知見をそのまま提案に反映できます。自動レコメンドにはない、きめ細やかなご案内が可能です。

リピート率・LTV の向上につながる

マイページでおすすめ商品に触れる機会が増えることで、お客様の再訪・再購入が促され、長期的な顧客価値（LTV）の向上につながります。

デメリット

標準機能だけでは実現できない

前述のとおり、新しいお客様アカウントのマイページに商品ごとのおすすめ商品を表示する機能は標準では用意されていません。コード実装かアプリ導入が前提となります。

おすすめ商品の設計に手間がかかる場合がある

商品ごとに関連商品を細かく設定しようとすると、商品点数の多いストアでは設定作業に時間がかかります。デフォルトおすすめリスト機能をうまく併用して効率化することが大切です。

過度な表示は逆効果になることがある

おすすめ商品を多く表示しすぎると、かえってページが煩雑になり、お客様の体験を損なうおそれがあります。表示件数や見出しの文言は、ストアの雰囲気に合わせて適切に調整しましょう。

テーマのコード編集とアプリ導入の比較

Customer Account UI Extension をコードで実装する方法

メリット

• 自由度が高く、独自のデザイン・ロジックを作り込める
• 月額のアプリ費用がかからない

デメリット

• 拡張機能の構成・ビルド・デプロイの知識が必要
• おすすめ商品データの管理やカート操作を自前で実装する必要がある
• Shopify のアップデートに合わせた保守が必要

アプリを導入する方法

メリット

• ノーコードでマイページにおすすめ商品ブロックを追加できる
• 商品ごとのおすすめ設定やデフォルト表示、デザインのカスタマイズが管理画面で完結する
• 保守やアップデート対応をアプリ側に任せられる

デメリット

• 月額のアプリ費用がかかる
• アプリの仕様の範囲内でのカスタマイズになる

結論：最初はアプリで小さく試すのがおすすめ

コードでの実装は自由度が高い一方で、開発・保守の負担が大きく、専門知識も必要です。一方、アプリを導入すれば、コーディングなしですぐにマイページのおすすめ商品表示を始められます。

「まずはマイページのクロスセルがどれくらい効果があるのか試したい」という段階であれば、低コストで手軽に始められるアプリから小さくスタートするのがおすすめです。効果を確かめたうえで、必要に応じて独自実装を検討するのが、リスクの少ない進め方です。

おすすめ Shopify アプリ「シンプル注文履歴おすすめ商品｜お手軽マイページアップセル」紹介

マイページにおすすめ商品を手軽に表示できるアプリとして、「シンプル注文履歴おすすめ商品｜お手軽マイページアップセル」 をご紹介します。

アプリの基本情報

• アプリ名：シンプル注文履歴おすすめ商品｜お手軽マイページアップセル
• 開発元：株式会社 UnReact（日本製）
• 料金：Basic Plan $6.99/月（7 日間無料体験／年払いで実質 2 ヶ月分無料）
• 対応ページ：注文状況ページ・注文詳細ページ（新しいお客様アカウント）
• 特徴：商品ごとのおすすめ商品を手動設定、デフォルトおすすめリスト、ノーコード設置、日本語対応

▼ アプリストアはこちら
https://apps.shopify.com/sa-192-ur-account-upsell?locale=ja

できること

お客様がご自身のマイページで注文内容を確認するとき、そのページに「あなたへのおすすめ」としてクロスセル商品を表示できます。本アプリの主な特徴は次のとおりです。

注文状況ページにクロスセル商品を表示できる

チェックアウト直後に表示される注文状況ページや、マイページの注文詳細ページに、おすすめ商品を並べて表示できます。お客様が注文内容を確認するタイミングは関心が高まっている瞬間でもあるため、自然な形で追加購入をご案内できます。

表示するおすすめ商品を自由に設定できる

商品ごとに「この商品を買った方へのおすすめ」として関連商品を手動で登録できます。お店だからこそ分かる相性の良い組み合わせをそのまま提案できるので、自動レコメンドにはない、きめ細やかなご案内が可能です。

見出しや商品数、表示順番を簡単に設定できる

おすすめ枠の見出しや説明文、表示する商品の件数、並び順（設定した順番／ランダム）などを管理画面から自由に変更できます。季節やキャンペーンに合わせて見出しを変えるなど、訴求の調整も手軽に行えます。

顧客マイページから直接カートに追加・今すぐ購入できる

表示されたおすすめ商品は、お客様が数量を選んでそのままカートに追加したり、今すぐ購入してチェックアウトへ進んだりできます。商品ページへ移動する手間がないため、追加購入のハードルを下げ、スムーズな購入体験を提供できます。

アプリのインストール手順

まずはアプリをインストールしましょう。料金は Basic Plan $6.99/月で、インストールから 7 日間は無料でお試しいただけます。

1. Shopify 管理画面の左下にある「設定」をクリックします。

   

2. 「アプリ」をクリックし、「Shopify App Store」へ移動します。

   

3. 検索窓にアプリ名「シンプル注文履歴おすすめ商品」を入力し、表示されたアプリをクリックします。

   

4. アプリ詳細画面で「インストール」をクリックします。

   

5. 権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

   

アプリをマイページに追加（有効化）

インストールが完了したら、お客様のマイページにおすすめ商品ブロックを表示するための設定を行います。本アプリのブロックは、Shopify の「チェックアウトとアカウント」のエディタから追加します。

1. アプリの管理画面を開きます。

   

2. 「追加する」ボタンをクリックします。チェックアウトとアカウントのエディタが自動で開きます。

   

3. エディタが開いたら、「＋ボタン」をクリックしアプリを追加します。おすすめ商品ブロックの表示位置や設定を確認して「保存する」をクリックします。

   

アプリの設定項目を理解する

関連商品のマッピング設定

どの商品にどのおすすめ商品を表示するかは、アプリの管理画面で設定します。

1. アプリの管理画面から「関連商品を設定する」、もしくはサイドバーから「関連商品の設定」を開きます。

   

2. 「関連商品を新規追加」ボタンをクリックし、おすすめの元になる商品を選びます。

   

3. その商品に紐づけたい「おすすめ商品（関連商品）」を選択して並べます。並び順がそのまま表示順になります。設定が完了したら「保存」をクリックします。

   

おすすめ商品は 1 商品あたり最大 20 件まで設定できます。注文に含まれている商品はおすすめ候補から自動で除外されるため、購入済みの商品が重複表示されることはありません。

デフォルトおすすめ商品リストの設定

関連商品が設定されていない商品や、おすすめが不足している場合に表示される「デフォルトおすすめ商品リスト」を用意できます。ストア全体の代替リストとして最大 20 件まで設定できるため、どの注文でもおすすめ枠が空にならず安心です。新商品や売れ筋商品を登録しておくのがおすすめです。

表示・見出し・説明文の設定

表示設定からは、おすすめ商品の見た目や挙動を細かくカスタマイズできます。

• 表示件数：1〜12 件（初期値 4 件）
• 並び順：設定した順番（manual）／ランダム（random）
• 売り切れの商品をおすすめに表示しない：在庫切れ商品を除外（初期値オフ）
• 割引前価格を表示する：割引前価格を取り消し線付きで表示（初期値オン）
• 見出しテキスト：最大 60 文字（空欄なら言語に応じた初期文言）
• 説明文テキスト：最大 500 文字（任意）

見出しや説明文を空欄のまま保存した場合は、ストアの表示言語に合わせた初期の翻訳が自動で表示されます。日本語ストアでは日本語、英語ストアでは英語というように言語に追従します。

ボタンの設定

おすすめ商品のボタンも自由にカスタマイズできます。

• ボタンの種類：「カートに追加」または「今すぐ購入」（初期値はカートに追加）
• 「カートに追加」ボタンの文言：最大 30 文字
• 「今すぐ購入」ボタンの文言：最大 30 文字

「カートに追加」はほかの商品とまとめて購入してほしい場合に、「今すぐ購入」はスムーズに購入を完了してほしい場合に便利です。

すぐ使えるおすすめ設定例

ユースケース1：消耗品・関連商品のクロスセル

コーヒー豆やサプリメント、化粧品などの消耗品ストアでは、メイン商品に「フィルター」「詰め替え」「お手入れグッズ」などを関連商品として登録すると効果的です。並び順は「設定した順番（manual）」にして、特におすすめしたい商品を上位に配置しましょう。

ユースケース2：新商品・売れ筋商品の認知拡大

すべての商品に個別のおすすめを設定するのが難しい場合は、デフォルトおすすめ商品リストに新商品や売れ筋商品を登録しておきましょう。並び順を「ランダム（random）」にすると、表示のたびに違う商品が目に入り、回遊を促せます。

文言のテンプレ例

• 見出し：「あなたへのおすすめ」「こちらもいかがですか？」「次のお買い物に」
• 説明文：「お気に入りに加えてみませんか？」「ご一緒にいかがですか？」「人気の商品を集めました。」

関連施策との組み合わせ

マイページのおすすめ商品表示は、単体でも効果がありますが、他の施策と組み合わせることでさらにリピート率を高められます。

お気に入り（ウィッシュリスト）機能との組み合わせ

マイページにお気に入りリストを表示できる「シンプル Wishlist｜お手軽お気に入り」と組み合わせると、お客様が「気になっている商品」と「お店からのおすすめ商品」の両方をマイページで確認できるようになります。お客様自身の関心と、お店からの提案を同時に届けられるため、再購入のきっかけを増やせます。

購入後（サンクスページ）のアップセルとの組み合わせ

チェックアウト直後のサンクスページにクロスセル商品を表示できる「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」と組み合わせれば、「購入直後のサンクスページ」と「後から確認するマイページ」の両方のタイミングでおすすめを届けられます。購入フローのなかで複数のタッチポイントを作ることで、追加購入の機会を最大化できます。

メールマーケティングとの組み合わせ

注文確認メールや配送完了メールにおすすめ商品を載せる施策と、マイページのおすすめ商品表示を組み合わせると、メールとサイトの両面からお客様にアプローチできます。メールで興味を持ったお客様がマイページを訪れた際に、同じ系統のおすすめ商品が表示されることで、購入につながりやすくなります。

テーマのコード編集で実装する場合のサンプルコード

アプリを使わずに、Customer Account UI Extension でマイページにおすすめ商品を表示する場合の実装イメージを紹介します。

実装の流れ

1. Shopify CLI で Customer Account UI Extension を作成する
2. 注文状況ページのブロックとしてコンポーネントを登録する
3. おすすめ商品データを取得して一覧表示する
4. カートに追加する処理を実装する
5. ビルドしてデプロイする

拡張機能の登録

import {
  reactExtension,
  BlockStack,
  Heading,
  Text,
  Grid,
  Image,
  Button,
} from '@shopify/ui-extensions-react/customer-account';

// 注文状況ページのブロック拡張として登録
export default reactExtension('customer-account.order-status.block.render', () => (
  <RecommendationBlock />
));

おすすめ商品の取得と表示

import { useState, useEffect } from 'react';

const RecommendationBlock = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    // バックエンド（App Proxy 等）からおすすめ商品を取得する想定
    const fetchRecommendations = async () => {
      const response = await fetch('/apps/account-upsell/recommendations');
      const data = await response.json();
      setProducts(data.products ?? []);
    };
    fetchRecommendations();
  }, []);

  // おすすめがない場合は何も表示しない
  if (products.length === 0) {
    return null;
  }

  return (
    <BlockStack spacing="loose">
      <Heading level={2}>あなたへのおすすめ</Heading>
      <Text>お気に入りに加えてみませんか？</Text>
      <Grid columns={['25%', '25%', '25%', '25%']} spacing="base">
        {products.map((product) => (
          <BlockStack key={product.id} spacing="tight">
            <Image source={product.image} />
            <Text emphasis="bold">{product.title}</Text>
            <Text>{product.price}</Text>
            <Button onPress={() => addToCart(product.variantId)}>カートに追加</Button>
          </BlockStack>
        ))}
      </Grid>
    </BlockStack>
  );
};

カートに追加する処理

const addToCart = async (variantId) => {
  // 数量 1 で選択した商品をカートに追加する
  const result = await applyCartLinesChange({
    type: 'addCartLine',
    merchandiseId: variantId,
    quantity: 1,
  });

  if (result.type === 'error') {
    console.error('カートへの追加に失敗しました', result.message);
  }
};

コード実装の注意点

• おすすめ商品データ（商品ごとのマッピング、デフォルトリスト）を管理する仕組みを自前で用意する必要があります。
• 注文に含まれる商品の除外や、売り切れ商品の制御なども自分で実装する必要があります。
• Shopify のアップデートに合わせて、拡張機能のバージョンや API の追従が必要です。

このように、コードでの実装は自由度が高い反面、開発・保守の負担が大きくなります。手軽に始めたい場合は、専用アプリの利用を検討するとよいでしょう。

運用のコツ

• まずはデフォルトおすすめリストに売れ筋商品を入れ、全体で効果を確認してから、主力商品に個別のおすすめを設定していくと効率的です。
• 見出しや説明文は、季節やキャンペーンに合わせて定期的に見直しましょう。
• 表示件数は多すぎるとページが煩雑になります。4〜6 件程度から始めて、反応を見ながら調整するのがおすすめです。
• 並び順を「ランダム」にすると、リピーターのお客様にも毎回違う商品を見せられ、マンネリ化を防げます。

よくある質問

Q. Shopify の標準機能だけでマイページにおすすめ商品を表示できますか？
A. いいえ、新しいお客様アカウントの注文状況ページ・注文詳細ページに商品ごとのおすすめ商品を表示するには、コード実装かアプリの導入が必要です。

Q. おすすめ商品は商品ごとに設定できますか？
A. はい。「シンプル注文履歴おすすめ商品｜お手軽マイページアップセル」では、商品ごとに関連商品を手動で設定できます。1 商品あたり最大 20 件まで登録可能です。

Q. おすすめ商品を設定していない商品はどうなりますか？
A. デフォルトおすすめ商品リストが表示されます。これにより、どの注文でもおすすめ枠が空になりません。

Q. 購入済みの商品がおすすめに表示されてしまいませんか？
A. その注文に含まれている商品は、おすすめ候補から自動で除外されます。重複して表示される心配はありません。

Q. 多言語ストアでも使えますか？
A. はい。見出しや文言を空欄にしておくと、ストアの表示言語に合わせた初期翻訳が自動で表示されます。

Q. 料金はいくらですか？
A. Basic Plan $6.99/月です。7 日間の無料体験があり、年払いにすると実質 2 ヶ月分が無料になります。

まとめ

• Shopify のマイページ（新しいお客様アカウント）におすすめ商品を表示すれば、関心が高まったタイミングでアップセル・クロスセルができ、リピート購入を促せます。
• 標準機能だけでは実現できないため、コード実装かアプリ導入が必要です。
• コード実装は自由度が高い反面、開発・保守の負担が大きいため、まずはアプリで小さく試すのがおすすめです。
• 「シンプル注文履歴おすすめ商品｜お手軽マイページアップセル」は、商品ごとのおすすめ設定・デフォルトリスト・ノーコード設置・日本語対応を備え、月額 $6.99 から手軽に始められます。

マイページは、既存顧客の関心が高まっている貴重なタッチポイントです。ぜひ活用して、ストアの売上アップにつなげてください。

参考記事

• Shopify でマイページ（新しいお客様アカウント）におすすめ商品を表示する方法とアプリ｜アップセル・クロスセル徹底解説
• Shopify の新しいお客様アカウントにおすすめ商品を表示できるアプリ6選｜マイページでアップセル・クロスセル
• Shopify のおすすめ商品・アップセル・クロスセルアプリ12選｜マイページから売上を伸ばす