【簡単】LP(ランディングページ)にカート機能を設置する方法を画像付きで解説【STORES】
本記事の内容は、
・LP(ランディングページ)に、カート機能を実装したい
・おすすめの決済システムを知りたい
こういった疑問やお悩みにお答えします。
本記事のテーマ
【簡単】LP(ランディングページ)にカート機能を設置する方法【STORES】
【簡単】LP(ランディングページ)にカート機能を設置する方法【STORES】
![](https://oceandesign-web.com/wp-content/uploads/2021/01/㉒アイテムが表示-1024x490.png)
実際に、STORESを使ってLP(ランディングページ)にカート機能を付けたデモページがこちらです。
デモページ
こんな感じに、STORESの機能を利用してカート決済機能のあるLP(ランディングページ)を作成することができます。
STORESとは
最近CMでもよく見かけますね。
驚くほど簡単にネットショップが作れる!【STORES】
主な機能は大きく以下の3つです。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/機能-1024x547.png)
・ネットショップ開設(←今回使用)
・キャッシュレス決済
・ネット予約システム
今回、LP(ランディングページ)のカート決済機能に使用するのは、ネットショップ開設になります。
なので、こちらで新規登録を行います。
料金プラン
料金プランは2種類となっております。(2021年1月現在)
・フリープラン:月額料金0円 決済手数料5%
・スタンダードプラン:月額料金1,980円 決済手数料3.6%
まずは、無料で試して月額費用を抑えたい方は、無料のフリープランがおすすめです。
逆に、売上の目処があり、決済手数料を抑えたい方は、スタンダードプランがおすすめとなっています。
特徴
特徴を以下にまとめました。
・フリープラン(月額0円)でも、アイテム登録数無制限となっているため、好きなだけアイテムの販売が可能
・豊富な決済手段
VISA・mastercard・JCB・AMERICAN EXPRESS・Diners Club・DISCOVER・ペイパル・キャリア決済・楽天ペイ・銀行振込・コンビニ決済・翌月後払い(Paidy)
・フリープランでもかなり豊富な機能が使える
導入手順を画像で分かりやすく解説
![](https://oceandesign-web.com/wp-content/uploads/2021/01/4029885_m-edited.jpg)
アカウント開設手順
それでは、実際にまずはSTORESのアカウント開設手順を解説していきます。
①STORESから今すぐ無料ではじめるを選択します。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/①今すぐ無料ではじめる-1024x489.png)
②メールアドレス、パスワードを入力してアカウントを開設します。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/②アカウント開設-1024x504.png)
③登録したメールアドレスにメールが届くので、確認します。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/③確認メール-1024x495.png)
④届いたメールから、真ん中の「確認する」を押します。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/④確認する-1024x714.png)
⑤画面が切り替わったら、ストア名を決めます。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑤ストア名-1024x499.png)
以上がアカウント開設の流れになります。
カート機能実装手順
続いて、LP(ランディングページ)にカート機能を実装する手順について解説していきます。
⑥こちらが実際の管理画面、ダッシュボードになります。
赤枠の所から、実際のアイテム(商品)を追加していきます。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑥ダッシュボード-1024x516.png)
⑦それでは実際にアイテムを追加してみたいと思います。
尚、今回は説明用としてサンプルとなりますので、実際には購入できません。
右上の「+アイテムを作成」から進めていきます。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑦アイテムを追加-1024x510.png)
⑧アイテム編集画面になります。編集する項目は以下の通りです。
・アイテム画像 ・アイテム名(必須) ・価格(税込) ・割引率 ・アイテム説明(必須) ・国内送料 ・ストアで公開 ・在庫数(必須) ・カテゴリー ・ハッシュタグ
とりあえず、必須項目の
・アイテム名 ・アイテム説明 ・在庫数
+アイテム画像を記入してみます。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑧アイテム編集画面-1024x511.png)
⑨こんな感じに記入してみました。記入を終えたら、一番下の「保存する」を押します。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑨商品登録01-1024x507.png)
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑨商品登録02-1024x471.png)
⑩ダッシュボードにアイテムが追加されました。
無料のフリープランでも、アイテムの登録数は無制限となっています。
一度登録済みのアイテムは、あとから編集も可能です。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑩アイテム追加後ダッシュボード-1024x512.png)
⑪それでは試しに、ストアを見てみましょう。左上の「自分のストアを見る」をクリックします。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑪ストアを見る-1024x514.png)
⑫こんな感じで、先程追加した商品が表示されました。
これが自分のストア画面になります。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑫ストアページ-1024x513.png)
⑬商品をクリックすると、商品詳細ページに遷移することができます。
ここまでやったことはほんのわずかですが、こんなにも簡単にネットショップを始められます。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑬商品ページ-1-1024x516.png)
⑭ざっとどんな感じかを説明したので、本記事のテーマである、カート機能を追加する方法について解説していきます。
まずは、ダッシュボードの「ストア設定」を押します。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑭ストア設定-1024x510.png)
⑮下の方に行くと、「ボタンを設置」とあるので、「設置する」を押します。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑮ボタンを設置-1024x514.png)
⑯ボタンを設定する画面になりました。
ここでLP(ランディングページ)に埋め込むためのカートボタンを作成します。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑯ボタン画面-1024x490.png)
⑰下の方に行くと、「販売アイテムの登録」があるので、先程登録したアイテムを選択します。
選択したら、「貼り付けコードを生成する」を押します。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑰貼り付けコードを生成-1024x501.png)
⑱貼り付けコードが生成されたので、これをコピーして、埋め込みたいページに貼り付けます。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑱コードコピー-1-1024x503.png)
⑲試しに、ワードプレスに貼り付けてみます。
ブロックの追加から「カスタムHTML」を選択して、コードを貼り付けます。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑲コードを張り付け-1024x559.png)
⑳このように、簡単にボタンを設置することができました。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑳ボタン設置完了-1024x489.png)
ストアがクローズ中だと、ボタンを押した際にこのような画面になります。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/⑳クローズ時の画面-1024x490.png)
㉑ダッシュボードの「ストア設定」に行き、「公開」にします。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/㉑公開-1024x511.png)
㉒これで、ボタンを押した際にアイテムが表示されるようになりました。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/㉒アイテムが表示-1-1024x490.png)
㉓今回はデモページですが、「購入する」を押すと、実際にお客様情報入力画面に進みます。
![](https://oceandesign-web.com/wp-content/uploads/2021/01/㉓お客様情報入力画面-1024x514.png)
以上が、ボタンを設置する流れになります。
とても簡単に実装できることがお分かりいただけたかと思います。
まとめ
今回は、LP(ランディングページ)にSTORESを使用したカート機能を設置する方法について解説をいたしました。
本記事が少しでも、カート機能の導入に悩まれている方の参考になりましたら幸いです。
驚くほど簡単にネットショップが作れる!【STORES】
LP(ランディングページ)を作成する方法について、こちらの記事でまとめ解説しておりますので、ご興味がありましたら是非参考にしてみてください。↓