コンテンツに進む
ShopifyでのEC運営に役立つメディア
SlashApp - スラッシュアプリ

【徹底解説】Bold Upsellでアップセル・クロスセルを促進してShopifyストア売上をUP!初期設定方法を丁寧に解説します。

【徹底解説】Bold Upsellでアップセル・クロスセルを促進してShopifyストア売上をUP!初期設定方法を丁寧に解説します。

この記事でわかること

  • Bold Upsellがどういうアプリか
  • Bold Upsellの無料プランで設定できる機能

Bold Upsellってどんなアプリ?

Bold Upsellは、Shopifyアプリストア上で☆4.6の高評価を受けているアップセル・クロスセルを促進するShopifyアプリです。今回はストアの売上アップを狙える、Bold Upsellの特徴を3つご紹介します。

ワンランク上の商品をサジェストできる

Bold Upsellでは商品をカートに入れようとしたユーザーに対して「ワンランク上のこんな商品はいかがですか?」とサジェストする機能を導入することができます。事前に設定した商品のサジェストだけではなく、無料アドオンを利用すれば顧客の購買データに基づいたおすすめ商品をサジェストすることも可能です。

カート料金に応じた特別なオファーができる

Bold Upsellではカートに入れた商品の総額に応じた特別オファーを導入することもできます。商品のオファーはもちろん、送料無料を追加することも可能です。また、逆に在庫のない商品を特別オファーには表示しないという設定もできるShopifyアプリです。

自分のShopifyストアの規模にあった有料プランを選べる

Bold Upsellは月に何回アップセルオファーをするかで有料プランが変わります。無料プランはないですが、14日間の無料トライアル期間は用意されているため、自分のShopifyストアでどのくらいアップセルを狙いたいかを考えて各プランを試してみてはいかがでしょうか。

プラン名 利用できる機能 価格(月額)
スターター
  • 月200回のアップセル機能
  • 無制限のオファー機能
  • アップセル・クロスセル促進
  • アップセル・クロスセル売上レポート
  • CSSデザインカスタマイズ
$9.99
プラス
  • 月1000回のアップセル機能
  • スタータープランで利用可能な全ての機能
$19.99
プレミアム
  • 月2000回のアップセル機能
  • スタータープランで利用可能な全ての機能
$39.99
プロ
  • 月5000回のアップセル機能
  • スタータープランで利用可能な全ての機能
$59.99

Bold Upsellの使い方

Bold Upsellはアップセル・クロスセル促進機能自体はシンプルで使いやすいShopifyアプリです。しかし、初期設定やアプリ有効化の方法が少し一癖あるのも事実です。そこで本記事では、初期設定の流れから、少しわかりづらい有効化設定の方法をご紹介します。

初期設定の流れ

    1. Bold UpsellのShopifyアプリストアからインストールする。
Bold Upsellの初期設定の流れBold Upsellアプリストアへ
    1. アプリのインストールを承認する
    2. サブスクリプションを承認する。
    3. ダッシュボードが表示されたら初期設定が完了です。
Bold Upsell初期設定の流れ

Bold Upsellの有効化設定

Bold Upsellは自動でテーマ適応する機能は搭載されていないため、手動でliquidコードをテーマファイルに挿入する必要があります。もしBold社にインストールを依頼する場合はダッシュボードから【Liquid Installation】をクリックしてください。以下では、Bold Upsellを有効化するための手順をご紹介します。テーマによってコードがあるファイルが異なることがありますので、ご注意ください。

    1. オンラインストアから「コードを編集」画面へ移動する。
Bold Upsellの有効化設定
    1. bold-common.liquidファイルに以下のリンク先のコードをペーストする

bold-common.liquidコード

 

    1. bold-upsell.cssファイルに以下のリンク先のコードをペーストする

bold-upsell.cssコード

 

    1. bold-upsell-custom.cssファイルに以下のリンク先のコードをペーストする

bold-upsell-custom.cssコード

 

    1. bold-common.liquidファイルの最後に以下のコードをペーストして保存する。
  • {{ 'bold-upsell.css' | asset_url | stylesheet_tag }}
  • {{ 'bold-upsell-custom.css' | asset_url | stylesheet_tag }}
Bold Upsellの有効化設定
    1. theme.liquidファイルの{{content_for_header}}行のすぐ下に以下のコードをペーストして保存する。
  • {%- render 'bold-common' -%}
Bold Upsellの有効化設定
    1. main-product.liquidファイルのカートに追加するボタンのclass名の先頭に「addocart」を追加して保存する。
Bold Upsellの有効化設定
    1. featured-product.liquidファイルのカートに追加するボタンのclass名の先頭に「addocart」を追加して保存する。
Bold Upsellの有効化設定
    1. cart-notification.liquidファイルの
      • <button class="button button--primary button--full-width" name="checkout" form="cart">{{ 'sections.cart.checkout' | t }}</button>
      のclass名の先頭に「checkout」を追加して保存する。
Bold Upsellの有効化設定
    1. main-cart-footer.liquidファイルの
      • <button type="submit" id="checkout" class="cart__checkout-button button" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
      • {{ 'sections.cart.checkout' | t }}
      • </button>
      のclass名の先頭に「checkout」を追加して保存する。
Bold Upsellの有効化設定
    1. cart-notification.liquidファイルの
      • <button class="checkout button button--primary button--full-width" name="checkout" form="cart">{{ 'sections.cart.checkout' | t }}</button>
      のtypeに「submit」を追加して保存する。
Bold Upsellの有効化設定
    1. product-form.jsファイルの
      • <button class="checkout button button--primary button--full-width" name="checkout" form="cart">{{ 'sections.cart.checkout' | t }}</button>
      のすぐ下に以下のコードを追加して保存する。
  • if(typeof BOLD === 'object' && BOLD.common && BOLD.common.eventEmitter && typeof BOLD.common.eventEmitter.emit === 'function') {
  • BOLD.common.eventEmitter.emit("BOLD_COMMON_cart_loaded");
  • }
  • });
Bold Upsellの有効化設定

まとめ

本記事のポイント

  • Bold Upsellはアップセル・クロスセルを狙える、Shopifyストアの規模に応じてプランを選べるShopifyアプリ。
  • 手動でのアプリ有効化が難しければBold社に無料で依頼するのもあり。
  • アプリ自体の操作方法はシンプルなものの、初期設定に少し苦戦する可能性はある。

アップセル・クロスセルを促進できるShopifyアプリ「Bold Upsell」をご紹介しました。初期設定や有効化の方法は少し手間どる方もいるかもしれませんが、設定さえできてしまえば後は簡単かつシンプルに操作できるShopifyアプリです。効率的かつ、データに基づいたアップセル・クロスセルによる売上アップを目指したい方は、ぜひBold Upsellを試してみてください。

Bold Upsellアプリストアへ
ご覧いただいてる皆様へ

本記事でご紹介したShopifyアプリの性能やプラン料金、無料プランでの制限などは記事公開時の情報となっております。本記事公開後、アプリ運営会社がアップデートや方針変更をした場合には本記事の情報の限りではございません。最新のアプリ情報は、各Shopifyアプリストアページをご参照ください。

Shopifyアプリの開発、承ります。

SlashApp運営チームは、アプリ開発も行っております。開発したいアプリの概要を教えていただければ、仕様設計から細かくサポートいたします。 ぜひお問い合わせください。