カスタム購入ボタンの作成・設置方法｜Buy Button App

「Buy Button App」をインストールすると、購入ボタンのデザインをカスタマイズし、ブログ、ストアの HTML、外部 Web サイトなどに設置できます。複数のマーケティングチャネルに購入ボタンを設置することで、商品の購入につなげやすくなります。

Buy Button App をインストールして設定する

STEP 1. Buy Button App をインストールする

「SHOPLINE管理画面 ＞ 拡張機能ストア」を開き、「Buy Button App」を検索してインストールします。

インストール完了後、Buy Button App の設定ページを開き、ストアのアカウントでログインします。 

STEP 2. 購入ボタンの対象商品を選択

ストアのアカウントにログインすると、「Select Product（商品を選択）」画面に自動的に移動します。

画面上部の検索欄に商品名を入力して検索するか、商品リストをスクロールし、購入ボタンを設置する商品を選択します。

STEP 3. 購入ボタンのレイアウトを選択する

商品を選択した後、「Layout Style」で「Classic」または「Basic」を選択します。

Basic レイアウト：

Classic レイアウト：

STEP 4. 購入ボタンのデザインを設定する

「Button Style」をクリックすると、購入ボタンのデザイン、表示テキスト、フォント、配色を設定できます。

STEP 5. デバイス別の表示をプレビューする

画面上部のデバイスアイコンをクリックすると、購入ボタンが各デバイスでどのように表示されるかをプレビューできます。

STEP 6. 購入ボタンのコードをコピーする

設定完了後、画面下部の「Get Code!」をクリックします。
表示されたコードをすべて選択してコピーするか、「Copy Code」をクリックしてコードをコピーします。

STEP 7. 購入ボタンのコードを Web サイトに設置する

コピーした購入ボタンのコードを、ボタンを設置する外部 Web サイトやブログなどの HTML に貼り付けます。

お客様が購入ボタンをクリックすると、ストアの商品購入手続きページへ直接移動します。

最終更新日：2026 年 9 月 8 日