カートボタンを付ける

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

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

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

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

 

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

カラーミーショップのどこでもカラーミーについて実践的に学ぶ

注意点
「カートに入れる」ボタンはinputタグで書いてありますので、:beforeは効きません。
文字列の前方に input:before でカートアイコン画像を付けることはできません。

カートボタンのデザインを調整するには、!importantを付けてスタイルを効かせます。

購入数1でカートに入ります。

オプションなし・購入数1の商品に使うと周囲がゴチャっとしなくてよいかなと思います。

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

売切れ時はボタンは非表示になる仕様ですが、条件によっては SOLD OUT 表示させることも可能です。

執筆者

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

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴10年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

お仕事のご相談はこちら

関連記事