catch-img

Shopify(ショッピファイ) 購入ボタン(Buy Button)をもう少し詳しく

以前の記事で、自社のブランドサイトやSNS記事などに Shopifyの購入ボタン(Buy Button)を設置する方法を紹介しておりますが、もう少し情報を補足します。


目次[非表示]

  1. 1.画面フロー
  2. 2.Shopify Lite版
  3. 3.Buyボタンのカスタマイズ
  4. 4.SNS向け購入ボタン
  5. 5.Shop Pay
  6. 6.購入ボタンの優れたところ/いまいちなところ
  7. 7.最後に



画面フロー

Shopifyの購入ボタンの動作

Shopifyの購入ボタンはクリックしたときのアクションとして次の3通りがあります。

・カートに商品を追加する

バリエーション(規格)を持たない商品を直接Shpifyのカートに入れることができます。

・チェックアウトに移動する

商品をカートに追加するだけでなく、すぐに注文手続きに進むことができます。「今すぐ買う」ボタンとイメージしていただければ分かりやすいと思います。

・商品の詳細を開く

Shopifyの商品詳細をポップアップ表示します。基本的にはバリエーション(規格)がある商品のバリエーションを選択する目的で使用します。


画面フロー

前述の3つのアクションを簡単な画面フロー図にまとめると下図のようになります。下図において、各アクションは次のように表現しています。

・商品の詳細を見る→「見る」

・カートに商品を追加する→「カート」

・チェックアウトに移動する→「いますぐ買う」


Shopify Lite版

Shopify Liteとは

”Shopify Liteは、POS Liteを使用した対面販売や既存のウェブサイトへの購入ボタンの追加を検討しているマーチャント向けのプランです。Shopify Liteでは、レポートの確認やギフトカードの発行などの機能もご利用いただけます。ただし、Shopify Liteではネットショップを構築することはできません。”  -https://www.shopify.jp/liteより引用

つまり、商品数の少ない専門店などは、わざわざネットショップを設置せずとも、ブランドサイトやSNSの記事に「購入ボタン」を設置して、 Shopifyの商品管理や注文管理などの管理機能だけを利用するような使い方ができます。



Buyボタンのカスタマイズ

洗練されたブランドサイトや映えるSNS記事には似合わない購入ボタンは置きたくないことでしょう。ここでは購入ボタンのデザインがどれほど自由度が高いかをご紹介します。

購入ボタンの種類

まず、購入ボタンのには商品購入ボタンとコレクション購入ボタンの2種類があります。商品購入ボタンは、そのボタンを設置したサイトで紹介している1商品を購入につなげるボタンです。また、コレクション購入ボタンはブランドを紹介しているサイトで、そのブランドに属する複数商品の中から商品を選んでいただくような使い方になります。


レイアウトスタイル

レイアウトスタイルは購入ボタンをどのように表示するかを指定することができます。

・フルビュー

フルビューは通常のECサイトの見栄えになります。


・クラシック

クラシックは必要最小限の表示を行います。ポップアップで詳細情報を表示させることもできます。


・ベーシック

ベーシックはボタンのみを表示します。これもポップアップで詳細情報を表示させることができます。


ボタンのスタイル

ボタンのサイズや色、キャプション(文字)のフォント種類、サイズ、色を変えることができます。フォントはShopifyが提供するフォントですが、標準では日本語フォントがないため必要に応じてセットアップする必要があります。


レイアウト

ボタンに表示するキャプション(文字)、数量指定の可否、商品名や価格などのフォント、サイズ、色を変更することができます。



ポップアップ

レイアウトスタイルで「クラシック」または「ベーシック」を選択したとき、ポップアップの詳細を編集することができます。


ショッピングカート

ショッピングカートの見出し、小計(商品金額合計)のラベル、追加情報(補足)、チェックアウトボタンのキャプション、カートが空の場合のメッセージ、ならびに背景色などを変更することができます。


高度な設定

高度な設定ではチェックアウト時の画面動作を変更することができます。



SNS向け購入ボタン

LINE、Twitter、InstagramなどのSNS用の購入ボタンはもっとシンプルに作成することができます。Shopifyの商品管理で商品詳細画面を開き、画面の右上方にある「その他の操作」から「Create checkout link」を選択。バリエーションのある商品の場合は対象とするバリエーションを選択するとチェックアウトのリンクが表示されるので「リンクをコピーする」ボタンでクリップボードにコピーし、SNS記事にペーストします。なお、このチェックアウトリンクに「Shop Pay」や Shopifyで発行したクーポンコードをつけると、なおさら便利でお得にショッピングを楽しんでいただけることでしょう。



Shop Pay

Shop Pay (https://shop.app/) はShopifyの決済方法の1つです。

※ Shop Payのトップページは英語サイトです。「Log in」をクリックすると Shop Payのログインおよびサインアップに進むことができます。

※「Download Shop」というモバイルアプリのダウンロードボタンがありますが、このモバイルアプリは日本に未対応ですのでご注意ください。(2021年10月現在)

Shop Payに住所やクレジットカード情報を登録しておくと、Shopifyストア(※)で注文したときに、より簡単に買い物ができるようになります。お客様が Shop Payを利用する際にはスマホに送信される SMSの6桁の認証コードを入力し、配送方法を選んで決済完了ボタンを押すだけです。

※Shopifyストアの決済方法として Shop Payが有効になっている必要があります。



購入ボタンの優れたところ/いまいちなところ

優れたところ

・ブランドサイトやSNSなどから直接注文に進めるため途中離脱を抑えることができます。

・Shopifyの全プランで導入可能で、追加費用がかかりません。

・HTML、CSS、JavaScriptの知識が無くても、設定画面で柔軟なデザインが可能です。

・HTML、CSS、JavaScriptの知識があればさらに自由にデザインできます。

いまいちなところ

・1商品1購入ボタンのため、複数商品を選択して一度にカートに入れるということができません。

・色違いなどのバリエーション違いの商品を注文したいときも同様です。

・サブスクリプションには対応していません。

・購入ボタンを作成した商品、あるいは購入ボタンをどこに掲載したかを管理していないため、特に多数の商品を扱っているストアで適切に商品管理をしていないと、古いSNS記事から販売終了した商品の注文が舞い込んでくるということが起こりえます。



最後に

世の若者は SNSを起点に商品を目にしたり、気になる商品の情報も検索サイトではなく SNSで探ることが多くなっており、また、ハイブランドよりも自分に合った商品を好む傾向があるとも言われています。したがって、独自ブランドを展開しているお店、一品あるいは数品で勝負している専門店はオンラインストアを立てるよりもブランドサイトや SNS発信に力を入れていることでしょう。Shopifyの購入ボタンは、そんなお店の方にぜひお勧めしたいしくみです。


トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア

トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopify構築によって得られた知見などをブログ記事にて発信していきます。

ShopifyのECサイト構築はトランスコスモスにお任せ!

トランスコスモスは、Shopifyのエンタープライズ版「Shopify Plus」の優れた成果を持つ提携企業として認定された、国内に7社しかいない(2021年9月時点)最上位の公式パートナーです。

Shopifyを使ったECサイト制作から、調査分析・戦略立案、WEB広告(SEM)、ECサイト制作、お客様サポート、受発注、フルフィルメントまで業務設計・運用代行いたします。



Shopify(ショッピファイ)ストア構築・制作、運用代行について
問い合わせ

アップロードしています。少々お待ちください。
お気軽に
お問い合わせください

Shopify(ショッピファイ) ECストア構築・運用代行

トランスコスモスは日本に7社しかない最上位の「Shopifyプラスパートナー」企業です

関連記事


【無料】セミナー動画視聴

2021年09月29日オンラインECセミナー動画【無料視聴】

『製薬企業 第3極の販路圏 DXプリホールセラー企業はなぜ誕生した?』第2弾は「MRのノンコア業務アウトソース」をテーマにロート製薬株式会社再生医療事業開発部 部長 兼 メディカル事業開発部 部長西巻賢一様をお迎えし、鼎談スタイルで語り合っていただきます。

2021年09月28日オンラインECセミナー動画【無料視聴】

デジタルシフトが求められる今、D2Cへの関心が高まり、ダイレクトにお客様とつながる D2C ビジネスは注目を集めています。本セミナーでは、顧客視点で取り組むD2CとEC事業を成功させるために不可欠なプラットフォーム『Shopify』の歴史・メリットなど基本のすべてをお伝えさせていただきます。

2021年7月13日オンラインECセミナー動画【無料視聴】

デジタルシフトが求められる今、D2Cへの関心が高まり、ダイレクトにお客様とつながる D2C ビジネスは注目を集めています。本セミナーでは、顧客視点で取り組むD2CとEC事業を成功させるために不可欠なプラットフォーム『Shopify』の歴史・メリットなど基本のすべてをお伝えさせていただきます。


EC関連サービス



採用情報(求人)

EC流通に関する新規サービス企画/セールス【正社員】【採用・求人情報】

激変する流通業界の中で、お客様企業の満足度を高めるサービスの実現のために、最適なロジスティクスシステムをデザインしていただく、裁量権が大きいポジションでのお仕事です。システム設計・構築・導入プロジェクトマネジメントを通して、お客様企業の事業拡大の支援をしていただきます。

ECロジスティクス運用システムマネージャー【正社員】【採用・求人情報】

激変する流通業界の中で、お客様企業の満足度を高めるサービスの実現のために、最適なロジスティクスシステムをデザインしていただく、裁量権が大きいポジションでのお仕事です。システム設計・構築・導入プロジェクトマネジメントを通して、お客様企業の事業拡大の支援をしていただきます。

EC物流センターのバックオフィス業務マネージャー【正社員】【採用・求人情報】

トランスコスモスの求人情報です。バックオフィス業務は、関連部署との調整やお客様企業の対応に至るまで、その業務プロセスの中核をなす重要なポジションとなりますが、今後ますます需要が伸びるECサービスにおいて、新規サービス導入に向けた体制・運用構築など、事業拡大に携わることで自身のキャリアアップを目指すことも可能です。

お気軽に
お問い合わせください

Shopify(ショッピファイ) ECストア構築・運用代行

トランスコスモスは日本に7社しかない最上位の「Shopifyプラスパートナー」企業です

Shopify人気記事ランキング

 Tag(タグ)

 記事検索

 カテゴリー

 【無料】募集中セミナー

全3件中 1〜 3件を表示

 【無料】資料ダウンロード

Shopify操作マニュアルのダウンロード一覧

ショッピファイの管理画面の使い方を図解で開設した操作マニュアル資料をPDFにてダウンロード頂けます。

フルフィルメント(ロジスティクス)サービス資料無料ダウンロード一覧

フルフィルメント(ロジステックス)サービス資料無料ダウンロード一覧になります。

ECサービス紹介資料無料ダウンロード一覧

トランスコスモスのEC関連のサービス資料の一覧ページです。PDFにて概要のわかる資料を「無料」でダウンロードして頂けます。

セミナー発表資料の無料ダウンロード一覧

トランスコスモスのEC関連のWEBセミナーで使用した資料一覧ページです。PDFにてセミナーの内容がわかる資料を「無料」でダウンロードして頂けます。

全4件中 1〜 4件を表示

Shopify認定パートナー企業

トランスコスモスは日本に7社しかない最上位の「Shopifyプラスパートナー」です。
Shopifyでのサイト制作ならお任せください