ブログ

2015.12.18

カラーミーでイマドキの商品ページを作る3つのポイント
カラーミーでイマドキの商品ページを作る3つのポイント

Web制作ツール

キャプチャ
こんにちは、宇野です。
大き目の商品画像にオプションごとの在庫表示とカートへ入れるボタン。
最近このようなデザインの商品ページを持つECサイトを多く見かけるようになってきましたね。

ところが、いざ自分のECサイトにデザインを取り入れようと思ってもショップASPを使っていると上手くいかないことも多いです。今回はこのようなデザインをカラーミーショップで実現するための3つのポイントをご紹介します。



目次
1.商品ごとにブランドロゴ画像を表示する。
2.オプションごとに[カートへ入れる]ボタンを表示する。
3.オプションごとに在庫を表示する。

1.商品ごとにブランドロゴ画像を表示する。

商品ごとにブランドロゴ画像を表示
まずはこちら、商品ページでブランド名と一緒にブランドロゴも表示することで視認性をあげて分かりやすくしています。
ただし、カラーミーでこのデザインを実現しようにもブランドロゴを管理する機能はカラーミーにはありません。
苦肉の策としてブランドをカテゴリとして登録し、カテゴリイメージにブランドロゴをセット。後は商品登録時にカテゴリを設定して商品ページでカテゴリイメージを表示すれば商品ページにブランドロゴが表示でき、、、ないです。
商品ページには商品に設定されているカテゴリのイメージを表示するカスタムタグがありません。

どうするか。

幸い商品ページではカテゴリとカテゴリイメージURLのリストはカスタムタグで取得可能です。ただし、商品のカテゴリとマッチさせることはできません。
そこで、パンくずリスト用の大カテゴリーURL($bid_link)を使います。
パンくずリスト用の大カテゴリーURLにはカテゴリIDが含まれていますので、まずはカテゴリIDを抜き出します。
抜き出したカテゴリIDをキーにカテゴリリストからカテゴリイメージURLを取得してimgタグで表示する。
これでブランドロゴを商品ページに表示させることができます。


2.オプションごとに[カートへ入れる]ボタンを表示する。

オプションごとにカートへ入れるボタンを表示
つづいてこちら、オプションごとに[カートへ入れるボタン]を表示することで簡単にカートへ入れることが出来るようになっています。
オプションがある商品の場合、カラーミーの一般的な操作方法は
1.セレクトボックス or ラジオボタンでオプションを選択。
2.[カートへ入れる]ボタン押下。
となります。
しかし、この操作方法ではオプション選択とボタン押下の2アクションが必要となってしまいます。
1アクションでカートへ商品を入れれるようにしたい!

どうするか。

カラーミーではオプションを選択してカートへ入れるボタンを押した際に、[option]という値に選択されたオプションの情報を格納して送信しています。そこで、[カートへ入れる]ボタンが押されたときのonclickイベントで、[option]に押されたボタンのオプション情報を格納します。


3.オプションごとに在庫数を表示する。

オプションごとに在庫数を表示
最後はこちら、カラーミーはオプション表示画面が用意されており、オプションごとの在庫をそちらの画面で確認することが可能ですが、画面遷移が発生するためユーザーにとっては不親切なUIです。
どうせなら商品ページで1度に確認したいですよね。しかし、カラーミーの商品ページカスタムタグを見てもオプションごとの在庫数は見当たりません。
そう、カラーミーでは商品詳細ページでオプションごとの在庫数を表示することは出来ないのです。

どうするか。

オプションごとの表示数はオプション表示画面では確認することが出来ます。そこで、商品ページ表示時にあわせてオプション表示画面もロードし、オプションごとの在庫数をスクレイピングで取得します。


おわりに

カラーミーは便利な機能がたくさんある反面、デザイン上の制約も多くあります。しかし、今回ご紹介したようにやり方を工夫することで自由度の高いデザインを実現することは可能です。
今回のご紹介したやり方を参考に是非トライされてみてはいかがでしょうか。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

メールフォームからの
お問い合わせ