Start Strong
Sell Smart
Manage with Ease
Market to Success

Buy Buttonの基本ガイド

Buy Buttonアプリは、顧客にとってシンプルでスムーズな購入体験を提供し、販売者にとっては販売チャネルを拡大する手段として機能します。

このアプリの特徴は、次のとおりです。

  • 便利な購入プロセス：Buy Buttonを任意のウェブページに埋め込むことで、顧客はページを移動することなく購入を完了できます。このスムーズなプロセスにより、商品画像、説明、価格が表示され、迅速な取引が可能になります。
  • 簡単な販売および注文管理：Buy Buttonを使用して、販売や注文を効率的に管理できます。Buy Buttonを介して行われた注文は追跡され、一元管理および包括的な販売データ分析が可能です。
  • 柔軟な設定：さまざまなウェブページの要件に合わせた多様なカスタマイズオプションを提供し、デザインや機能の柔軟性を実現します。

 

 

Buy Buttonの使用方法

以下の手順に従って、Buy Buttonを設定しましょう。

  1. Buy Buttonの作成：単一商品またはカテゴリ全体に対してBuy Buttonを生成するには、[作成] ボタンをクリックして [今すぐ移動] を選択します。
    1.1.png
  2. 商品を選択：商品ページに移動したら、Buy Buttonを設定したい任意の商品を選びます。商品詳細ページ右側にある商品の設定セクションから、販売チャネル横にある「管理する」をクリックします。「Buy Button」にチェックを入れて「完了」を選択します。既にBuy Buttonチャネルに登録されている商品があれば、そのまま次のステップへ進みます。
    1.2.png
  3. 表示スタイルの設定：Buy Buttonアプリに戻り、選択した商品やカテゴリに応じて、実際のシナリオやページ表示要件に基づいて表示スタイルとレイアウトを柔軟に設定します。
    1.3.1.png
    1.3.2.png
  4. コードの生成：右上に表示されている [次へ] ボタンをクリックしてコードスニペットを生成し、コードをコピーします。
    1.4.png
  5. コードの貼り付け：表示したいページのエディターにコードを貼り付けます。例えば、ブログ投稿のリッチテキストエディターにコードを貼り付けることができます。
    1.5.png
  6. カスタムページへの統合：SHOPLINEのカスタムページにBuy Buttonコードを統合する場合、生成されたコードに追加の修正が必要です。以下の補足コードをコピーして貼り付けます。
    <script type="text/javascript">
          var shoplineBuyContainer = document.createElement("div");
          shoplineBuyContainer.id = "collection-component-XXXXXX";var container = document.body.querySelector(".custom-page-render-container");
          container.append(shoplineBuyContainer);
    </script>
    1.6.png

 

 

効果的な活用方法

あらゆるシナリオで販売チャネルを拡大し、売上チャンスを最大化する

Buy Button機能を使えば、数クリックで商品用のBuy Buttonコードを簡単に生成できます。このコードを、自社サイト、SNSアカウント、オンラインストア、ブログ記事、KOLプロモーションプラットフォーム、マーケティングメールなど、HTMLコードをカスタムで挿入できる場所に貼り付けることで、どんな場面でも新しい販売チャネルに変えることができます。

多くのインフルエンサーは高品質なコンテンツを作成し、多くのトラフィックを集めていますが、コンテンツページ上で直接購入ができないのが現状です。そこで、関連するコンテンツページにBuy Buttonを追加すれば、消費者はコンテンツを読みながら直接購入できるため、トラフィックを売上に変換できます。

例えば、Benは自社の美容商品を販売しており、人気商品のBuy Buttonを作成し、WordPressで肌の質感改善についてのブログを投稿しました。読者は記事を読みながら、Buy Buttonをクリックすることで、手軽に商品を購入することが可能です。

ブログ記事以外にも、SHOPLINEのBuy Buttonは既存のオーディエンスを持ちながらも、eコマースの購入機能がないウェブサイトやインフルエンサーの推薦ページ、製品紹介ページなど、幅広いシナリオに対応しています。

Benはさらに、事前販売商品ページや同じターゲット層を持つ競合他社の店舗にもBuy Buttonを埋め込むことで、売上を拡大することができます。

 

購入までの道のりを短縮し、コンバージョン率を向上

Buy Buttonを追加することで、消費者がより短いステップで購入できるようになります。以前は、ブログや外部サイトで商品をプロモーションする際、外部リンクを通じて店舗サイトに移動してから注文を行う必要があり、購入完了までのプロセスが長くなり、途中で顧客を失う可能性が高くなっていました。

しかし、Buy Buttonを導入することで、消費者は訪問しているブログやウェブページ上で直接購入を完了でき、サイト移動の手間が省けます。このスムーズなプロセスにより、顧客の離脱を防ぎ、コンバージョン率が大幅に向上します。

 

低コストで新しい販売方法を作り、売上を拡大

Buy Buttonを活用すれば、低コストでアイデアを即座に売上につなげることができます。たとえば、メイクチュートリアル動画とBuy Buttonを同時に埋め込み、視聴中に購入できる環境を提供したり、事前販売商品ページにBuy Buttonを追加することも可能です。

また、他店と連携して補完的な販売も可能です。たとえば、ベーカリーを経営している場合、コーヒー豆を販売する店舗に自社のBuy Buttonを埋め込み、相乗効果を生む販売方法を展開できます。

単一商品やカテゴリ商品を表示するだけでなく、販売チャネルやプロモーションに応じたBuy Buttonの見た目も自由にカスタマイズできます。表示内容（ボタンのみ、商品概要、詳細情報など）、ボタンのカスタマイズ（テキスト、色、サイズなど）、カートの設定（背景、テキストなど）、注文ページへのナビゲーション設定も簡単に調整できます。