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つ紹介

Last updated at Posted at 2025-04-16

はじめに

近年、EC サイトの運営には高い柔軟性と拡張性を兼ね備えたプラットフォームが求められるようになってきました。その中でも「Shopify」は、世界的に利用されている多機能な EC 構築サービスとして注目を集めています。日本国内でも Shopify ストアを開設する事業者が急増しており、競合が激しくなる中でいかに 顧客の購入意欲を高める仕掛け を取り入れるかが課題になっています。

特に、Shopify では 「カートに追加ボタン」 の挙動をカスタマイズして、商品がカートに追加されたタイミングで 「ポップアップ」 を表示し、クロスセル(関連商品やおすすめ商品などの追加購入促進)を促す方法が人気です。「一度にまとめて買うとお得」「この商品と一緒にいかがですか?」といった訴求をタイミングよく行うことで、客単価(AOV) を上げやすくなります。

本記事では、「Shopify カートに追加ボタン カスタマイズ クロスセル ポップアップ」 というキーワードを意識して、クロスセル用のポップアップを導入・実装できるおすすめの方法とアプリを 5 つ 紹介します。最初にご紹介するアプリは、「シンプルカート追加時ポップアップクロスセルアプリ」 という名前で、直感的な操作が可能なため初心者でも導入しやすく、デザインや表示方法の自由度も高いのが特長です。記事前半では、このアプリの利用手順を豊富な画像とともに詳しく解説します。

後半では、その他の 4 つの人気アプリをそれぞれ でまとめ、さらに ワンポイント解説 を付け加えて紹介します。店舗の規模や販売戦略に合わせて、自分に合った方法・アプリをうまく取り入れてみてください。

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


シンプルカート追加時ポップアップクロスセルアプリ

アプリ概要

「シンプルカート追加時ポップアップクロスセルアプリ」 は、Shopify アプリとして提供されており、購入者が商品をカートに追加した瞬間に、手動で選んだ関連商品やおすすめ商品をポップアップで表示 できる機能を実装できます。テキストやボタンの文言、色なども簡単に変更可能なので、ブランドイメージに合わせたカスタマイズがしやすいのが特徴です。
料金は月額 $6.99(1 週間の無料お試し期間あり)となっています。まずは無料トライアルを利用しながら、自店のデザインやオファーにマッチするかを試してみるとよいでしょう。

シンプルカート追加時ポップアップクロスセルアプリ


アプリでできること

シンプルカート追加時ポップアップクロスセルアプリ

カート追加時にクロスセルポップアップを表示

カート追加時にクロスセルポップアップを表示

購入者が商品をカートに入れた直後に、関連商品を提案するポップアップを表示できます。「一緒に買うと便利」「セットでお得」など、タイミングよく訴求しやすいのが魅力です。

クロスセルとして表示する商品を手動で選択可能

クロスセルとして表示する商品を手動で選択可能

おすすめしたい商品を 手動でピックアップ できます。自動レコメンドではなく、あえて「セット商品を指定したい」といったシーンで非常に役立ちます。

ノーコードでカスタマイズできる

ノーコードでカスタマイズできる

ストアのブランドカラーやロゴに合わせて文字色・背景色を変更したり、ポップアップに表示する文言を自由に調整できます。コードの知識がなくても使えるので、導入ハードルが低いです。

1クリックでテーマに追加

1クリックでテーマに追加

アプリの管理画面にあるボタンをクリックするだけで、現在利用中のテーマにポップアップ機能を反映できます。複雑なコード編集は不要です。


アプリのインストール方法

「シンプルカート追加時ポップアップクロスセルアプリ」 の導入手順は下記のとおりです。

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

    「設定」をクリック

  2. 左側メニューの「アプリと販売チャネル」をクリックし、さらに「Shopify App Store」ボタンを選択します。

    Shopify App Storeをクリック

  3. App Store 画面に遷移したら、検索窓で 「シンプルカート追加時ポップアップクロスセルアプリ」 と入力し、表示されたアプリをクリックします。

    アプリをクリック

  4. アプリの詳細ページ(こちら)が開いたら、「インストール」ボタンをクリックします。

    「インストール」ボタンをクリック

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

    限を確認して「インストール」を完了

  6. インストール完了後、下記のようなアプリ管理画面が表示されれば準備完了です。

    管理画面が表示


テーマへの組み込み方法

自動でアプリをテーマに追加する場合

  1. アプリの管理画面下部で、対象のテーマを選択して「テーマに追加」をクリックします。

    テーマを選択して「テーマに追加」をクリック

  2. 有効化に成功すると、下記のようにアプリが有効になった状態が表示されます。右上の「保存する」をクリックして変更を保存しましょう。
    「保存する」ボタンをクリックして保存

手動でアプリをテーマに追加する場合

自動追加がエラーとなったり、うまく反映されない場合は下記の手順を行います。

  1. アプリ管理画面で対象のテーマを選択し、「テーマをプレビュー」をクリックします。

    テーマを選択し、「テーマをプレビュー」ボタンをクリック

  2. カスタマイズ画面に入り、左メニューにある埋め込みアプリアイコンをクリックします。

    左側にある埋め込みアプリアイコンをクリック

  3. 「シンプルカート追加時ポップアップクロスセルアプリ」を有効化し、右上の「保存する」ボタンをクリックします。

    アプリを有効化し、「保存する」ボタンをクリック

これでテーマへの組み込みは完了です。


ポップアップのカスタマイズ

テーマに組み込めたら、アプリの 「カスタマイズ」 画面を開き、ポップアップのデザインや文言を調整していきます。

  1. テーマのカスタマイズ画面内で、左側の埋め込みアプリセクションから「シンプルカート追加時ポップアップクロスセルアプリ」を選択。

    埋め込みアプリ内の「シンプルカート追加時ポップアップクロスセルアプリ」をクリック

  2. 下記のような設定項目が並ぶので、ストアのイメージに合わせて調整します。

    設定項目が表示される

基本設定

  • ポップアップのタイトル・説明文
    クロスセルの見出しやキャッチコピー、追加商品の魅力を伝えるテキストをここで入力します。

    ポップアップの見出し文言やメッセージ

ダイアログスタイル設定

  • タイトル文字色 / 説明文文字色 / ポップアップ背景色
    ブランディングに合わせたカラーを設定できます。

    タイトル文字色 / 説明文文字色 / ポップアップ背景色

  • 文字サイズ(PC / モバイル)
    タイトルや説明文の大きさを端末別に分けて調整し、視認性を高めることができます。

    文字サイズ(PC / モバイル)

  • 閉じるボタンの文言・文字サイズ・色
    ポップアップを閉じるボタンのテキストやカラーリングを変更できます。

    閉じるボタンの文言・文字サイズ・色

おすすめ商品設定

  • おすすめ商品リスト(最大4件)
    実際にクロスセルとして提案したい商品を自由に選んで表示します。

    おすすめ商品リスト(最大4件)

  • おすすめ商品の列数(PC / モバイル)
    PC 表示とスマホ表示で商品を並べるカラム数を指定できます。

    おすすめ商品の列数(PC / モバイル)

再表示までの日数設定

  • 再表示までの日数
    一度ポップアップを閉じたユーザーに対し、どのくらいの期間を空けて再度ポップアップを表示するか設定します。0 にすると毎回表示されます。

    再表示までの日数

追加 CSS

  • 追加のカスタマイズ
    アプリ標準の設定画面では実現できないデザインや細かい調整を行いたい場合、ここに任意の CSS を記述できます。

    追加のカスタマイズ


まとめ

「シンプルカート追加時ポップアップクロスセルアプリ」 を使うと、以下のメリットが得られます。

  • カートに商品が追加されたタイミング でポップアップが表示され、追加購入を促しやすい
  • ポップアップに表示する商品を 手動で選択可能 なので、売りたい商品を確実に訴求できる
  • テキストやカラー、ボタンのデザインを ノーコードで簡単に調整 できる
  • テーマへの組み込みも 1クリック で行える

自社ストアで「あともうひと押し 欲しい」というタイミングに、絶妙なクロスセルを実現できる便利なアプリです。無料トライアルがあるので、気軽に試してみてください。

シンプルカート追加時ポップアップクロスセルアプリ

シンプルカート追加時ポップアップクロスセルアプリ


その他のアプリ

ここからは、カートに追加した後のポップアップ表示でクロスセルを促す または 「カートに追加ボタン」のカスタマイズでアップセル機能を拡充できる アプリを 4 つ紹介します。それぞれの特徴を で整理し、続いて ワンポイント解説 を加えているので、ぜひ参考にしてみてください。


Kaching Popup Discount Upsell

Kaching Popup Discount Upsell

アプリ概要

項目 内容
アプリ名 Kaching Popup Discount Upsell
価格 無料
開発者 Kaching Bundles & Upsells
主な機能・ハイライト - クロスセル、アップセルのポップアップ表示
- 一緒に購入されることの多い商品をワンクリックで追加
- カスタマイズ自由度が高い
- 「Add to cart」や「Exit intent」など複数のトリガーに対応
評価 4.9 (30件)
対応言語 / 対応テーマ 英語 / Shopify 標準テーマのほか様々なテーマに対応
カテゴリ アップセルとクロスセル

ワンポイント解説

無料ながら使いやすさと柔軟なポップアップ表示を両立しているのが特徴です。トリガー条件を細かく設定でき、たとえば「商品をカートに追加した直後に表示」「購入ページを離れようとするときに表示」など、さまざまなタイミングでクロスセル・アップセルができます。サポート体制もしっかりしているため、初心者の方でも安心して導入できるでしょう。


Essential Upsell & Cross Sell

Essential Upsell & Cross Sell

アプリ概要

項目 内容
アプリ名 Essential Upsell & Cross Sell
価格 無料
開発者 Essential Apps
主な機能・ハイライト - 「Frequently Bought Together(FBT)」スタイルの関連商品提案
- カート内アップセル / カートドロワーアップセル
- デザインカスタマイズ機能
- BOGO(Buy One Get One)や一括割引も可能
評価 5.0 (553件)
対応言語 / 対応テーマ 英語 / Dawn 等 Shopify 標準テーマに対応
カテゴリ アップセルとクロスセル、カートのカスタマイズ

ワンポイント解説

FBT(よく一緒に購入される商品)をまとめて提案できたり、カート画面でも追加商品をおすすめできるなど、購入フローの途中でさまざまな切り口でクロスセルを仕掛ける ことが可能です。無料ながら高評価が多く、導入実績が豊富な点も安心材料。「一括購入で割引」「関連商品をまとめ買いさせたい」 といった要望にもしっかり対応してくれます。


Upsell & Cross Sell — Selleasy

Upsell & Cross Sell — Selleasy

アプリ概要

項目 内容
アプリ名 Upsell & Cross Sell — Selleasy
価格 - 無料インストール(50注文/月 までは無料)
- $8.99 / 月 (500注文まで)
- $16.99 / 月 (500+ 注文)
開発者 Logbase
主な機能・ハイライト - カート・購入ページ内アップセルやポップアップによるクロスセル
- 「Frequently Bought Together」機能
- ポスト購入(決済後)のアップセル画面も作成可能
- 多通貨・多言語ストアに対応
評価 4.9 (2,248件)
対応言語 / 対応テーマ 英語、ドイツ語、フランス語 等 / Shopify 標準テーマに対応
カテゴリ アップセルとクロスセル、商品バンドル

ワンポイント解説

Selleasy は多言語・多通貨ストアに強く、海外向けに展開しているショップでもアップセル・クロスセルを自在に行いやすいのが特長です。「50件/月まで無料」 なので、まずは少ない注文数からスタートして徐々に拡大していきたい方に嬉しい料金体系といえます。アプリ内でポスト購入アップセル(注文後画面に商品の追加購入を促す)も設定できるため、注文完了直後のホットなタイミング で売上を伸ばせる点が魅力でしょう。


ReConvert Upsell アップセル&クロスセル

ReConvert Upsell アップセル&クロスセル

アプリ概要

項目 内容
アプリ名 ReConvert Upsell アップセル&クロスセル
価格 - 無料プランあり
- 有料プラン $4.99~
開発者 ReConvert 💵
主な機能・ハイライト - 購入後の「サンクスページ」からアップセルを仕掛けられる
- カートアップセル、チェックアウトアップセル、ポスト購入アップセルと多彩
- ドラッグ&ドロップでカスタマイズ可能
評価 4.9 (5,589件)
対応言語 / 対応テーマ 英語 / 多くのテーマで利用可
カテゴリ アップセルとクロスセル、商品バンドル

ワンポイント解説

ReConvert は 「サンクスページ」(注文完了画面)を強力にカスタマイズできる点が特徴的です。購入が終わった直後の顧客に、割引付きの追加オファー を提案したり、誕生日を入力してもらう などの次回購入・顧客育成につながる情報を集めたりできます。もちろん、カート画面や決済画面でのアップセルも行えるため、一連の購入プロセス全体で売上アップを狙える でしょう。導入実績も多く、高評価レビューが目立つ点も安心です。


まとめと今後の展望

今回は、Shopify の「カートに追加ボタン」をカスタマイズして、クロスセルのポップアップを表示するアプリを 5 つ ご紹介しました。

  • 最初に解説した 「シンプルカート追加時ポップアップクロスセルアプリ」 は、導入・設定ともにシンプルで扱いやすく、ポップアップのデザインや商品表示を直感的にカスタマイズできます。運用を始めたばかりのショップでも使いやすいので、まずは無料トライアルで試してみるのがおすすめです。

  • その他の 4 つのアプリもそれぞれ強みが異なり、「FBT スタイルの関連商品提案」「決済画面・サンクスページでのアップセル」「多言語・多通貨対応」 など、さまざまなニーズに応えられる機能が備わっています。

Shopify では、商品をカートに追加する瞬間 はもちろん、カートページからチェックアウト、注文完了画面まで あらゆる接点でアップセルやクロスセルを仕掛けることが可能です。今回紹介したアプリをうまく組み合わせながら、以下のようなポイントを意識して取り組んでみてください。

  • 適切なタイミング・条件でポップアップを表示し、押し売り感を出さない
  • 同時に割引オファーや購入メリットを提示 し、追加購入のハードルを下げる
  • ターゲットや顧客層をセグメント し、最適な商品をレコメンド
  • オファーの効果測定 を行い、CTR や CVR の数値を見ながら設定を微調整する

クロスセルやアップセルの導入は、Shopify ストア全体の 客単価向上在庫回転率の改善 に大きく貢献します。ストアのデザインやブランドイメージを崩さないようにカスタマイズしつつ、ぜひ積極的に取り入れてみてください。どれか 1 つを試してみるだけでも、売上アップのきっかけがつかめるはずです。

本記事が、みなさまの Shopify ストア運営の一助となれば幸いです。最後までお読みいただき、ありがとうございました。今後も新しい施策を探求しながら、「Shopify カートに追加ボタン カスタマイズ クロスセル ポップアップ」 を活用し、より魅力的なオンラインショッピング体験を目指していきましょう。

参考記事

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

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?