【簡単】LP(ランディングページ)にカート機能を設置する方法を画像付きで解説【STORES】


本記事の内容は、

・LP(ランディングページ)に、カート機能を実装したい
・おすすめの決済システムを知りたい


こういった疑問やお悩みにお答えします。

本記事のテーマ

【簡単】LP(ランディングページ)にカート機能を設置する方法【STORES】



【簡単】LP(ランディングページ)にカート機能を設置する方法【STORES】

実際に、STORESを使ってLP(ランディングページ)にカート機能を付けたデモページがこちらです。

デモページ

こんな感じに、STORESの機能を利用してカート決済機能のあるLP(ランディングページ)を作成することができます。


STORESとは

最近CMでもよく見かけますね。

驚くほど簡単にネットショップが作れる!【STORES】

主な機能は大きく以下の3つです。

・ネットショップ開設(←今回使用)
・キャッシュレス決済
・ネット予約システム


今回、LP(ランディングページ)のカート決済機能に使用するのは、ネットショップ開設になります。
なので、こちらで新規登録を行います。


料金プラン

料金プランは2種類となっております。(2021年1月現在)

・フリープラン:月額料金0円 決済手数料5%
・スタンダードプラン:月額料金1,980円 決済手数料3.6%

まずは、無料で試して月額費用を抑えたい方は、無料のフリープランがおすすめです。
逆に、売上の目処があり、決済手数料を抑えたい方は、スタンダードプランがおすすめとなっています。


特徴

特徴を以下にまとめました。

・フリープラン(月額0円)でも、アイテム登録数無制限となっているため、好きなだけアイテムの販売が可能
・豊富な決済手段
VISA・mastercard・JCB・AMERICAN EXPRESS・Diners Club・DISCOVER・ペイパル・キャリア決済・楽天ペイ・銀行振込・コンビニ決済・翌月後払い(Paidy)
・フリープランでもかなり豊富な機能が使える



導入手順を画像で分かりやすく解説


アカウント開設手順

それでは、実際にまずはSTORESのアカウント開設手順を解説していきます。

STORESから今すぐ無料ではじめるを選択します。



②メールアドレス、パスワードを入力してアカウントを開設します。



③登録したメールアドレスにメールが届くので、確認します。



④届いたメールから、真ん中の「確認する」を押します。



⑤画面が切り替わったら、ストア名を決めます。



以上がアカウント開設の流れになります。


カート機能実装手順

続いて、LP(ランディングページ)にカート機能を実装する手順について解説していきます。

⑥こちらが実際の管理画面、ダッシュボードになります。
赤枠の所から、実際のアイテム(商品)を追加していきます。



⑦それでは実際にアイテムを追加してみたいと思います。
尚、今回は説明用としてサンプルとなりますので、実際には購入できません。
右上の「+アイテムを作成」から進めていきます。



⑧アイテム編集画面になります。編集する項目は以下の通りです。
・アイテム画像 ・アイテム名(必須) ・価格(税込) ・割引率 ・アイテム説明(必須) ・国内送料 ・ストアで公開 ・在庫数(必須) ・カテゴリー ・ハッシュタグ

とりあえず、必須項目の
・アイテム名 ・アイテム説明 ・在庫数
+アイテム画像を記入してみます。



⑨こんな感じに記入してみました。記入を終えたら、一番下の「保存する」を押します。



⑩ダッシュボードにアイテムが追加されました。
無料のフリープランでも、アイテムの登録数は無制限となっています。
一度登録済みのアイテムは、あとから編集も可能です。



⑪それでは試しに、ストアを見てみましょう。左上の「自分のストアを見る」をクリックします。



⑫こんな感じで、先程追加した商品が表示されました。
これが自分のストア画面になります。



⑬商品をクリックすると、商品詳細ページに遷移することができます。
ここまでやったことはほんのわずかですが、こんなにも簡単にネットショップを始められます。



⑭ざっとどんな感じかを説明したので、本記事のテーマである、カート機能を追加する方法について解説していきます。
まずは、ダッシュボードの「ストア設定」を押します。



⑮下の方に行くと、「ボタンを設置」とあるので、「設置する」を押します。



⑯ボタンを設定する画面になりました。
ここでLP(ランディングページ)に埋め込むためのカートボタンを作成します。



⑰下の方に行くと、「販売アイテムの登録」があるので、先程登録したアイテムを選択します。
選択したら、「貼り付けコードを生成する」を押します。



⑱貼り付けコードが生成されたので、これをコピーして、埋め込みたいページに貼り付けます。



⑲試しに、ワードプレスに貼り付けてみます。
ブロックの追加から「カスタムHTML」を選択して、コードを貼り付けます。



⑳このように、簡単にボタンを設置することができました。



ストアがクローズ中だと、ボタンを押した際にこのような画面になります。



㉑ダッシュボードの「ストア設定」に行き、「公開」にします。



㉒これで、ボタンを押した際にアイテムが表示されるようになりました。



㉓今回はデモページですが、「購入する」を押すと、実際にお客様情報入力画面に進みます。



以上が、ボタンを設置する流れになります。
とても簡単に実装できることがお分かりいただけたかと思います。


まとめ


今回は、LP(ランディングページ)にSTORESを使用したカート機能を設置する方法について解説をいたしました。
本記事が少しでも、カート機能の導入に悩まれている方の参考になりましたら幸いです。


驚くほど簡単にネットショップが作れる!【STORES】


LP(ランディングページ)を作成する方法について、こちらの記事でまとめ解説しておりますので、ご興味がありましたら是非参考にしてみてください。↓



こちらの記事を最後まで、ご覧いただきありがとうございました!