• 楽天
  • Yahoo!

買い物カゴへボタンを商品ページに追加する方法

eyecatch

こんにちは、

商品ページにて画像や説明書きを沢山のせた長いページの商品が
店舗様によってはあるかと思います。

お客様の中には長いページを全て読みきる前に
買い物カゴ付近へたどり着きたい人もいますね。

a499966a2189f904dcf75cdb4ce343fe

楽天、ヤフーではこのような「買い物カゴへ」ボタンが右下に張り付いていますが
ページ上にもボタンを設置してクリックを促したい!という店舗様の
お声がありましたので今回はこの方法をご紹介したいと思います。

専用HTMLタグを取得

専用タグと言うまでもないですが特定のリンク指定されている
<a>タグになります。

テキストが画像で挟んで使ってみましょう。

楽天ショップ

<a href="●●●#rakutenLimitedId_cart">
▲▲▲
</a>

上記URLの内、
 ・●●● ⇒設置したい商品ページのURL
 ・▲▲▲ ⇒「買い物かごへ」の画像やテキストなど
へ書換えます。

楽天の場合は仕組み上、商品毎にURLを変更する必要があります。
また、本家の買い物カゴへボタンのようにクリックすると
スムーズに移動せずパッと移動するようになります。

ヤフーショップ

<a href="#ItemInfo">
▲▲▲
</a>

上記URLの内、
 ・▲▲▲ ⇒「買い物かごへ」の画像やテキストなど
へ書換えます。

ヤフーの場合は全ページ共通で一括設置しても問題ありません。
簡単ですね!

サンプルバナー

サンプル「買い物かごへ」ボタンをこちらに用意しました。
もしよろしければご利用ください。

gotobtn

早速ボタンを商品ページ上に設置してみよう

02960d72f27e7671df7e782a8efb5f21

楽天の販売説明文やヤフーのフリースペースなどの
お好みの場所へ貼り付ければ設置完了です!

まとめ

説明文には一つだけボタンを設置するだけでなく、
説明文途中途中に複数設置してもよさそうですね!
是非挑戦してみてください。

この記事を書いた人

佐藤

佐藤ディレクター

CSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。