お気に入りボタンを商品ページに追加する方法

Question

お世話になります。

転換率をあげるために、全商品ページにお気に入りボタンを追加したいと考えています。
画像の作成から貼り方、方法や貼り付けるのに有効な位置など、初心者向けに教えていただけると助かります。

よろしくお願いいたします。

杉山

Answer

ECマスターズの塚本です。

＞画像の作成から貼り方、方法や貼り付けるのに有効な位置など、
＞初心者向けに教えていただけると助かります。

以下URLのページにお気に入りボタンを
好きな画像にする方法をまとめておりますので
参考にご確認いただけますでしょうか。

https://club.ec-masters.net/index.php?ecm-designcustomize-bookmark
（※レフトナビのデザインレシピ→お気に入りボタンを好きな画像にする方法よりご確認いただけます。）

上記で案内している画像はあくまでも例になりますが、
kumakumaさんが他のショップさんの画像を参考にしながら、
こういった画像が欲しい！などの場合は、ECステーションで提供している
おまかせマイデザイナーを利用して作成していただくのも良いかもしれません。

Answer

塚本さん、

ありがとうございました。好きな画像にする方法を参照させていただきました。

※下記枠内の〜〜〜〜〜までの部分全てをコピーしてご利用ください。
とのことなのですが、具体的にどこに貼り付けたらよいのかわからないので教えてください。

お手数おかけしますがよろしくお願いします。


杉山

Answer

ECマスターズの塚本です。

＞※下記枠内の〜〜〜〜〜までの部分全てをコピーしてご利用ください。
＞とのことなのですが、具体的にどこに貼り付けたらよいのかわからないので教えてください。

場所はヘッダーの部分に貼り付けていただければと思います。
1-2 デザイン設定→ヘッダー・フッター・レフトナビよりご確認ください。

Answer

塚本さん、

お世話になります。
ご指示いただいた、1-2 デザイン設定→ヘッダー・フッター・レフトナビ
で、ヘッダーのところにいれればよいのは理解できました。
ただ、ヘッダーのソースのどこにいれてよいものかわからない状態です。
これはｈｔｍｌのソースを理解しないとできない作業ということでしょうか？

また、ヘッダーにいれてしまうと全ページに表示されるとおもうのですが、商品のお気に入り登録なので、全商品ページにのみにいれたいボタンと考えています。そのような設定はできますでしょうか？

Answer

ECマスターズの塚本です。

＞ただ、ヘッダーのソースのどこにいれてよいものかわからない状態です。
＞これはｈｔｍｌのソースを理解しないとできない作業ということでしょうか？

こちらヘッダーのどの部分に
入れてもいただいても大丈夫ですので、
ヘッダーの一番下にでも設定されてみてください。


＞全商品ページにのみにいれたいボタンと考えています。
＞そのような設定はできますでしょうか？

上記のようにヘッダーに設定していただくことで、
全商品ページに反映させることが可能です。

Answer

.塚本さん、

お世話になります。
画像URLを自分でR-cabinetに登録したURLに変更してヘッダーの一番下にコピーしてプレビューしたのですが、どこにも表示されません。

こちらがヘッダー部分の一番下の部分です。何か間違いがありますでしょうか？
↓




/* お気に入り商品登録画像変更 */
body #rakutenLimitedId_aroundCart div.bkm{
width: 306px !important;
}
body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
width: 306px !important;
height: 48px !important;
background: url(https://image.rakuten.co.jp/season-aroma-labo/cabinet/04796289/imgrc0070213483.jpg) no-repeat 0 0 !important;
}
body div.bookmarkArea div.bkm a.addBkm {
width: 306px !important;
height: 48px !important;
}

Answer

ECマスターズの塚本です。

＞こちらがヘッダー部分の一番下の部分です。何か間違いがありますでしょうか？

ヘッダー反映直前のプレビュー画面では表示されませんので、
反映後、実際のショップにてご確認いただけますでしょうか。

また、確認したところ画像が大きいので、
画像をwidth: 306px、height: 48pxで作成していただくか、
タグ自体を実際の大きさに変更して確認していただければと思います。