商品一覧にカートボタンを付ける

おすすめ商品、ランキング、お気に入りなどトップページに表示できる商品リストや、商品一覧ページに表示される商品リストに、どこでもカラーミーを使ってカートボタンを設置する方法です。

商品詳細ページに移動することなく、このページでカートに入れられます。クイックカートイン(下記事を参照)と相性がよいと思います。

参考)新しいショッピングカートでクイックカートインが利用可能になりました【新カゴプロジェクト通信 Vol.17】

どこでもカラーミー設置例

実装

カートボタンのみ設置の場合は、購入数1でカートに入ります。
オプションなし・購入数1の商品に使うと、周囲がゴチャっとしなくてよいかなと思います。

以前書いたブログ記事を参考にどうぞ。

注意点

「カートに入れる」ボタンはinputタグで書いてありますので、:beforeは効きません
(文字列の前方に input:before でカートアイコン画像を付けることはできません) 。
サーバー側で処理する部分が多く、変更できないことも多いです。

カートボタンのデザインを調整するには、!importantを付けてスタイルを効かせます。
デザインはCSSのみ使えます。通常シンプルな四角ボタンになります。
画像を用意すれば、任意の画像に置き換えることも可能です(上のブログ記事を参考にどうぞ)。

商品説明を読むことなくカートに入れられてしまうので、商品についてしっかり伝えたいことがある場合は向きません。

売切れ時はボタンは非表示になる仕様です。
会員機能を使っている場合はログインするまで非表示です。

制作物用のお問い合わせボタン

えいじ@naeco.jp この記事を書いた人

機能実装のお手伝いをしています。お気軽にご相談ください。
追加の要望や設置場所の状態によって、お見積り金額は変動します。

ご相談・お問い合わせはこちら

よく読まれているプロダクト