ブログや自社サイトにショッピングカートを埋め込む

2018年4月7日

ECサイト(ネットショップ)とは別に、ブログや自社サイトを所有されている方は多いと思います。
ブログなどで自社商品を紹介するときはもちろん商品ページへのリンクを貼っているだろうと思いますが、
その場合、ブログ記事など→ECサイト→(カートに入れる)→注文画面 という流れをへてご注文いただくことになります。

 

統計上、購入手続きのステップが多いほどカゴ落ち率が高まると言われます。

しかしブログ記事から直接注文画面に持っていくことが出来ればカゴ落ちの確率が減り、受注確率が上がります

 

今回はショップサーブの外部カート機能をご紹介します。
formで作れますので、ほとんどコピー&ペーストで事足ります。

 

商品ページを自作ページで運用する場合にも使えますので、ショップサーブのカスタマイズで行き詰まっている方など自作ページでネットショップを運営してもいいと思います。

 

ショップサーブの外部カート機能

ショップサーブでは外部ページに買い物カゴを表示させる外部カート機能があります。

 

ショップサーブの商品ページにはオプション、バリエーションなど自由項目を追加できますが、
それら全てを利用している場合でも問題ありません。

 

例としてhogeTシャツの商品ページを作るとします。

 

ほげt

 

オプション(色・サイズ)・バリエーション(レビューを書いて送料無料)も利用して販売しているとして、フォームが下のサンプルです。

 

<form action="https://cart.shopserve.jp/-/ドメイン名/cart.php" method="post"
 target="_top">

<input type="hidden" name="ITM" value="商品番号">

<select name="OPTION1">
<option value="blue">ブルー</option>
<option value="khaki">カーキ</option>
</select>

<select name="OPTION2">
<option value="sサイズ">Sサイズ</option>
<option value="mサイズ">Mサイズ</option>
</select>


<select name="VAR1">
<option value="書く">レビューを書く(送料無料)</option>
<option value="書かない">レビューを書かない</option>
</select>

<select name="CNT">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="submit" value="カゴへ" /></form>

 

注:
1行目 には割り振られた数字が入ります。
ショップサーブ管理画面 > サーバー > URL一覧 で「カートをみる」の項目でご確認ください。
1行目 独自ドメインを利用していない場合は 【https://cart.shopserve.jp/ショップID/cart.php】 となります。

オプション・バリエーションのvalue=””の値には登録しているものをそのまま記述します。ここが間違っているとフォームが機能しません。

 

これをこのままサイトやブログに書いてみるとこんな感じに。

 


 

「カゴへ」の部分は好きな画像に置き換えることもできます。

その場合は最後の行を

<input type="image" src="画像ファイルURL">

とします。

 

 

このままだと味気ないので、項目名や画像などを適宜追加し、cssで見栄えを調整してやれば出来上がりです。

 

ご参考になりましたら幸いです。

 

なお注記していませんでしたが、不要なオプションやバリエーションは記述する必要はありません

 

 

ほげt
色を選んでください
サイズを選んでください
レビューを書いて送料無料
枚数をお選びください

追記 → :「formの送信ボタンをオンマウスで切り替える

 

 

(Visited 40 times, 1 visits today)