カラーミーショップ

『カラーミーショップ』商品一覧に”カートボタン”を設置する方法

タヌキ
タヌキ
おはようございます!こんにちは!こんばんは!
タヌキです。杉本園の長男坊では決してない。

今回はネットショップについて書いていきます。
杉本園のネットショップは『カラーミーショップ』を利用させて貰ってます😊

テンプレートはカラーミーショップ内のモノを利用させて貰っていますが、いくつか使いやすいように改造しています。
今回は商品一覧にカートボタンを設置する方法を解説していこうと思います。

商品一覧にカートボタン設置する方法

URL内の(あなたのID)をご自分のIDに変更して下さい。

商品一覧-HTML編集

<script type=’text/javascript’ src=’https://(あなたのID).shop-pro.jp/?mode=cartjs&pid=<{$productlist[num].id}>&style=standard&name=n&img=n&expl=n&stock=n&price=n&inq=n&sk=n’ charset=’euc-jp’></script>

商品一覧に設置する理由

新規のお客様には説明は必要ですが、常連さんは説明見ずにサクサク買い物をしたいと思います。
その為、商品詳細の手前、商品一覧にカートボタンを設置する事にしました。

商品一覧にあればクリックの手間が減り、購入率のアップ↑にも繋がります。

無農薬茶の杉本園のカートボタン設置

杉本園で利用中のテンプレートは有料テンプレートのMODEを利用しています。
レスポンシブテンプレートになります。
デザイン崩れを防ぐ為、PCとスマホで別々のHTML、CSSになっています。

商品一覧-HTML編集

設置位置は商品リストの下の方になります。
テンプレートによって違うと思うので探してみて下さい。

<{* ↓↓↓———- PC購入フォーム ———-↓↓↓ *}>
<div class=”cart_input hidden-phone”><span class=”cart_input2″><script type=’text/javascript’ src=’https://(あなたのID).shop-pro.jp/?mode=cartjs&pid=<{$productlist[num].id}>&style=standard&name=n&img=n&expl=n&stock=n&price=n&inq=n&sk=n’ charset=’euc-jp’></script></span></div>

<{* ↓↓↓———- スマホ購入フォーム ———-↓↓↓ *}>
<div class=”cart_input hidden-desktop”><span class=”cart_input3″><script type=’text/javascript’ src=’https://(あなたのID).shop-pro.jp/?mode=cartjs&pid=<{$productlist[num].id}>&style=standard&name=n&img=n&expl=n&stock=n&price=n&inq=n&sk=n’ charset=’euc-jp’></script></span></div>

共通-CSS編集

CSSは共有に入れて下さい。
ボタンの位置やデザインはこちらで修正できます。

.cart_input {
height: 100px; /* 高さ指定 */
position: relative; /* 位置指定の基準点にする */
}
.cart_input2 {
position: absolute; /* 位置指定 */
top: 0; /* 位置指定 */
bottom: 0; /* 位置指定 */
left: 0; /* 位置指定 */
right: 0; /* 位置指定 */
margin: auto; /* 中央寄せ */
width: 200px; /* 幅指定 */
}
.cart_input3 {
position: absolute; /* 位置指定 */
top: 0; /* 位置指定 */
bottom: 0; /* 位置指定 */
left: 0; /* 位置指定 */
right: 0; /* 位置指定 */
margin: auto; /* 中央寄せ */
width: 100%; /* 幅指定 */
}

商品一覧にカートボタンを設置まとめ

そのうちの一つが、商品一覧にカートボタンを設置することです。
新規のお客様には説明は必要ですが、常連さんは説明見ずにサクサク買い物をしたいと思います。

その為に商品詳細の手前、商品一覧にカートボタンを設置する事にしました。
皆様の参考になれば幸いです。

わからない事などありましたら、コメントなど頂けると幸いです。
ただ自分もあまり詳しくないので、答えられたら……になります!😅
宜しくお願い致します。

ABOUT ME
お茶畑のタヌキ
お茶畑のタヌキ
お茶畑横の森林に暮らすタヌキ。
信楽焼に見えるがタヌキである。
杉本園の長男坊では決してない。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA