スクロールで付いてくる「カートへ」ボタン -商品詳細- – IT便利屋

　今回のコピペで簡単カスタマイズは、特に長い商品ページを採用しているショップにお勧めのカラーミーショップカスタマイズコードのご紹介です。

　これはカラーミーショップの商品詳細ページにおいて、カート内ページへ飛ぶリンクボタン（「カートへ」ボタン）が画面右下に常に表示され、画面をスクロールしても自動で付いてくるというカスタムパーツです。ね、いいでしょ？
　ちょこっと修正すればページの上までスクロールするボタンと併用できるカスタムパーツだと思いますので、いつものようにサクッとコピペしちゃってください。

　上図のように、商品ページ内において右下に常に表示され、画面のスクロールにも自動で付いてくる「カートへ」ボタンのカスタマイズです。カラーミーショップだからこそ簡単コピペで実装できちゃいます。ちなみに、javascriptは使用しておりません。

スクロールでついてくる「カートへ」ボタンのカスタマイズコード

　デザイン設定の商品詳細のHTML設定の一番下に下記のコードをコピペして下さい。

HTMLコード

	   <a id="scroll-go-cart" href="<{$view_cart_url}>" style="display: block;">カートへ</a>

CSSコード

　デザイン設定の商品詳細のCSS設定の一番下に下記のコードをコピペして下さい。

	  /***************コピペで簡単!スクロールでついてくる「カートへ」ボタン*************************/ #scroll-go-cart {     background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);     border-radius: 5px 5px 5px 5px;     bottom: 45px;     color: #FFFFFF;     display: block;     font-size: 12px;     padding: 15px 5px;     position: fixed;     right: 10px;     text-align: center;     text-decoration: none;     width: 50px;     z-index: 999; } #scroll-go-cart:hover{   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);　rgba(0,0,0,0.8); }

　※bottom: ○○○px; の数字を上げる事でボタンが上に移動します。
　　また、 right: ○○○px; の数字を上げる事で左に移動します。

以上、コピペで簡単カスタマイズでした

　いかがでしたでしょうか？さらに、カラーミーショップなら一度コードを作成すれば、色々と応用したカスタマイズができちゃいます。
　今後も順次、皆様にご活用いただけるTIPSをご紹介させていただく予定ですので楽しみに待っていて下さい。

　その他、レイアウト調整などのご希望等ございましたら、レイアウト調整等5,000円～料金表承ります。もちろん、各種独自カスタマイズも承りますので、弊社までお気軽にご相談下さいませ。
皆様のご要望を心よりお待ちしております。