• 楽天
  • Yahoo!

【楽天カスタマイズ】商品画像の拡大画像を良く見せる専用ページを呼び出す方法

名称未設定-1

ネットショップでは画像の良し悪しで購入が決まると言っても過言ではありません。
そんな中、大きな画像で商品を細部まで見て欲しいけど
ページデザインが崩れてしまうから拡大機能を付けたい!
でも難しそうだし画像へリンクさせるのもな・・

なんて店舗様に簡単修正で拡大画像を良くみせる方法をご紹介したいと思います!

デモ

通常画像


画像をクリックして拡大する

画像にその画像へのリンクをつけた場合です。
いつもの画像だけのページになります。

拡大ページ用画像


画像をクリックして拡大する

「前のページに戻る」というリンクが付いて元サイズで
表示してくれる専用のページになりました!
このリンクはtarget=”_blank”指定をして開いた場合うまく作動しませんので注意。

設定方法

リンク先の画像URLの一部を修正します。
画像はサムネイル用のURLを使用します。

通常のサムネイル用画像URLサンプル
http://thumbnail.image.rakuten.co.jp/@0_mall/wakeariya/cabinet/kagome/kagome_lp/161202_nm01.jpg
拡大専用のサムネイル用画像URLサンプル
http://thumbnail.image.rakuten.co.jp/s/?@0_mall/wakeariya/cabinet/kagome/kagome_lp/161202_nm01.jpg
GOLDの画像URLを使う場合
http://thumbnail.image.rakuten.co.jp/s/?@0_gold/wakeariya/wakeari2010/head/images/top_navi02.jpg

co.jp/@の間にs/?を追記するだけです!

まとめ

いかがでしたでしょうか。
商品ページの販売説明文で画像を並べるだけでなく、
拡大リンク付きの画像に変えて転換率UPを狙いましょう!!

この記事を書いた人

佐藤

佐藤ディレクター

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

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

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

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

セキュリティチェック *

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